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实现限制某IP短时间访问次数
Mar 31 Servers
总结高并发下Nginx性能如何优化
Nov 01 Servers
nginx实现动静分离的方法示例
Nov 07 Servers
为Centos安装指定版本的Docker
Apr 01 Servers
Nginx配置根据url参数重定向
Apr 11 Servers
Nginx 匹配方式
May 15 Servers
docker 制作mysql镜像并自动安装
May 20 Servers
linux目录管理方法介绍
Jun 01 Servers
openEuler 搭建java开发环境的详细过程
Jun 10 Servers
Windows10安装Apache2.4的方法步骤
Jun 25 Servers
解决Git推送错误non-fast-forward的方法
Jun 25 Servers
vscode内网访问服务器的方法
Jun 28 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP图片上传代码
2013/11/04 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
自荐信结尾
2013/10/27 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
师范生自我鉴定
2014/03/20 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
2014年卫生工作总结
2014/11/27 职场文书
董事会决议范本
2015/07/01 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android