H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

本文已在我的公众号上发布,更多原创技术文章,请关注我的公众号“字节逆旅”

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

那么,如何在一个端口号下部署多个应用呢?这个需求有什么用?比如你的一个服务器上部署了很多应用,各个项目的,每个都占用一个端口,那可能现在还要映射到外网去,方便给客户演示。这个资源总是有限的,所以如果能省一个端口最好就省一个。特别是像一个项目里有多个子系统,各系统又是独立开发的,这种情况就更有必要了。

开发及部署环境

工具包括vue+vuecli3+nginx

部署步骤

一、前端配置

其实这个顺序应该是从nginx讲起,如果没经验的可以先看第二步nginx配置

前端配置其实就是为了约定一个路由,这样在nginx配置好了之后可以访问到自己的资源。

可以这么想,原本我一个端口下只有一个项目,那我的资源就跟我开发时一样就行了,随便访问。现在这个端口下多了一个项目,那我访问资源时是不是得区别标记一下,这个区分要前后端约定好才行。

vue的前端路由其实就是在前端匹配url地址变化来找到想要的页面,那我们现在要在服务器上加上一个项目,我们把新项目的url进行一些特定配置就好了。所谓配置,就是加一个url路径’/newProject/'(你自己定义)就可以了。

1、静态资源地址配置

这里要分vuecli2和vuecli3两种环境,只讲vuecli3的,与vuecli2不同的地方我提下位置你就可以自己找了。

在vue.config.js文件下找到publicPath配置,添加如下配置(vuecli2就是config文件夹下的assetsPublicPath配置)

process.env.NODE_ENV === 'production' ? '/newProject/' : '/',
 

这个配置在官方文档上有说明,就是要注意区分开发环境与生产部署环境。生产环境上我们跑起项目时是不需要在url上加上这个newProject的,加上这个,是因为后面部署的时候nginx会根据这个来区分不同的项目。

2、在模板文件下添加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>
 
3、将’/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’。

二、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配置基础知识。

敲黑板,划重点

1、root、alias

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

2、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 排版

本文地址:H5W3 » 如何在nginx同一端口下部署多个vue项目

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址