共计 2522 个字符，预计需要花费 7 分钟才能阅读完成。
最近部署一个 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;
}
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 可以设置 referer 和 host，实现代理转发的功能。
运行 prod.server.js
prod.server.js 是在根目录下，所以运行命令如下：
pm2 start prod.server.js
进程列表：
pm2 start list
查看进程详情
pm2 show 0
总结
整个部署过程涉及比较多的知识点，nginx 代理，node 开发部署，端口管理等等。在端口占用这个点上卡了一段时间。不过目前只是实现构建部署、访问。但维护成本还是比较高，先得从 GitHub 拉取代码，本地构建。项目完成以后，研究下持续性集成流程。