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快速入门教程
Mar 31 Servers
Nginx搭建rtmp直播服务器实现代码
Mar 31 Servers
如何利用map实现Nginx允许多个域名跨域
Mar 31 Servers
Nginx+SpringBoot实现负载均衡的示例
Mar 31 Servers
详解Apache SkyWalking 告警配置指南
Apr 22 Servers
Nginx location 和 proxy_pass路径配置问题小结
Sep 04 Servers
Nginx内网单机反向代理的实现
Nov 07 Servers
nginx 配置缓存
May 11 Servers
nginx lua 操作 mysql
May 15 Servers
shell进度条追踪指令执行时间的场景分析
Jun 16 Servers
Python安装及建立虚拟环境的完整步骤
Jun 25 Servers
nginx sticky实现基于cookie负载均衡示例详解
Dec 24 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中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
php上传文件常见问题总结
2015/02/03 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
2013/12/31 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
用python找出那些被“标记”的照片
2017/04/20 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
大学毕业生个人自荐信范文
2014/01/08 职场文书
防震减灾主题班会
2015/08/14 职场文书
迎国庆主题班会
2015/08/17 职场文书
高中政治教学反思
2016/02/23 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
MySQL中order by的执行过程
2022/06/05 MySQL