Vue項(xiàng)目部署（阿里云+Nginx代理+PM2）

Drinkey 發(fā)布于2019-07-25 14:42 / 1237人閱讀

摘要：最近部署一個(gè)項(xiàng)目到阿里云上，因?yàn)轫?xiàng)目涉及一些跨域請(qǐng)求，所以采用了代理請(qǐng)求本地的服務(wù)利用做進(jìn)程管理。先交代下在阿里云里安裝的部署環(huán)境調(diào)試運(yùn)行大禮包，里面包含等，還能監(jiān)控端口占用情況服務(wù)進(jìn)程管理工具等等。不過目前只是實(shí)現(xiàn)構(gòu)建部署訪問。

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

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

部署過程

拉去GitHub項(xiàng)目代碼至root目錄下（找到安裝phpstudy的WWW目錄），構(gòu)建項(xiàng)目

修改nginx-conf的代理配置、root項(xiàng)配置（指向項(xiàng)目項(xiàng)目的dist目錄下）

啟動(dòng)pm2（項(xiàng)目中，事先已寫好服務(wù)端邏輯prod.server.js）

啟動(dòng)phpstudy

訪問項(xiàng)目

構(gòu)建項(xiàng)目

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

build: {
    port: 9001, // 因?yàn)槲沂怯肞HPStudy做web服務(wù)器的，此時(shí)php.cgi會(huì)占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è)置代理端口時(shí)，避免端口占用！！

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

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

啟動(dòng)pm2

關(guān)于pm2的介紹、常規(guī)使用自行了解。在項(xiàng)目目錄下事先已經(jīng)寫好了轉(zhuǎn)發(fā)請(qǐng)求的邏輯。

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 + "
")
})

這里只是簡(jiǎ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é)

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

GPU云服務(wù)器云服務(wù)器騰訊云服務(wù)器部署vue項(xiàng)目阿里云輕應(yīng)用服務(wù)器部署vue 阿里云服務(wù)器搭建vue項(xiàng)目阿里云部署django項(xiàng)目

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/40400.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Drinkey

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

??蘇州程序大白一文從基礎(chǔ)手把手教你Python數(shù)據(jù)可視化大佬??《??記得收藏??》

閱讀 1867·2021-10-09 09:44
開源協(xié)議思維導(dǎo)圖

閱讀 3395·2021-09-28 09:35
EskyFun數(shù)據(jù)泄露，超過100萬Android玩家受到影響

閱讀 1386·2021-09-01 10:31
flex布局

閱讀 1676·2019-08-30 15:55
相鄰兄弟選擇器（+）、子選擇器（>）、兄弟選擇器（~）等用法

閱讀 2719·2019-08-30 15:54
原型模式故事鏈(5)--JS變量作用域、作用域鏈、閉包

閱讀 941·2019-08-29 17:07
響應(yīng)式布局設(shè)計(jì)

閱讀 1388·2019-08-29 15:04
自適應(yīng)布局

閱讀 2013·2019-08-26 13:56

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Vue項(xiàng)目部署（阿里云+Nginx代理+PM2）

相關(guān)文章

**服務(wù)器部署前端&node項(xiàng)目(包括阿里云服務(wù)器、nginx以及mongoDB 的配置)**

**前端+node.js(vue+express)部署到阿里云**

**服務(wù)器小白的我,是如何成功將 node+mongodb 項(xiàng)目部署在服務(wù)器上并進(jìn)行性能優(yōu)化的**

**Nuxt SSR 阿里云部署之nginx代理--詳解篇**

**Nuxt SSR 阿里云部署之nginx代理--詳解篇**

發(fā)表評(píng)論

0條評(píng)論

Drinkey

男|高級(jí)講師

TA的文章

??蘇州程序大白一文從基礎(chǔ)手把手教你Python數(shù)據(jù)可視化大佬??《??記得收藏??》

開源協(xié)議思維導(dǎo)圖

EskyFun數(shù)據(jù)泄露，超過100萬Android玩家受到影響

flex布局

相鄰兄弟選擇器（+）、子選擇器（>）、兄弟選擇器（~）等用法

原型模式故事鏈(5)--JS變量作用域、作用域鏈、閉包

響應(yīng)式布局設(shè)計(jì)

自適應(yīng)布局

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Vue項(xiàng)目部署（阿里云+Nginx代理+PM2）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！