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实现发布静态资源的方法
Mar 31 Servers
nginx对http请求处理的各个阶段详析
Mar 31 Servers
Nginx的反向代理实例详解
Mar 31 Servers
Nginx配置80端口访问8080及项目名地址方法解析
Mar 31 Servers
使用nginx配置访问wgcloud的方法
Jun 26 Servers
Nginx配置https的实现
Nov 27 Servers
nginx.conf配置文件结构小结
Apr 08 Servers
tomcat下部署jenkins的方法
May 06 Servers
nginx lua 操作 mysql
May 15 Servers
openEuler 搭建java开发环境的详细过程
Jun 10 Servers
腾讯云服务器部署前后分离项目之前端部署
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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Python 私有化操作实例分析
2019/11/21 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
Python用Jira库来操作Jira
2020/12/28 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
机械专业求职信
2014/05/25 职场文书
统计专业自荐书
2014/07/06 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
计算机教师工作总结
2015/08/13 职场文书
《梅花魂》教学反思
2016/02/18 职场文书