如何在nginx同一端口下部署多个vue项目

时间 2020-06-15

标签如何 nginx 同一端口部署多个 vue 项目栏目 Nginx 繁體版

原文原文链接

本文已在个人公众号上发布，更多原创技术文章，请关注个人公众号“字节逆旅”html

如题，项目部署咱们都经历过，这个过程也是十面埋坑。其实部署vue应用比较简单了如今，特别是cli3出来后，比之前要容易多了。这里记录一次在nginx同一端口下部署多个vue应用的过程。nginx用来作代理很好用，能够解决跨域问题。前端

那么，如何在一个端口号下部署多个应用呢？这个需求有什么用？好比你的一个服务器上部署了不少应用，各个项目的，每一个都占用一个端口，那可能如今还要映射到外网去，方便给客户演示。这个资源老是有限的，因此若是能省一个端口最好就省一个。特别是像一个项目里有多个子系统，各系统又是独立开发的，这种状况就更有必要了。vue

开发及部署环境

工具包括vue+vuecli3+nginxnginx

部署步骤

1、前端配置

其实这个顺序应该是从nginx讲起，若是没经验的能够先看第二步nginx配置web

前端配置其实就是为了约定一个路由，这样在nginx配置好了以后能够访问到本身的资源。vuex

能够这么想，本来我一个端口下只有一个项目，那个人资源就跟我开发时同样就好了，随便访问。如今这个端口下多了一个项目，那我访问资源时是否是得区别标记一下，这个区分要先后端约定好才行。后端

vue的前端路由其实就是在前端匹配url地址变化来找到想要的页面，那咱们如今要在服务器上加上一个项目，咱们把新项目的url进行一些特定配置就行了。所谓配置，就是加一个url路径'/newProject/'(你本身定义）就能够了。api

一、静态资源地址配置

这里要分vuecli2和vuecli3两种环境，只讲vuecli3的，与vuecli2不一样的地方我提下位置你就能够本身找了。跨域

在vue.config.js文件下找到publicPath配置，添加以下配置（vuecli2就是config文件夹下的assetsPublicPath配置）服务器

process.env.NODE_ENV === 'production' ? '/newProject/' : '/',
复制代码

这个配置在官方文档上有说明，就是要注意区分开发环境与生产部署环境。生产环境上咱们跑起项目时是不须要在url上加上这个newProject的，加上这个，是由于后面部署的时候nginx会根据这个来区分不一样的项目。

二、在模板文件下添加base

在部署环境下， a、img、link、form这些标签要找到对应资源，也要先匹配nginx环境，因此要在head节点下加上base配置。

<meta base=/newProject/ >
复制代码

base标签为页面上的全部连接规定默认地址或默认目标。

打包以后，你的html页面看起来就是这样：

<!DOCTYPE html>
<html>  <head>  <script src="/newProject/js/runtime~index.0604ac2d.js"></script>  <meta charset="utf-8">  <meta base="/newProject/">  <meta http-equiv="X-UA-Compatible" content="IE=edge,edge">  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">  <link rel="icon" href="/newProject/images/favicon.ico">  <script src="/newProject/xxx.js"></script>  <title></title> </head> 复制代码

三、将'/newProject/'应用到vue项目路由中

这一步就是将vue项目中的页面路由切换加上这个添加的url路径，在router的初始化步骤下添加：

const router = new VueRouter({
 mode: 'history',  base: process.env.NODE_ENV === 'production' ? '/newProject/index/' : '/index/',  routes }) 复制代码

若是你的项目单页面服务在/index/下，通常默认状况下vuex的基路径base配置默认是'/index/'。这里的配置一样是根据环境来区分，部署环境一样要加上'/newProject'。

2、nginx配置

这个没写步骤，直接看完整配置吧。'location /' 和'location /newProject'这两块就是我说的两个应用，大概意思就是这两个应用要共用20000这个端口（'location ^~ /api/ '这个是接口api映射配置点，本文不讨论，你能够忽略）。

server {
 listen 20000;  server_name localhost;   # root D:/deploy/web  location ^~ /api/ {  proxy_pass http://ip:端口/;  }   location / {  root D:/deploy/web/a;  try_files $uri $uri/ @router;  index index.html;  }   location /newProject {  alias D:/deploy/web/newProject;  try_files $uri $uri/ /newProject/index.html;  index index.html;  }  location @router {  rewrite ^.*$ /index.html last;  }  } 复制代码

配置基本就是这样，能够结合本身项目参考下，直接copy修改下就行。

我简单介绍下要点：

a、D:/deploy/web下的a、newProject项目分别在不一样的文件夹里，它们所在位置不重要，重要的是nginx能够找到而且发布出来。

b、a文件夹的地址前缀是root，newProject文件夹的地址前缀是alias。

c、try_files后面的内容也不同，本身注意看，我不细说了。

下面我讲一下nginx配置基础知识。

敲黑板，划重点

一、root、alias

root与alias主要做用就是解释location后面的uri，root意思就是根据root路径+locationn路径找到资源；alias意思就是用alias路径替换对应的location路径内容。

二、try_files uri uri/

可能不懂nginx的人有点懵，有人会问try_files uri uri/ @router; 这句话是什么意思？我简单解释下：

try_files字面意思就是尝试文件，再结合语境就是“尝试读取文件”，这里就是要读取静态文件

$uri 这个是nginx的一个变量，存放着用户访问的地址,

好比：http://www.aa.com/index.html, 那么$uri就是 /index.html

uri/就是 /nginx/test/

完整的解释就是：try_files 去尝试到网站目录读取用户访问的文件，若是第一个变量存在，就直接返回当前值；若是第一个不存在继续读取第二个变量，若是存在，返回当前值；若是不存在就跳转到第三个参数上。

如今来看看第三个参数：@router，这个参数叫location，配置的是rewrite，重写规则。好比上面的rewrite ^.*$ /index.html last; ，这句意思就是一个重定向。好比你是这个地址http://www.baidu.com/xxx.html，它会跳转到http://www.baidu.com/index.html/xxx.html

好了，在nginx下配置多个vue项目已经讲完了，但愿对你有用，也能够点个在看，帮助更多人。

本文发表在个人公众号字节逆旅，若是对大前端技术感兴趣，欢迎扫码关注

本文使用 mdnice 排版