实现在一台服务器上使用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