Vue項目部署（阿里雲+Nginx代理+PM2）

最近部署一個Vue項目到阿里雲ECS上，由於項目涉及一些跨域請求，因此採用了 Nginx代理請求本地的 node服務（利用 pm2作進程管理）。 node服務藉助 axios設置 headers的 referer、 host轉發請求，解決跨域請求問題。

先交代下在阿里雲ECS裏安裝的部署環境：phpstudy（php調試運行大禮包，裏面包含nginx、mysql等，還能監控端口占用狀況）、pm2（node服務進程管理工具）、node、git等等。

部署過程

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能夠設置referer和host，實現代理轉發的功能。

運行prod.server.js

prod.server.js是在根目錄下，因此運行命令以下：

pm2 start prod.server.js

進程列表：

pm2 start list

查看進程詳情

pm2 show 0

總結

整個部署過程涉及比較多的知識點，nginx代理，node開發部署，端口管理等等。在端口占用這個點上卡了一段時間。不過目前只是實現構建部署、訪問。但維護成本仍是比較高，先得從GitHub拉取代碼，本地構建。項目完成之後，研究下持續性集成流程。