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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
javascript Keycode对照表
Oct 24 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
javascript实现贪吃蛇小游戏
Jul 28 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
SSI指令
2006/11/25 PHP
php 404错误页面实现代码
2009/06/22 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
JavaScript中实现Map的示例代码
2015/09/09 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
JS实现留言板功能
2017/06/17 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
零基础写python爬虫之神器正则表达式
2014/11/06 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
Python之列表实现栈的工作功能
2019/01/28 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
消防安全员岗位职责
2014/03/10 职场文书
个人简历自荐信
2014/06/26 职场文书
2014年工会工作总结
2014/11/12 职场文书
护理自荐信
2019/05/14 职场文书