最近部署一個Vue項(xiàng)目到阿里云ECS上，因?yàn)轫?xiàng)目涉及一些跨域請求，所以采用了Nginx代理請求本地的node服務(wù)（利用pm2做進(jìn)程管理）。node服務(wù)借助axios設(shè)置headers的referer、host轉(zhuǎn)發(fā)請求，解決跨域請求問題。
成都創(chuàng)新互聯(lián)公司2013年成立，先為秀英等服務(wù)建站，秀英等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為秀英企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
先交代下在阿里云ECS里安裝的部署環(huán)境：phpstudy（php調(diào)試運(yùn)行大禮包，里面包含nginx、MySQL等，還能監(jiān)控端口占用情況）、pm2（node服務(wù)進(jìn)程管理工具）、node、git等等。
部署過程
構(gòu)建項(xiàng)目
構(gòu)建項(xiàng)目前，要修改項(xiàng)目confing目錄下的index.js,主要是build部分的端口、目錄，具體如下：
重慶分公司
重慶分公司
build: {
port: 9001, // 因?yàn)槲沂怯肞HPStudy做web服務(wù)器的，此時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，可以很方便的進(jìn)行nginx相關(guān)設(shè)置、host修改、端口監(jiān)控等等。先來說說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;
}
}注意事項(xiàng)
root配置，指向構(gòu)建后目錄
root "C:/phpStudy/PHPTutorial/WWW/project/dist";
設(shè)置代理端口時，避免端口占用！！
upstream my_project {
server 127.0.0.1:9001;
keepalive 64;
}開始部署時，使用的是9000端口，一直運(yùn)行不起來，后面發(fā)現(xiàn)phpstudy啟動是php-cgi.exe默認(rèn)就使用了9000端口。關(guān)于端口使用情況，phpstudy也提供了工具。
啟動pm2
關(guān)于pm2的介紹、常規(guī)使用自行了解。在項(xiàng)目目錄下事先已經(jīng)寫好了轉(zhuǎn)發(fā)請求的邏輯。
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可以設(shè)置referer和host，實(shí)現(xiàn)代理轉(zhuǎn)發(fā)的功能。
運(yùn)行prod.server.js
prod.server.js是在根目錄下，所以運(yùn)行命令如下：
pm2 start prod.server.js
進(jìn)程列表：
pm2 start list
查看進(jìn)程詳情
pm2 show 0
總結(jié)
整個部署過程涉及比較多的知識點(diǎn)，nginx代理，node開發(fā)部署，端口管理等等。在端口占用這個點(diǎn)上卡了一段時間。不過目前只是實(shí)現(xiàn)構(gòu)建部署、訪問。但維護(hù)成本還是比較高，先得從GitHub拉取代碼，本地構(gòu)建。項(xiàng)目完成以后，研究下持續(xù)性集成流程。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
