Vue项目部署的实现(阿里云+Nginx代理+PM2)

 更新时间:2019年03月26日 14:51:39   作者:Clearlove  
这篇文章主要介绍了Vue项目部署的实现(阿里云+Nginx代理+PM2),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

最近部署一个Vue项目到阿里云ECS上,因为项目涉及一些跨域请求,所以采用了Nginx代理请求本地的node服务(利用pm2做进程管理)。node服务借助axios设置headersrefererhost转发请求,解决跨域请求问题。

先交代下在阿里云ECS里安装的部署环境:phpstudy(php调试运行大礼包,里面包含nginx、mysql等,还能监控端口占用情况)、pm2(node服务进程管理工具)、nodegit等等。

部署过程

  1. 拉去GitHub项目代码至root目录下(找到安装phpstudy的WWW目录),构建项目
  2. 修改nginx-conf的代理配置、root项配置(指向项目项目的dist目录下)
  3. 启动pm2(项目中,事先已写好服务端逻辑prod.server.js)
  4. 启动phpstudy
  5. 访问项目

构建项目

构建项目前,要修改项目confing目录下的index.js,主要是build部分的端口、目录,具体如下:

build: {
  port: 9001, // 因为我是用PHPStudy做web服务器的,此时php.cgi会占9000端口,所以改用9001
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '',
  .......
}

主要有两部分

修改端口,跟代理端口一致

port: 9001

修改assetsPublicPath

assetsPublicPath: ''

nginx-conf配置

利用phpstudy,可以很方便的进行nginx相关设置、host修改、端口监控等等。先来说说nginx-conf的配置。

先找到nginx-conf配置入口

修改ngin-conf

upstream my_project {
 server 127.0.0.1:9001;
 keepalive 64;
}

server {
 listen    80;
 server_name my_project;

 #charset koi8-r;

 #access_log logs/host.access.log main;
 root  "C:/phpStudy/PHPTutorial/WWW/project/dist";

 location / {
  index index.php index.html index.htm; 
  
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header Host $http_host;
  proxy_set_header X-NginX-Proxy true;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  proxy_max_temp_file_size 0;
  proxy_pass http://my_project/;
  proxy_redirect off;
  proxy_read_timeout 240s; 
   
 }
}

注意事项

root配置,指向构建后目录

root "C:/phpStudy/PHPTutorial/WWW/project/dist";

设置代理端口时,避免端口占用!!

upstream my_project {
 server 127.0.0.1:9001;
 keepalive 64;
}

开始部署时,使用的是9000端口,一直运行不起来,后面发现phpstudy启动是php-cgi.exe默认就使用了9000端口。关于端口使用情况,phpstudy也提供了工具。

启动pm2

关于pm2的介绍、常规使用自行了解。在项目目录下事先已经写好了转发请求的逻辑。

pro.server.js

var axios = require('axios')
const bodyParser = require('body-parser')
var config = require('./config/index')
var express = require('express')

var app = express()
var apiRoutes = express.Router()

apiRoutes.get('/api/getdata', function(req, res) {
 var url = 'https://a.com'
 axios.get(url, {
  headers: {
   referer: 'https://b.com',
   host: 'b.com'
  },
  params: req.query
 }).then((response) => {
  ....
 }).catch((e) => {
  console.log(e)
 })
})


app.use('/', apiRoutes)

app.use(express.static('./dist'))

var port = process.env.PORT || config.build.port

module.exports = app.listen(port, function (err) {
 if (err) {
  console.log(err)
  return
 }
 console.log('Listening at http://localhost:' + port + '\n')
})

这里只是简单的借助axios可以设置refererhost,实现代理转发的功能。

运行prod.server.js

prod.server.js是在根目录下,所以运行命令如下:

pm2 start prod.server.js

进程列表:

pm2 start list

查看进程详情

pm2 show 0

总结

整个部署过程涉及比较多的知识点,nginx代理node开发部署端口管理等等。在端口占用这个点上卡了一段时间。不过目前只是实现构建部署、访问。但维护成本还是比较高,先得从GitHub拉取代码,本地构建。项目完成以后,研究下持续性集成流程。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue3响应式高阶用法之shallowRef()的使用

    Vue3响应式高阶用法之shallowRef()的使用

    在Vue3框架中,shallowRef()为开发者提供了细粒度的响应式控制能力,特别适用于处理深层嵌套对象或需要部分响应式的场景,本文就来详细的介绍一下,感兴趣的可以了解一下
    2024-09-09
  • vue实现城市列表选择功能

    vue实现城市列表选择功能

    这篇文章主要介绍了vue实现城市列表选择功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Vue使得大屏自适应的多种方法

    Vue使得大屏自适应的多种方法

    这篇文章主要介绍了Vue使得大屏自适应的多种方法,自适屏幕,始终保持16:9的比例,还一种是使用CSS scale属性对大屏幕做自适应处理,需要的朋友可以参考下
    2023-10-10
  • 基于vue+echarts 数据可视化大屏展示的方法示例

    基于vue+echarts 数据可视化大屏展示的方法示例

    这篇文章主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2020-03-03
  • Vue配置文件vue.config.js配置前端代理方式

    Vue配置文件vue.config.js配置前端代理方式

    这篇文章主要介绍了Vue配置文件vue.config.js配置前端代理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue过滤器filters的用法及时间戳转换问题

    Vue过滤器filters的用法及时间戳转换问题

    Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法,感兴趣的朋友一起看看吧
    2021-09-09
  • Element-UI结合递归组件实现后台管理系统左侧菜单

    Element-UI结合递归组件实现后台管理系统左侧菜单

    在Vue.js中使用递归组件可以方便地构建多层级的菜单结构,递归组件适用于处理具有嵌套关系的数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-09-09
  • vue3+ts项目搭建的实现示例

    vue3+ts项目搭建的实现示例

    这篇文章主要介绍了vue3+ts项目搭建的实现示例,本文目的在于记录自己项目框架搭建的过程,通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-03-03
  • elementUI el-table二次封装的详细实例

    elementUI el-table二次封装的详细实例

    在项目中会多次使用表格展示数据,不对这个table进行二次封装成我们自己想要的,重复的代码量的工作会比较大,下面这篇文章主要给大家介绍了关于elementUI el-table二次封装的相关资料,需要的朋友可以参考下
    2023-03-03
  • 详解Vue3如何加载动态菜单

    详解Vue3如何加载动态菜单

    这篇文章主要为大家详细介绍了Vue3是如何实现加载动态菜单功能的,文中的示例代码讲解详细,对我们学习Vue有一定帮助,需要的可以参考一下
    2022-07-07

最新评论