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

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

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

部署过程

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

修改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 + '\n')
})

这里只是简单的借助axios可以设置referer和host，实现代理转发的功能。

运行prod.server.js

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

pm2 start prod.server.js

进程列表：

pm2 start list

查看进程详情

pm2 show 0

总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js项目nginx部署教程

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构建. 开发环境搭建完成. 二.编译部署 1.项目路径下demo输入命令npm run build 编译完成后会发现在demo文件夹下多出一个dist文件夹这里面就是编译好的文件了. 2.网上下载nginx,下载地址http://nginx.org/en/download.html,解压下载的ngin

  • Vue 项目部署到服务器的问题解决方法

    Vue 项目部署到服务器的问题解决方法

    相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入到生产环境,编译打包后,放入服务器,项目就不正常了,会出现空白页或者路由跳转404等问题.遇到这些问题不要慌张,正确的配置加上后端的简单配合就可以解决. 如何打包 基于Vue-Cli,通过npm run build来进行打包的操作 如何部署 将打包出来的资源,基于Vue-Cli的一般是dist目录下有static目录和index.html文件,可以直接将这两个文件扔到服务端 但有时候,我们会直接将d

  • vue项目部署到Apache服务器中遇到的问题解决

    最近刚重构完,我们的一个项目,由原来的jsp模式改为了前后端分离,前端选型为vue,开发完成之后第一件时间就是要部署测试,服务端选的是Apache.本来以为很简单的一件事情,几经坎坷部署了两天才算能够正常访问了.先记录如下, 过程搭建Apache环境,vue项目build之后把生成的dist文件放到,Apache下面,启动Apache之后本以为能够正常访问了, 前提说下:vue项目路由model:history ,默认不会出现下面的问题,因为个人感觉项目路径中带个#实在难受 但是发现错误如下:

  • Vue.js项目部署到服务器的详细步骤

    Vue.js项目部署到服务器的详细步骤

    前言 最近做完了一个项目,Vue.js 2.0 + vuex + axios,还是有点大的.想着做了这么久,放服务器给朋友们体验一下,帮忙找找BUG,于是就有了研究服务器这一篇文章了. 准备工作 服务器 既然是部署到服务器,肯定是需要一个云的.我这里找基友拿的一个,做测试的话,可以买阿里云的学生机,9.9 一个月,不过不是学生的话就比较麻烦,因为涉及敏感操作都需要验证码. 编译打包 将项目打包成 dist 文件,这里我需要跨域请求一些数据,还写了一个小型服务器, app.js 放到 dist 文

  • 解决vue项目nginx部署到非根目录下刷新空白的问题

    1.修改config/index.js 2.修改路由route/index 3.后台配置nginx 以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue-cli3 项目从搭建优化到docker部署的方法

    1. 创建一个vue项目 相信大部分人都已经知道怎么创建项目的,可以跳过这一节,看下一节. 1.1 安装@vue/cli # 全局安装 vue-cli脚手架 npm install -g @vue/cli 等待安装完成后开始下一步 1.2 初始化项目 vue create vue-cli3-project (1)选择一个预设 可以选择默认预设,默认预设包含了 babel , eslint 我们选择更多功能 Manually select features 回车后来到选择插件 (2)插件选择 这边

  • Vue项目部署的实现（阿里云+Nginx代理+PM2）

    最近部署一个Vue项目到阿里云ECS上,因为项目涉及一些跨域请求,所以采用了Nginx代理请求本地的node服务(利用pm2做进程管理).node服务借助axios设置headers的referer.host转发请求,解决跨域请求问题. 先交代下在阿里云ECS里安装的部署环境:phpstudy(php调试运行大礼包,里面包含nginx.mysql等,还能监控端口占用情况).pm2(node服务进程管理工具).node.git等等. 部署过程 拉去GitHub项目代码至root目录下(找到安装ph

  • django项目、vue项目部署云服务器的详细过程

    django项目、vue项目部署云服务器的详细过程

    目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目部署 django项目部署 项目依赖安装 数据库配置 使用uwsgi启动django 后端样式处理 上线架构图 服务器购买与远程连接 服务器可以在阿里云控制台首页 (aliyun.com).登录 - 腾讯云 (tencent.com)购买. 这里我选择购买阿里云的云服务器ECS,购买时按自己需求,镜

  • vue项目部署到nginx/tomcat服务器的实现

    开发完的vue项目,需要部署到Nginx/Tomcat服务器上运行,作为一个前端小白,刚接触vue不久,研究了一番,于是写下这篇文章,记录下来便于今后部署. 1.router(history)模式vue项目部署到nginx 1)修改router模式为history(默认为hash) const router = new VueRouter({ routes, mode: 'history' }); 对路由模式不清楚的小伙伴,可以看这篇vue-router路由模式详解 2)修改config/ind

  • 阿里云Nginx配置https实现域名访问项目(图文教程)

    第一步:签署第三方可信任的 SSL 证书 证书可以直接在阿里云里面申请免费的ssl证书 登录阿里云账号,在上方搜索栏内搜索ssl,点击ssl证书(应用安全) 来到这个页面后点击购买证书 如图选择免费版ssl证书,点击支付 支付完成后跳转到控制台首页,点击证书申请 填写完证书申请表单之后点击下一步 点击验证显示验证成功后再提交审核 审核通过后点击下载按钮 选择nginx旁边的下载 下载解压后得到一个.key和.pem文件,到这里,我们的证书申请工作已经做完了,下面可以开始配置https了 第二步:

  • 部署Django到阿里云服务器教程示例

    基于Ubuntu16.04 + Python3 + nginx + mysql + Django 接下来先安装这些必要的环境,这些操作都是在你已经购买了阿里云服务器.并且在本地你已经搭建好了Django博客.现在我们所做的就是把本地的环境在阿里云的服务器上重新搭一遍. 这里先简单的说一下阿里云服务器,我自己买的是云服务器ESC,需要配置一下安全组规则,就是端口,按下图配置即可,最重要的是22和88端口. 然后就是我们的服务器在实例里,我的是Ubuntu16.04,要部署到阿里云上点击远程连接,第

  • vue项目部署上线遇到的问题及解决方法

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器.买了一个域名.没有备案的域名也可以使用.买完服务器进行域名解析. 点击添加解析,按照下面这样填写就行 马赛克是你的外网ip 可以根据你需要的进行修改,我这只是最基本的绑定.其他请自行百度. 3.添加ssh密钥 第一步添加密钥,会

  • vue项目,代码提交至码云,iconfont的用法说明

    一.前期准备 首先得有一个码云账号,账号名最好是英文,用于线上仓库 其次下载一个git到电脑,因为很多git命令,cmd命令行识别不了 最好再有一个Iconfont账号,很多前端用到的图标就不用再自己画了,直接添加到项目下载下来就可以用了 还需要用到的有node 二.建立项目 1.首先在码云上新建一个私有的项目(如果项目是共有的,那么所有人都能看见,一般设为私有,然后将项目组的人拉进来就可以了),使用READERME文件初始化这个项目,语言选择javascript,克隆到本地 其中需要完成线上仓

  • SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解

    前言 给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的,我用的 Linux 发行版是 CentOS7.5 有了一个基于 ElementUI 的电商后台管理系统,在开发一个相似的后台就会轻松很多.不过前面的系统的后端是使用 node 完成的,对于我们 Java 开发者来说,用不到.我学习的是 ElementUI 的使用,就足够了,然后后端服务就全部可以自己使用 SpringBoot 来完成 最近貌似 Vue3 正式版也发布了,正好有空看可以去看一看 提示:以下是本篇

  • 多个Vue项目部署到服务器的步骤记录

    一.业务描述: 最近在做一个电商的项目,里面有平台端和商家端以及用户端,那么这么多Vue项目如何部署到服务器呢? 二.部署 (1)首先在本地测试项目可以启动并且能正常运行. (2)在项目中输入npm run build 此时会生成一个文件 (3)在服务器上安装Nginx,并将admin-web上传到服务器. 我上传的位置: (4)修改Nginx文件,找到nginx.conf  三.如果此时有多个vue项目呢? 多加几个location即可 四.最后记得保存 :wq 五.重新启动Nginx sys

  • Docker镜像的制作,上传,拉取和部署操作(利用阿里云)

    由于学习过程中发现push镜像的时候一直超时,所以直接把阿里云的Docker仓库申请一个(管理中心–>创建镜像仓库–>我的是华东2绑定github账户即可),搞定!以后push就用这个仓库,pull的时候使用加速器,注意切换根据使用场景进行切换,dockerhub丢弃--记录了一下操作流程: 1.创建命名空间hhu(以当前学校为单位,只能小写,每个账号只能创建5个),创建菜鸟Docker镜像仓库docker1(绑定github中某个仓库,个人可以随意,这个仓库镜像就像是一个app,可以不断的更

随机推荐