怎么用nginx部署多个前端项目

已于 2023-12-09 20:56:35 修改
阅读量4.7k 收藏 49
点赞数 63
分类专栏： 技术分享 文章标签： nginx 前端 运维
于 2023-12-09 20:55:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_51732378/article/details/134899592
版权
本文详细介绍了如何使用Nginx部署多个前端项目，包括根目录和非根目录部署方法，以及修改配置和打包路径的步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

摘要

如果你有很多个项目需要线上部署，那么如何部署多个前端项目呢？很多人会想到用nginx来部署前端项目。那么实际我们该如何部署？这个文章交你如何部署。

前提环境

nginx(Nginx 是一款高性能的 HTTP 和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 服务器。它由 Igor Sysoev 开发，最初是为俄罗斯的一个大型网站 Rambler.ru 设计的。Nginx 以其稳定性、丰富的功能集、示例配置文件和低系统资源消耗而闻名)

配置文件说明

安装完nginx后，打开nginx所在目录，打开conf文件夹下的nginx.conf。我们能看见以下文件
在这里插入图片描述
其中，server里的listen是监听的端口号，location / 代表当用户访问服务器IP+端口号（listen）+/访问的页面，root是访问页面的根目录，index是访问页面的首页。我们安装完nginx后，在浏览器输入localhost:80/可以看见
在这里插入图片描述
这个就是nginx默认的访问页。

部署方式

1、根目录部署

这种方式指的是ip+端口号+/就能访问到网页，即只需修改nginx目录中的

最低0.47元/天 解锁文章
nginx部署多个前端项目
weixin_42886452的博客
01-28 383
本文用到的工具为xshell 1、将项目前端项目dist和nginxtest通过xftp上传到服务器 2、配置nginx.conf文件 [root@localhost conf]# vi nginx.conf server { #启动后的端口 listen 80; #启动时的地址 server_name 192.xxx.xx.xxx; #编码（不是utf-8建议改一下，不然会报错乱码） chars
Nginx部署多个前端项目如何实现配置隔离？Nginx多项目部署
BaynotBar的博客
05-29 924
Nginx是一个功能十分强大的HTTP web服务器，其高性能、支持反向代理和负载均衡的特性使得其在Web项目中应用十分广泛。我们将前端项目打包部署在Nginx的Html（www）目录下，并需要在conf目录下的nginx.conf文件中写入相关配置（server、upstream等），此时如果部署了多个前端项目，一个文件中配置多个不同的server耦合度太高且维护较为繁琐，因此实现多项目环境下的配置隔离尤其重要。 本文介绍了Nginx部署多个前端项目如何实现配置隔离。
nginx一个域名多个项目部署.doc
09-16
nginx一个域名多个项目部署,nginx一个域名多个项目部署,nginx一个域名多个项目部署,nginx一个域名多个项目部署
一个nginx实现两个前端?
最新发布
qq_58968195的博客
03-13 320
一个nginx实现两个前端?
Nginx部署多个前端项目及相关Linux命令
honor2的博客
09-11 2549
Nginx部署多个前端项目及相关Linux命令
【运维】手把手教你在Linux/Windows系统使用Nginx部署多个前端项目【详细操作】
m0_64210833的博客
06-11 9595
手把手教你如何在Linux/Windows系统上使用Nginx部署多个前端项目，并且教你如何关闭防火墙解决项目访问失败问题。
docker nginx 部署多个项目的示例方法
09-30
主要介绍了docker nginx 部署多个项目的示例方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Ruoyi-Vue前端部署-nginx部署多个vue前端项目
qq_34746960的博客
04-24 2031
nginx使用同一端口部署多项目
Nginx中部署多个前端项目
烛照@123的博客
01-26 1497
nginx部署项目
使用nginx部署多个前端项目
qq_25983579的博客
05-23 2602
使用nginx部署多个前端项目 个人总结了3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法。 基于域名配置 基于端口配置 基于location配置 基于域名配置 基于域名配置，前提是先配置好了域名解析。比如说你自己买了一个域名：www.fly.com。 然后你在后台配置了2个它的二级域名： a.fly.com、 b.fly.com。 配置文件如下： 配置 a.fly.com 的配置文件： server { listen 80; server_nam
nginx配置（多个前端）
weixin_45730866的博客
05-13 981
nginx配置（多个前端，文件配置，后端配置）
Nginx部署多个前端项目
qq_33511971的博客
05-28 459
一、前端项目部署二级目录 以部署2个Vue项目为例，为了防止两个项目的静态文件位置重合，需要将一个项目加入二级目录。 vue.config.js 中加入publicPath src/router/index.js 加入 二、Nginx 配置文件修改 没有加入二级目录的项目正常修改为 root 后的地址， 加入二级目录的项目 通过 alias 修改到 location 二级目录的 ip 转发。 ...
nginx部署多个项目
孤傲的博客
09-15 2154
实现在一台服务器上使用nginx部署多个项目的方法。
用nginx部署多个前端项目
qq_21205571的博客
04-22 943
dist前端文件所在目录。
mac使用nginx部署多个前端项目
10-31
在Mac上使用Nginx部署多个前端项目通常涉及到以下几个步骤： 1. **安装Nginx**：首先，你需要确保Nginx已经安装在Mac上，如果没有，可以使用Homebrew命令 `brew install nginx` 安装。 2. **配置Nginx**：创建一个主配置文件，如 `/etc/nginx/nginx.conf` 或者在`/usr/local/etc/nginx/sites-available`目录下创建独立的站点配置文件（比如 site1.conf, site2.conf）。每个配置文件应该包含基本的服务器块设置，如监听端口、根目录等，并指定不同的前端项目。 ```nginx server { listen 80; server_name site1.example.com; # 替换为你第一个项目的域名 root /path/to/site1/dist; # 指向第一个项目的构建输出目录 index index.html index.htm; } server { listen 80; server_name site2.example.com; # 替换为你第二个项目的域名 root /path/to/site2/dist; index index.html index.htm; } ``` 3. **启用站点**：将配置文件软链接到`sites-enabled`目录，以便Nginx加载它们： ``` sudo ln -s /usr/local/etc/nginx/sites-available/site1.conf /usr/local/etc/nginx/sites-enabled/ sudo ln -s /usr/local/etc/nginx/sites-available/site2.conf /usr/local/etc/nginx/sites-enabled/ ``` 4. **重启Nginx服务**：确保配置更改生效，运行 `sudo nginx -s reload` 或者重启整个服务 `sudo systemctl restart nginx`. 5. **访问项目**：现在分别通过各自的域名访问网站。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值