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

2020-06-13 10:36:12易采站长站整理

最近部署一个Vue项目到阿里云ECS上,因为项目涉及一些跨域请求,所以采用了

Nginx
代理请求本地的
node
服务(利用
pm2
做进程管理)。
node
服务借助
axios
设置
headers
referer
host
转发请求,解决跨域请求问题。

先交代下在阿里云ECS里安装的部署环境:

phpstudy
(php调试运行大礼包,里面包含nginx、mysql等,还能监控端口占用情况)、
pm2
(node服务进程管理工具)、
node
git
等等。

部署过程

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

构建项目

构建项目前,要修改项目

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;