<font id="zfvhr"><i id="zfvhr"><noframes id="zfvhr">
<dl id="zfvhr"><delect id="zfvhr"><meter id="zfvhr"></meter></delect></dl>
<video id="zfvhr"><i id="zfvhr"></i></video><video id="zfvhr"><i id="zfvhr"><meter id="zfvhr"></meter></i></video>
<video id="zfvhr"></video>
<dl id="zfvhr"><delect id="zfvhr"></delect></dl><dl id="zfvhr"></dl><dl id="zfvhr"><delect id="zfvhr"></delect></dl>
<dl id="zfvhr"></dl><dl id="zfvhr"><i id="zfvhr"><meter id="zfvhr"></meter></i></dl><video id="zfvhr"></video>
<dl id="zfvhr"><delect id="zfvhr"></delect></dl><dl id="zfvhr"></dl>
<dl id="zfvhr"><delect id="zfvhr"></delect></dl>
<video id="zfvhr"><dl id="zfvhr"><delect id="zfvhr"></delect></dl></video>
<dl id="zfvhr"></dl><dl id="zfvhr"><delect id="zfvhr"></delect></dl>
<dl id="zfvhr"></dl><dl id="zfvhr"><delect id="zfvhr"><meter id="zfvhr"></meter></delect></dl>
<dl id="zfvhr"></dl>

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实现请求转发

    nginx实现请求转发

    本文给大家分享的是使用nginx实现代理(请求转发)的教程及简单示例,非常实用,有需要的小伙伴可以参考下
    2017-07-07
  • Nginx tp3.2.3 404问题解决方案

    Nginx tp3.2.3 404问题解决方案

    这篇文章主要介绍了Nginx tp3.2.3 404问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • Nginx重定向的配置实例

    Nginx重定向的配置实例

    基于Nginx的服务器需要设置下重定向,下面的b2c就是相对应的目录,需要的朋友可以参考下。
    2010-07-07
  • Nginx学习之如何搭建文件防盗链服务的方法示例

    Nginx学习之如何搭建文件防盗链服务的方法示例

    这篇文章主要介绍了Nginx学习之如何搭建文件防盗链服务的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 深入浅析nginx四种调度算法和进阶

    深入浅析nginx四种调度算法和进阶

    这篇文章主要介绍了深入浅析nginx四种调度算法和进阶,文中给大家提到了upstream 支持4种负载均衡调度算法,需要的朋友可以参考下
    2018-06-06
  • Ubuntu+Nginx+Mysql+Php+Zend+eaccelerator安装配置文字版

    Ubuntu+Nginx+Mysql+Php+Zend+eaccelerator安装配置文字版

    把我架设lnmp网站的过程写出来,希望对想架设网站的朋友有所帮助,如有更好的办法请提出来
    2012-02-02
  • Nginx限制IP并发数与下载速度的方法

    Nginx限制IP并发数与下载速度的方法

    这篇文章主要介绍了Nginx中限制IP并发数与下载速度的方法,用到了limit_zone、limit_rate和limit_conn模块,有需要的朋友参考下
    2014-01-01
  • Nginx配置多个HTTPS域名的方法

    Nginx配置多个HTTPS域名的方法

    本篇文章主要介绍了Nginx配置多个HTTPS域名的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • nginx中path模式配置示例

    nginx中path模式配置示例

    这篇文章主要介绍了nginx中path模式配置示例,nginx服务器默认是不支持pathinfo模式的,需要修改配置才可以实现,本文即给出了配置示例,需要的朋友可以参考下
    2014-12-12
  • 简单谈谈Nginx基础知识入门

    简单谈谈Nginx基础知识入门

    Nginx(engine x)是一个高性能的HTTP服务器(其实不止HTTP服务器),一般主要用作负载均衡和反向代理,今天我们来简单学习下他的基础配置知识
    2017-08-08

最新评论

国产女人18毛片水真多