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
相关推荐
小满zs2 小时前
Zustand 第四章(中间件)
前端·react.js
bruce1282 小时前
应用无法获取用户真实ip问题排查
nginx·kubernetes·ingress
T0uken2 小时前
【Linux】SSH:简单端口转发的跳板机
linux·运维·ssh
GalaxyPokemon3 小时前
LeetCode - 2. 两数相加
java·前端·javascript·算法·leetcode·职场和发展
goodlook01234 小时前
docker 安装运行mysql8.4.4
运维·docker·容器
运维行者_4 小时前
Azure数据库监控:如何在2025年选择合适的工具
运维·服务器·网络·数据库·flask·自动化·azure
dbkx_294 小时前
个人自用debian启动
linux·运维·debian
dualven_in_csdn5 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友6 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程7 小时前
纯前端做图片压缩
开发语言·前端·javascript