nginx基于location部署多个前端项目

实现在一台服务器上使用nginx部署多个前端项目的方法主要有三种

  • 基于域名配置
  • 基于端口配置
  • 基于location配置
    本文重点讲第三种。

基于location配置

目的

根据url不同,匹配不同的前端项目。比如有两个项目A和B,我们希望访问localhost:8000/projectA来访问项目A,访问localhost:8000projectB来访问项目B。

实现

强调一下,实现以上目的是需要你的项目和nginx的配置同时修改的,这里我以vue项目为例,来演示一遍。

vue.config.js

vue.config.js中的publicPath:设置项目的根路径,用于指定部署时的基础URL。默认情况下,Vue CLI会假设你的应用是被部署在一个域名的根路径上,例如 /。

  • A项目

    module.exports = {
    publicPath: '/projectA/',
    transpileDependencies: true,
    }

  • B项目

    module.exports = {
    publicPath: '/projectB/',
    transpileDependencies: true,
    }

nginx.conf的server节点配置

这里有几个需要强调的地方:

  • nginx安装目录下有一个html文件夹,我们把A、B两个项目打包后文件夹dist放在这个文件夹下并且分别重命名为projectA和projectB;

  • 只有location /下用root, location /projectA location /projectB的配置是用alias!!!,rootalias的区别请自行查询。

  • alias 只能配置在location 中,后面必须要以 "/" 结尾, 否则会查找不到文件, 报404错误; 而 root 对 "/" 可有可无。

  • 如果请求的路径不匹配任何已配置的location块,最后的location /块将会处理这些请求。在这个示例中,它将会服务于默认的前端项目,你可以根据需要进行调整。

  • 路径顺序很重要,Nginx将会使用第一个匹配的location块来处理请求。

    server {
    listen 8000;
    server_name localhost;

    复制代码
         location /projectA{
             alias   html/projectA/;
             index  index.html index.htm;
             try_files $uri $uri/ /index.html;
         }
         location /projectB{
             alias   html/projectB/;
             index  index.html index.htm;
             try_files $uri $uri/ /index.html;
         }
         location / {
             root   html/projectA;
             index  index.html index.htm;
             try_files $uri $uri/ /index.html;
         }
      }
nginx命令
复制代码
启动命令:nginx.exe || start nginx
注:nginx.exe是前台运行,关闭当前命今行窗口时,nginx自动关闭;start nginx是后台运行

停止命令:nginx.exe -s stop   ||  nginx.exe -s quit
注:stop是快速停止nginx,可能并不保存相关信息;quit是完整有序的停止nginx,并保存相关信息。

重新载入nginx:nginx.exe -s reload
相关推荐
源猿人12 分钟前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
红红大虾12 分钟前
Defold引擎中关于CollectionProxy的使用
前端·游戏开发
xw51 小时前
uni-app中v-if使用”异常”
前端·uni-app
!win !1 小时前
uni-app中v-if使用”异常”
前端·uni-app
IT_陈寒2 小时前
Java 性能优化:5个被低估的JVM参数让你的应用吞吐量提升50%
前端·人工智能·后端
南囝coding2 小时前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖2 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花2 小时前
i18n国际语言化配置
前端
编程贝多芬3 小时前
Promise 的场景和最佳实践
前端·javascript