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

Drinkey 发布于2019-07-25 14:42 / 1223人阅读

摘要：最近部署一个项目到阿里云上，因为项目涉及一些跨域请求，所以采用了代理请求本地的服务利用做进程管理。先交代下在阿里云里安装的部署环境调试运行大礼包，里面包含等，还能监控端口占用情况服务进程管理工具等等。不过目前只是实现构建部署访问。

最近部署一个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项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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