纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

直角漫步   2021-05-25 我要评论
想了解nginx部署多前端项目的几种方法的相关内容吗直角漫步在本文为您仔细讲解nginx部署多前端项目的相关知识和一些Code实例欢迎阅读和指正我们先划重点: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


相关文章

猜您喜欢

  • Python cmd获得.py参数 怎样从Python的cmd中获得.py文件参数

    想了解怎样从Python的cmd中获得.py文件参数的相关内容吗橘子甜不甜在本文为您仔细讲解Python cmd获得.py参数的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Python,cmd,.py文件参数下面大家一起来学习吧..
  • python破解linux密码 Python脚本激活Linux密码的方法(crypt模块)

    想了解Python脚本激活Linux密码的方法(crypt模块)的相关内容吗谢公子在本文为您仔细讲解python破解linux密码的相关知识和一些Code实例欢迎阅读和指正我们先划重点:python破解linux密码,python,crypt模块下面大家一起来学习吧..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式