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！！！，root和alias的区别请自行查询。
• 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