时间:2021-05-27来源:www.pcxitongcheng.com作者:电脑系统城
个人总结了3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法。
在正式开始之前,我们先来看一下nginx安装的默认配置文件: /etc/nginx/nginx.conf 文件
可以看到图中的:include /usr/nginx/modules/*.conf
,这句话的作用就是可以在nginx启动加载所有 /usr/nginx/modules/ 目录下的 *.conf 文件。 所以,平时我们为了方便管理,可以在此目录下面定义自己的 xx.conf 文件即可。但是注意,一定要以.conf 结尾。
介绍完毕,下面我们先来说一下最常用,也是许多公司线上使用的方式。
基于域名配置,前提是先配置好了域名解析。比如说你自己买了一个域名:www.fly.com。 然后你在后台配置了2个它的二级域名: a.fly.com、 b.fly.com。
配置文件如下:
配置 a.fly.com 的配置文件:
vim /usr/nginx/modules/a.conf
1 2 3 4 5 6 7 8 9 |
server { listen 80; server_name a.fly.com; location / { root /data/web-a/dist ; index index.html; } } |
配置 b.fly.com 的配置文件:
vim /usr/nginx/modules/b.conf
1 2 3 4 5 6 7 8 9 |
server { listen 80; server_name b.fly.com; location / { root /data/web-b/dist ; index index.html; } } |
这种方式的好处是,主机只要开放80端口即可。然后访问的话直接访问二级域名就可以访问。
配置文件如下:
配置 a.fly.com 的配置文件:
vim /usr/nginx/modules/a.conf
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
server { listen 8000; location / { root /data/web-a/dist ; index index.html; } } # nginx 80端口配置 (监听a二级域名) server { listen 80; server_name a.fly.com; location / { proxy_pass http: //localhost :8000; #转发 } } |
配置 b.fly.com 的配置文件:
vim /usr/nginx/modules/b.conf
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
server { listen 8001; location / { root /data/web-b/dist ; index index.html; } } # nginx 80端口配置 (监听b二级域名) server { listen 80; server_name b.fly.com; location / { proxy_pass http: //localhost :8001; #转发 } } |
可以看到,这种方式一共启动了4个server,而且配置远不如第一种简单,所以不推荐。
配置文件如下:
配置 a.fly.com 的配置文件:
vim /usr/nginx/modules/ab.conf
1 2 3 4 5 6 7 8 9 10 11 12 13 |
server { listen 80; location / { root /data/web-a/dist ; index index.html; } location /web-b { alias /data/web-b/dist ; index index.html; } } |
注意: 这种方式配置的话,location / 目录是root,其他的要使用alias。
可以看到,这种方式的好处就是我们只有一个server,而且我们也不需要配置二级域名。并且前端项目里要配置二级目录
react 配置请参考:https://blog.csdn.net/mollerlala/article/details/96427751
vue 配置请参考:https://blog.csdn.net/weixin_33868027/article/details/92139392
到此这篇关于nginx部署多前端项目的几种方法的文章就介绍到这了
2023-03-17
Nginx主机域名配置实现2023-03-17
Nginx配置-日志格式配置方式2023-03-17
Apache APISIX Dashboard 未授权访问漏洞分析(CVE-2021-45232)正常项目无法访问(Linux 服务器),启动tomcat时卡在下图位置,项目无法启动。1、先检查tomcat日志、项目日志没有报错信息,且没再产生新的日志信息。2、jdk、tomcat 、 jvm 配置,服...
2023-03-15
这篇文章主要介绍了Kubernetes中Nginx服务启动失败排查流程(Error: ImagePullBackOff),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...
2023-03-15