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

Drinkey 發布于2019-07-25 14:42 / 1233人閱讀

摘要：最近部署一個項目到阿里云上，因為項目涉及一些跨域請求，所以采用了代理請求本地的服務利用做進程管理。先交代下在阿里云里安裝的部署環境調試運行大禮包，里面包含等，還能監控端口占用情況服務進程管理工具等等。不過目前只是實現構建部署訪問。

最近部署一個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 + "
")
})

這里只是簡單的借助axios可以設置referer和host，實現代理轉發的功能。

運行prod.server.js

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

pm2 start prod.server.js

進程列表：

pm2 start list

查看進程詳情

pm2 show 0

總結

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

GPU云服務器云服務器騰訊云服務器部署vue項目阿里云輕應用服務器部署vue 阿里云服務器搭建vue項目阿里云部署django項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/40400.html

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

摘要：比如暴露端口，選擇，授權對象填，其他默認就可以了。開啟性能平臺，點擊創建新應用按照操作提示來就行，成功開啟后在項目配置具體配置看下文就可以監控數據了。建議不熟悉 linux 命令的小伙伴同時打開我的另一篇博客linux 常用操作服務器購買&配置打開阿里云，選擇購買云服務器 ECS，這里可以選擇一鍵購買進行快速配置,操作系統選擇 CentOS 7.2 64 位，其他默認或根據實...

wushuiyong 2019-07-25 14:33 評論0 收藏0
前端+node.js(vue+express)部署到阿里云

摘要：部署到阿里云使用的阿里云服務器一，登錄對應的服務器二，在服務器進行對應的初始化初始化數據庫直接執行初始化命令，會彈出交互配置信息初次進入密碼為空，直接回車輸入要為用戶設置的數據庫密碼。 vue+express部署到阿里云使用的阿里云服務器CentOS 7.3 一，登錄對應的服務器 showImg(https://segmentfault.com/img/bVbuwWc); 二，在服務...

mtunique 2019-08-23 18:26 評論0 收藏0
服務器小白的我,是如何成功將 node+mongodb 項目部署在服務器上并進行性能優化的

摘要：前言本文講解的是做為前端開發人員，對服務器的了解還是小白的我，是如何一步步將項目部署在阿里云的服務器上，并進行性能優化，達到頁面秒內看到，秒內看到首屏內容的。搭建的項目是采用了主流的前后端分離思想的，這里只講服務器環境搭建與性能優化。 showImg(https://segmentfault.com/img/remote/1460000017143281); 前言本文講解的是：做為前...

zsy888 2019-06-26 17:54 評論0 收藏0
Nuxt SSR 阿里云部署之nginx代理--詳解篇

摘要：前言由于很多小伙伴私信我，關于阿里云部署應用的問題，在這里具體詳細的介紹一下我的服務器版本是所需工具有遠程倉庫的就不需要直接推到你的服務器步驟安裝配置配置啟動一安裝配置安裝點擊地址二安裝點擊地址安裝完畢設置密碼導入你的文件三配置下載包，將前言：由于很多小伙伴私信我，關于阿里云部署NUXT 應用的問題，在這里具體詳細的介紹一下我的服務器版本是CentOS7～所需工具： Xftp5 ...

ddongjian0000 2019-08-30 13:48 評論0 收藏0
Nuxt SSR 阿里云部署之nginx代理--詳解篇

摘要：前言由于很多小伙伴私信我，關于阿里云部署應用的問題，在這里具體詳細的介紹一下我的服務器版本是所需工具有遠程倉庫的就不需要直接推到你的服務器步驟安裝配置配置啟動一安裝配置安裝點擊地址二安裝點擊地址安裝完畢設置密碼導入你的文件三配置下載包，將前言：由于很多小伙伴私信我，關于阿里云部署NUXT 應用的問題，在這里具體詳細的介紹一下我的服務器版本是CentOS7～所需工具： Xftp5 ...

imingyu 2019-08-21 17:11 評論0 收藏0