nginx部署多前端项目的几种方法


Posted in Servers onMay 25, 2021

个人总结了3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法。

  • 基于域名配置
  • 基于端口配置
  • 基于location配置

在正式开始之前,我们先来看一下nginx安装的默认配置文件: /etc/nginx/nginx.conf 文件

nginx部署多前端项目的几种方法

可以看到图中的: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

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

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

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

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,而且配置远不如第一种简单,所以不推荐。

基于location配置

配置文件如下:

配置 a.fly.com 的配置文件:

vim /usr/nginx/modules/ab.conf

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部署多前端项目的几种方法的文章就介绍到这了,更多相关nginx部署多前端项目内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Servers 相关文章推荐
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
Jun 21 Servers
nginx常用命令放入shell脚本详解
Mar 31 Servers
Linux安装apache服务器的配置过程
Nov 27 Servers
NGINX 权限控制文件预览和下载的实现原理
Jan 18 Servers
Nginx设置HTTPS的方法步骤 443证书配置方法
Mar 21 Servers
阿里云日志过滤器配置日志服务
Apr 09 Servers
Nginx配置根据url参数重定向
Apr 11 Servers
微信告警的zabbix监控系统 监控整个NGINX集群
Apr 18 Servers
zabbix配置nginx监控的实现
May 25 Servers
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
May 25 Servers
Linux服务器离线安装 nginx的详细步骤
Jun 16 Servers
Linux安装Docker详细教程
Jul 07 Servers
Nginx如何配置Http、Https、WS、WSS的方法步骤
May 11 #Servers
windows下快速安装nginx并配置开机自启动的方法
uwsgi+nginx代理Django无法访问静态资源的解决
May 10 #Servers
教你快速开启Apache SkyWalking的自监控
Apache Calcite 实现方言转换的代码
Apr 24 #Servers
apache基于端口创建虚拟主机的示例
Apr 24 #Servers
Nginx进程管理和重载原理详解
You might like
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
PHP可变函数学习小结
2015/11/29 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
如何手写一个简易的 Vuex
2020/10/10 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
python写的一个文本编辑器
2014/01/23 Python
Python入门_条件控制(详解)
2017/05/16 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
django的ORM操作 增加和查询
2019/07/26 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
python常用数据重复项处理方法
2019/11/22 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
python源文件的字符编码知识点详解
2021/03/04 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
法学函授自我鉴定
2014/02/06 职场文书
安全员岗位职责范本
2015/04/11 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
php解析非标准json、非规范json的方式实例
2022/05/10 PHP
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers