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部署多前端项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • docker nginx 部署多个项目的示例方法

    前提条件 1.本地电脑和服务器已安装 docker,下载方法自行谷歌吧 2.在 docker hub 上已有账号, 注册传送门: https://hub.docker.com/ 3.需要对 docker 已有所熟悉 ,并了解Dockerfile里的一些指令 使用Dockerfile 制作镜像 假如本机有一个叫web的项目 在web根目录下新建Dockerfile,写入以下内容 FROM nginx:1.13.6-alpine LABEL maintainer="lilywang <lily

  • Python开发之Nginx+uWSGI+virtualenv多项目部署教程

    1.新建独立运行环境,命名为env [root@vultr ~]# mkdir projects # 测试的项目总目录 [root@vultr ~]# pip3 install virtualenv [root@vultr ~]# cd projects [root@vultr projects]# virtualenv env --python=python3 --no-site-packages --python:指定Python版本 --no-site-packages:不复制系统已安装P

  • nginx部署多个vue项目的方法示例

    上一篇已经介绍了然后配置web项目:今天由于公司需求,需要在同一域名端口下,部署两个项目:今天花了一上午终于弄好了,选择赶紧做一个笔记. 如何连接阿里云服务器就不在这里说了,请看我以前的文章. 首先需要的效果 http://47.97.244.83/login http://47.97.244.83/student/login 文件目录 两个项目并列在同一文件夹内. 准备好两个vue的项目 http://47.97.244.83/login:这个不用修改配置直接build就可以.关键是二级域名的

  • 使用nginx同域名下部署多个vue项目并使用反向代理的方法

    效果 目前有 2 个项目(project1, project2),还有一个 nginx 自带的 index.html,我添加了对应的链接代码(稍后粘贴出来),为了统一管理子项目的路由. 我期望实现下面的效果(假设 ip: localhost,port: 8080): http://localhost:8080/ 进入最外层的 index.html http://localhost:8080/project1 进入项目一 http://localhost:8080/project2 进入项目二 废

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

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

    个人总结了3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法. 基于域名配置 基于端口配置 基于location配置 在正式开始之前,我们先来看一下nginx安装的默认配置文件: /etc/nginx/nginx.conf 文件 可以看到图中的:include /usr/nginx/modules/*.conf,这句话的作用就是可以在nginx启动加载所有 /usr/nginx/modules/ 目录下的 *.conf 文件. 所以,平时我们为了方便管理,可以在此目录下面定义自己的

  • jenkins+docker+nginx+nodejs持续集成部署vue前端项目

    jenkins+docker+nginx+nodejs持续集成部署vue前端项目

    目录 前提: 思路: 步骤: 配置nodejs工具 git代码文件目录如下 Dockerfile的文件内容 nginx.conf主配置文件的内容 最近比较闲,尝试了一下docker部署业务测试环境的前端vue项目,作此记录 这里我的环境是Jenkins+docker+harbor+nginx部署,但是由于此项目以节点形式加入jenkins,构建和部署都在一台,所以没有用到harbor,但是生产环境可能部署和构建不在一台,会需要先推送到harbor,也有详细步骤. 前提: 1安装好了jenkins

  • Tomcat 部署项目的三种方法详解

    Tomcat 部署项目的三种方法详解

    1.下载 Tomcat 服务器 ①.官网下载地址:http://tomcat.apache.org/ ②.Tomcat 8.5.11 32位/64位 官方免费版下载地址:http://www.jb51.net/softs/537911.html 2.启动并部署 Tomcat 服务器 ①.解压 tomcat 安装包到一个非中文目录下 ②.配置环境变量.JAVA_HOME(指向 JDK 安装的根目录) ③.双击 apache-tomcat-6.0.16\bin 目录下的 startup.bat,启动

  • 部署Go语言项目的 N 种方法(小结)

    本文以部署 Go Web 程序为例,介绍了在 CentOS7 服务器上部署 Go 语言程序的若干方法. 部署Go语言项目 本文以部署 Go Web 程序为例,介绍了在 CentOS7 服务器上部署 Go 语言程序的若干方法. 独立部署 Go 语言支持跨平台交叉编译,也就是说我们可以在 Windows 或 Mac 平台下编写代码,并且将代码编译成能够在 Linux amd64 服务器上运行的程序. 对于简单的项目,通常我们只需要将编译后的二进制文件拷贝到服务器上,然后设置为后台守护进程运行即可.

  • 记一次react前端项目打包优化的方法

    前文 之前一年多前接手的一个react项目,前段时间因为做业务中台项目,对公司现有的应用项目做中台化改造,这期间将项目部署到uat环境,测试期间,测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久,白屏时间超过30s,体验很差,生产不至于这么慢但也是白屏时间挺长的,所以减少白屏时间增加用户体验成为了当务之急.复制代码 分析 通过控制台判断加载资源时间还有资源大小 通过开发者工具可以看到白屏的主要原因在于bundle.js这个打包后的文件过大,达到3.6M加上uat环境带宽等问题的话,光

  • Android Studio导入Eclipse项目的两种方法

    Android Studio导入Eclipse项目的两种方法

    Android Studio导入Eclipse项目有两种方法,一种是直接把Eclipse项目导入Android Studio,另一种是在Eclipse项目里面进行转换,然后再导入Android Studio. 1. 直接导入 打开Android Studio,如果里面已经打开了项目,选择关闭当前的项目,会弹出一个Welcome对话框: 选择Import project (Eclipse ADT, Gradle, etc.),然后再选择要导入的Eclipse项目: 点击"OK"以后,选择

  • Django接受前端数据的几种方法总结

    背景 测试工具箱写到一半,今天遇到了一个前后端数据交互的问题,就一起做一下整理. 环境 -------------------------------------------------------- 版本相关 操作系统:Mac OS X EI Caption Python版本:2.7 IDE:PyCharm Django: 1.8.2 --------------------------------------------------------- 注: 我测试的是Get方法,POST方法也同

  • 实现将Web应用部署到Tomcat根目录的三种方法

    将应用部署到Tomcat根目录的三种方法 将应用部署到Tomcat根目录的目的是可以通过"http://[ip]:[port]"直接访问应用,而不是使用"http://[ip]:[port]/[appName]"上下文路径进行访问. 方法一:(最简单直接的方法) 删除原 webapps/ROOT 目录下的所有文件,将应用下的所有文件和文件夹复制到ROOT文件夹下. 方法二: 删除原webapps/ROOT 目录下的所有文件,修改文件"conf/server

  • 使用easyui从servlet传递json数据到前端页面的两种方法

    两种方法获取的数据在servlet层传递的方法相同,下面为Servlet中代码,以查询表中所有信息为例. //重写doGet方法 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub ​ request.setCharacterEncoding("

  • Python3创建Django项目的几种方法(3种)

    Django是一种基于Python的Web开发框架 一.在命令行中创建Django项目(Windows平台.python3.6) 1.建立虚拟环境(创建一个独立的Python运行环境) 为项目新建一个目录learning_log,在终端切换到这个目录,并创建虚拟环境 这里运行了模块venv,并使用它创建一个名为ll_env的虚拟环境 注意:如果python是较早版本,则先安装virtualenv(pip3 install virtualenv)然后再创建虚拟环境(virtualenv ll_en

随机推荐