Vue项目部署的实现(阿里云+Nginx代理+PM2)


Posted in Javascript onMarch 26, 2019

最近部署一个Vue项目到阿里云ECS上,因为项目涉及一些跨域请求,所以采用了Nginx代理请求本地的node服务(利用pm2做进程管理)。node服务借助axios设置headersrefererhost转发请求,解决跨域请求问题。

先交代下在阿里云ECS里安装的部署环境:phpstudy(php调试运行大礼包,里面包含nginx、mysql等,还能监控端口占用情况)、pm2(node服务进程管理工具)、nodegit等等。

部署过程

  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配置入口

Vue项目部署的实现(阿里云+Nginx代理+PM2)

修改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也提供了工具。

Vue项目部署的实现(阿里云+Nginx代理+PM2)

启动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可以设置refererhost,实现代理转发的功能。

运行prod.server.js

prod.server.js是在根目录下,所以运行命令如下:

pm2 start prod.server.js

Vue项目部署的实现(阿里云+Nginx代理+PM2)

进程列表:

pm2 start list

Vue项目部署的实现(阿里云+Nginx代理+PM2)

查看进程详情

pm2 show 0

Vue项目部署的实现(阿里云+Nginx代理+PM2)

总结

整个部署过程涉及比较多的知识点,nginx代理node开发部署端口管理等等。在端口占用这个点上卡了一段时间。不过目前只是实现构建部署、访问。但维护成本还是比较高,先得从GitHub拉取代码,本地构建。项目完成以后,研究下持续性集成流程。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
监听element-ui table滚动事件的方法
Mar 26 #Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 #Javascript
node之本地服务器图片上传的方法示例
Mar 26 #Javascript
详解vue-element Tree树形控件填坑路
Mar 26 #Javascript
vue-router 起步步骤详解
Mar 26 #Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 #Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 #Javascript
You might like
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
详解PHP中的Traits
2015/07/29 PHP
php 浮点数比较方法详解
2017/05/05 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
python del()函数用法
2013/03/24 Python
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
python 文件转成16进制数组的实例
2018/07/09 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Python hmac模块使用实例解析
2019/12/24 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
大学毕业后的十年规划
2014/01/07 职场文书
市场拓展计划书
2014/05/03 职场文书
党支部先进事迹材料
2014/12/24 职场文书
稽核岗位职责
2015/02/10 职场文书
毕业设计工作总结
2015/08/14 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL