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
相关推荐
代码的余温13 小时前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端
一涯13 小时前
日常小常识记录
前端
那一抹阳光多灿烂13 小时前
CSS 编码规范
前端·css
degree52013 小时前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
૮・ﻌ・13 小时前
CSS高级技巧---精灵图、字体图标、布局技巧
前端·css
昔人'13 小时前
纯`css`固定标题并在滚动时为其添加动画
前端·css
超人不会飛13 小时前
Vue markdown组件 | 流式 | 大模型应用
前端·javascript·github
小白640213 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·css·html
怪可爱的地球人13 小时前
vue3小白入门
前端
掘金安东尼13 小时前
bun install:安装过程的幕后揭秘
前端·github·bun