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 相关文章推荐
nginx对http请求处理的各个阶段详析
Mar 31 Servers
Nginx+SpringBoot实现负载均衡的示例
Mar 31 Servers
Nginx代理同域名前后端分离项目的完整步骤
Mar 31 Servers
小程序后台PHP版本部署运行 LNMP+WNMP
Apr 01 Servers
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
Jul 07 Servers
Kubernetes部署实例并配置Deployment、网络映射、副本集
Apr 01 Servers
Linux下使用C语言代码搭建一个简单的HTTP服务器
Apr 13 Servers
Tomcat项目启动失败的原因和解决办法
Apr 20 Servers
tomcat默认最大连接数及相关调整方法
May 06 Servers
Nginx 匹配方式
May 15 Servers
Windows Server 2008配置防火墙策略详解
Jun 28 Servers
django项目、vue项目部署云服务器的详细过程
Jul 23 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
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
python with语句的原理与用法详解
2020/03/30 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
入党自我评价范文
2014/02/02 职场文书
三严三实对照检查材料
2014/08/25 职场文书
三严三实对照检查材料
2014/09/22 职场文书
订货会主持词
2015/07/01 职场文书
人民调解协议书
2016/03/21 职场文书