快捷導(dǎo)航

Vue項目部署的實現(xiàn)（阿里云+Nginx代理+PM2）

更新時間：2019年03月26日 14:51:39 作者：Clearlove

這篇文章主要介紹了Vue項目部署的實現(xiàn)（阿里云+Nginx代理+PM2），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近部署一個Vue項目到阿里云ECS上，因為項目涉及一些跨域請求，所以采用了Nginx代理請求本地的node服務(wù)（利用pm2做進程管理）。node服務(wù)借助axios設(shè)置headers的referer、host轉(zhuǎn)發(fā)請求，解決跨域請求問題。

先交代下在阿里云ECS里安裝的部署環(huán)境：phpstudy（php調(diào)試運行大禮包，里面包含nginx、mysql等，還能監(jiān)控端口占用情況）、pm2（node服務(wù)進程管理工具）、node、git等等。

部署過程

拉去GitHub項目代碼至root目錄下（找到安裝phpstudy的WWW目錄），構(gòu)建項目
修改nginx-conf的代理配置、root項配置（指向項目項目的dist目錄下）
啟動pm2（項目中，事先已寫好服務(wù)端邏輯prod.server.js）
啟動phpstudy
訪問項目

構(gòu)建項目

構(gòu)建項目前，要修改項目confing目錄下的index.js,主要是build部分的端口、目錄，具體如下：

build: {
  port: 9001, // 因為我是用PHPStudy做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，可以很方便的進行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; 
   
 }
}

注意事項

root配置，指向構(gòu)建后目錄

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

設(shè)置代理端口時，避免端口占用??！

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

開始部署時，使用的是9000端口，一直運行不起來，后面發(fā)現(xiàn)phpstudy啟動是php-cgi.exe默認(rèn)就使用了9000端口。關(guān)于端口使用情況，phpstudy也提供了工具。

啟動pm2

關(guān)于pm2的介紹、常規(guī)使用自行了解。在項目目錄下事先已經(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，實現(xiàn)代理轉(zhuǎn)發(fā)的功能。

運行prod.server.js

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

pm2 start prod.server.js

進程列表：

pm2 start list

查看進程詳情

pm2 show 0

總結(jié)

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: