nginx部署多个前端项目

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nginx部署多个前端项目相关的知识,希望对你有一定的参考价值。

参考技术A 这里就不介绍同一端口和同一nginx.conf,有需要的童鞋自行百度。
这里介绍不同项目的不同配置。
服务器中已经部署了其他项目,这里做一个简单的页面做测试:

1、新建目录:
/root/nginx/8571/
/root/nginx/8571/html/
/root/nginx/8571/log/

2、将文件:/usr/sbin/nginx 拷贝至 /root/nginx/8571/
3、新建index.html:/root/nginx/8571/html/index.html

4、新建配置文件:/root/nginx/8571/nginx.conf

5、启动 nginx
./nginx -c /root/nginx/8571/nginx.conf

注意:
若 nginx.conf 配置 location 后,重启 nginx 再访问,如果访问提示:Nginx 403 Forbidden,则需要在 nginx.conf 头部加入一行:

user root;

查看nginx端口使用情况:netstat -apn
启动成功后输入ip和端口8571访问:

尝试用Nginx反向代理解决同时部署多个项目的问题

参考技术A 这个问题源于我想在服务器上部署博客的前端项目,打算用Nginx来部署前端服务,但是我的443端口已经提供给了微信小程序的服务。

微信小程序要求正式环境的请求必须采用域名,并且是https服务,肯定是无法修改的,博客的前端项目虽然可以用80端口,但是浏览器会一直提示“不安全”,看起来也很不好。

我的CA证书已经被我放在了和小程序服务在一起的 /home 路径下,找到 /etc/nginx/nginx.conf 文件,根据它的提示添加如下修改配置文件

这里我为了先验证配置是否生效,已经停止了node服务,使用 nginx -s reload 重新载入配置文件,打开浏览器验证,成功访问到服务。

这时候启动node服务,不出意外的因为443端口被占用而出错。

虽然公司的前端项目基本都使用反向代理,但是自己还是第一次尝试,上网搜了一下资料,竟然很简单,不过要注意的是 location 的配置是真的很绕。

我这里首先将node服务的端口更改为7001并重新启动,用域名+端口访问成功。继续修改 /etc/nginx/nginx.conf 文件,在 原有的 location 下新增一条

使用 nginx -s reload 重新载入配置文件,打开浏览器输入 域名/miniprogram 成功访问到小程序服务,接下来只需要统一修改小程序的请求前缀为 /miniprogram 就可以了,而博客项目,仍然可以通过域名直接访问。

在自己尝试配置反向代理后发现了 location 之后加不加 / 以及代理地址后加不加 / 会造成最后转发的结果天差地别,所以整理一下方便自己以后查阅。

假设:Nginx服务器地址为 1.1.1.1 ,需要转发到 2.2.2.2

发送请求: 1.1.1.1/foo/api

假设:Nginx服务器地址为 1.1.1.1 ,需要转发到 2.2.2.2

发送请求: 1.1.1.1/foo/api

这里的表格一开始真的也是看的我一头雾水,但是看了别人的分析后觉得豁然开朗。

以上是关于nginx部署多个前端项目的主要内容,如果未能解决你的问题,请参考以下文章

nginx 部署多个前端vue项目的3种方式,一篇文章搞定

nginx部署多个前后端项目

nginx 部署 多个vue项目 端口代理配置问题

尝试用Nginx反向代理解决同时部署多个项目的问题

web前端项目部署到服务器:

nginx配置同一域名同一端口下部署多个vue项目