脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → nginx → nginx部署多前端项目

nginx部署多前端项目的几种方法

 更新时间：2021年05月25日 11:08:58   作者：直角漫步  
最近一台服务器要配置多个前端项目，个人总结了3种方法来实现在一台服务器上使用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解决403 forbidden的完整步骤

    Nginx解决403 forbidden的完整步骤

    这篇文章主要给大家介绍了关于Nginx解决403 forbidden的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • nginx反向代理60s超时报错问题解决

    nginx反向代理60s超时报错问题解决

    本文主要介绍了Nginx反向代理时遇到60秒超时报错的问题,经过排查发现是由于代理服务执行时间过长导致的,具有一定的参考价值,感兴趣的可以了解一下
    2025-02-02
  • 一文详解nginx中的root与alias

    一文详解nginx中的root与alias

    Nginx是一款流行的高性能Web服务器和反向代理服务器,这篇文章主要给大家介绍了关于如何通过一文详解nginx中的root与alias的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • Nginx安装及具体应用小结

    Nginx安装及具体应用小结

    Nginx 动静分离简单来说就是把动态请求跟静态请求分开,Nginx 处理静态请求,Tomcat处理动态请求,这篇文章主要介绍了Nginx安装及具体应用小结,需要的朋友可以参考下
    2024-02-02
  • Linux部署Nginx实现反向代理的方法步骤

    Linux部署Nginx实现反向代理的方法步骤

    Nginx 是一种常用、轻型且快速的 Web 服务器, 它可以在 Linux 和 Windows 上运行,并且可以配置为反向代理服务器,本文主要介绍了Linux部署Nginx实现反向代理的方法步骤,感兴趣的可以了解一下
    2023-08-08
  • nginx 开启 pathinfo的过程详解

    nginx 开启 pathinfo的过程详解

    这篇文章主要介绍了nginx 开启 pathinfo的过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • Nginx实现动态内容缓存的示例代码

    Nginx实现动态内容缓存的示例代码

    在Nginx中实现动态内容的缓存可以显著提高性能,减少后端服务器的负载,本文就来介绍一下Nginx动态内容缓存实现,具有一定的参考价值,感兴趣的可以了解一下
    2024-11-11
  • Nginx的流式响应配置小结

    Nginx的流式响应配置小结

    Nginx的流式响应功能是一项非常实用的特性,它允许Nginx在接收后端服务器响应的同时,逐步将内容发送给客户端,本文主要介绍了Nginx的流式响应配置,具有一定的参考价值,感兴趣的可以了解一下
    2025-04-04
  • Nginx实现动态封禁IP的步骤指南

    Nginx实现动态封禁IP的步骤指南

    在日常的生产环境中,网站可能会遭遇恶意请求、DDoS 攻击或其他有害的访问行为,为了应对这些情况,动态封禁 IP 是一项十分重要的安全策略,本篇博客将介绍如何通过 NGINX 实现动态封禁 IP,从配置到自动化的实现步骤,需要的朋友可以参考下
    2025-02-02
  • Nginx图片服务器配置之后图片访问404的问题解决

    Nginx图片服务器配置之后图片访问404的问题解决

    本文主要介绍了Nginx图片服务器配置之后图片访问404的问题解决，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论