linux nginx部署前端项目(nginx部署多前端项目的几种方法)
linux nginx部署前端项目
nginx部署多前端项目的几种方法个人总结了3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法。
- 基于域名配置
- 基于端口配置
- 基于location配置
在正式开始之前,我们先来看一下nginx安装的默认配置文件: /etc/nginx/nginx.conf 文件
可以看到图中的: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部署多前端项目内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- nginx代理docker容器(Docker Nginx容器制作部署实现方法)
- 宝塔nginx装哪个版本(宝塔面板nginx关闭状态,启动不了解决办法)
- nginx对静态文件开启缓存(nginx proxy_cache 缓存配置详解)
- 修改宝塔nginx端口(解决宝塔面板nginx/apache防火墙后无法启动)
- centos7 离线安装nginx(centos8安装nginx1.9.1的详细过程)
- 如何认识服务器(关于Nginx、Apache、Tomcat三个WEB服务器的区别和认知)
- nginx故障处理(详解Nginx启动失败的几种错误处理)
- nginx做图片服务器代理(使用nginx动态转换图片大小生成缩略图)
- linux部署flask项目(用uWSGI和Nginx部署Flask项目的方法示例)
- nginx怎么实现反向代理(nginx反向代理时如何保持长连接)
- nginx配置详解(Nginx进程管理和重载原理详解)
- docker如何访问nginx(基于docker启动nginxssl配置)
- windows下nginx 命令(win10安装配置nginx的过程)
- nginxlocation匹配参数(nginx location优先级的深入讲解)
- nginx查看rewrite日志(Nginx Rewrite使用场景及配置方法解析)
- nginx报错处理(Nginx报504 gateway timeout错误的解决方法)
- 关于队徽 你了解这些么 二(关于队徽你了解这些么)
- 冬天来了手脚冰凉 真不是因为上辈子你是折翼的天使(冬天来了手脚冰凉)
- 0 1 岁婴儿最强作息指南,照着做养出天使宝宝(01岁婴儿最强作息指南)
- 沪上这16所高校 萌新 礼包开箱 哪一款让你心动(沪上这16所高校萌新)
- 她救了被绑架的他,而这一切竟是一场阴谋...(她救了被绑架的他)
- 冬季养殖这6种阴生植物,方便又好养,你家有么(冬季养殖这6种阴生植物)
热门推荐
- ajax特殊字符的处理
- 优化网站的速度的方法
- mysql数据库简单操作(一篇文章教会你进行MySQL数据库和数据表的基本操作)
- canvas 中文字体(详解canvas绘制网络字体几种方法)
- repeater控件介绍、 repeater嵌套repeater
- C#中默认参数
- python停止执行的代码(python定时检测无响应进程并重启的实例代码)
- python批量转换图片格式(利用Python对文件夹下图片数据进行批量改名的代码实例)
- mysql所有用户命令(MySQL用户管理与PostgreSQL用户管理的区别说明)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9