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
相关推荐
七灵微31 分钟前
【后端】单点登录
服务器·前端
weixin_307779133 小时前
Clickhouse统计指定表中各字段的空值、空字符串或零值比例
运维·数据仓库·clickhouse
bubiyoushang8883 小时前
Windows11 WSL2 Ubuntu编译安装perf工具
linux·运维·ubuntu
持久的棒棒君4 小时前
npm安装electron下载太慢,导致报错
前端·electron·npm
xuanwojiuxin5 小时前
linux panic-propagation
linux·运维·服务器
crary,记忆6 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz7 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
藥瓿亭7 小时前
K8S认证|CKS题库+答案| 9. 网络策略 NetworkPolicy
linux·运维·docker·云原生·容器·kubernetes·cks
SamHou07 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干7 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript