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
相关推荐
sorryhc1 分钟前
【AI解读源码系列】ant design mobile——CapsuleTabs胶囊选项卡
前端·javascript·react.js
狗头大军之江苏分军6 分钟前
频繁跳槽和稳定工作有什么区别?真的比稳定工作的人差吗?
前端·后端
木子雨廷9 分钟前
Flutter 局部刷新小组件汇总
前端·flutter
用户527096487449014 分钟前
组件库按需引入改造
前端
CryptoRzz25 分钟前
使用Java对接印度股票市场API开发指南
前端·后端
码间舞25 分钟前
道路千万条,安全第一条!要对付XSS等攻击你有什么手段?你知道什么是CSP吗?
前端·后端·安全
狗头大军之江苏分军25 分钟前
第一份工作选错了,会毁掉未来吗?
前端
顾辰逸you27 分钟前
uniapp--HBuilderx编辑器
前端·uni-app
吉星9527ABC31 分钟前
使用烛线图展示二进制01离散量趋势图
前端·echarts·离散量展示·烛线图
狗头大军之江苏分军35 分钟前
“月光族”真的是年轻人的通病吗?
前端