Nginx部署多项目详细总结

1,782 阅读6分钟

前言

我们知道通过docker搭建nginx服务,那么如何在一个nginx服务部署多个项目。

本文会从几个方面进行实践说明:

  • 基于域名配置
  • 基于端口配置
  • 基于location配置
  • 清楚打包工具publicPath的实际作用
  • 前端如何开启oss加速访问

1. 基于域名配置

域名配置是基于DNS解析的一种方式,可以通过不同的域名访问不同的项目。

具体步骤如下:

  • 需要购买并配置好域名解析。
    • 例如,主域名解析到对应的服务器,可以配置泛解析,这样对应的二级域名都指向服务器。

image.png

  • 编写nginx.conf配置文件
    • 对于每个二级域名,在nginx配置文件中为其指定一个server块。在这个块中,设置listen指令监听80端口(通常是80或443),使用server_name指令指定域名。之后,通过location块指定项目的根目录和索引文件。

例如:

server {
        listen  80;
        server_name  h5.snowball.top;
        
         location / {
             root /usr/share/nginx/html/h5;
             index index.html;
             try_files $uri $uri/ /index.html;
         }
    }
    
    server {
        listen  80;
        server_name  back.snowball.top;
        
         location / {
             root /usr/share/nginx/html/back;
             index index.html;
             try_files $uri $uri/ /index.html;
         }
    }

这样就可以通过域名进行访问,不需要修改项目任何配置。如果项目过多,配置在同一个配置文件不易管理。

通常nginx配置文件对于每个域名都是通过单独文件控制:

nginx为我们提供了include,只需要在nginx.conf中添加:

include /etc/nginx/conf.d/*.conf;

表明conf.d下的所有以后缀conf的文件都会引入。那么我们对于每个项目都可以单独配置,方便管理。

/nginx/conf/conf.d:

h5.conf:

server {
        listen  80;
        server_name  h5.snowball.top;
        
         location / {
             root /usr/share/nginx/html/h5;
             index index.html;
             try_files $uri $uri/ /index.html;
         }
    }
    

back.conf

server {
    server {
        listen  80;
        server_name  back.snowball.top;
        
         location / {
             root /usr/share/nginx/html/back;
             index index.html;
             try_files $uri $uri/ /index.html;
         }
    }

注意:这里每个location设置为root,后面基于location使用alias

nginx重启完成后:

image.png

image.png

这种方式的优点是只需开放80或443端口即可。用户可直接通过二级域名访问不同的项目,符合访问习惯,便于记忆和管理。一般企业使用这种方式。

2. 基于端口配置

端口配置是通过监听不同的端口来区分不同的项目。每个项目在一个单独的端口上运行,通过不同的端口号进行访问。

具体步骤如下:

  • 编写nginx配置文件
    • 在nginx的配置文件中,为每个项目创建不同的server块,并为每个块设置不同的listen端口。每个端口指定的项目配置location

例如:

h5.conf:

server {
        listen  8888;
        server_name  localhost;
        
         location / {
             root /usr/share/nginx/html/h5;
             index index.html;
             try_files $uri $uri/ /index.html;
         }
    }
    

back.conf

server {
    server {
        listen  9999;
        server_name  localhost;
        
         location / {
             root /usr/share/nginx/html/back;
             index index.html;
             try_files $uri $uri/ /index.html;
         }
    }

重启nginx后:

image.png

image.png

这种方式需开放多个端口,不建议使用。

3. 基于location配置

实现nginx部署多个项目,如果不想修改配置,直接通过读取服务器的文件。

nginx默认访问的根目录是html,在html文件下新建back和h5文件夹,直接访问域名/h5|back不需要通过配置也可以访问到文件。

3.1 了解publicPath的作用

在看实现之前,我们先看这个前置的问题。为什么有时候设置了./或者/dist就能访问,而/不可以。

案例:本地打包后的文件,通过live server启动

  1. 设置为/绝对路径

打包后的引入路径为:

<script type="module" crossorigin src="/static/js/index-CYTZDwzX.js"></script>
<link rel="stylesheet" crossorigin href="/static/css/index-DcyTkVWs.css">

如果直接在项目下的dist启动文件,会出现

image.png

这是因为启动的服务器根目录项目的入口,如vite.config.ts这些文件是可以访问到的,dist文件下的文件,并不在根目录下。同理,服务器也是相同,你的资源文件不是根目录下。

  1. 设置为./相对路径

打包后的引入路径为:

<script type="module" crossorigin src="./static/js/index-CYTZDwzX.js"></script>
<link rel="stylesheet" crossorigin href="./static/css/index-DcyTkVWs.css">

此时寻找的路径就是以dist为目录,相对路径可以找到对应的文件

3.2 修改前端项目配置

具体实现步骤:

  • 修改项目路由base,需要与服务器进行对应。注意如果是hash模式,nginx配置不需要修改,如果是history模式,需要加上tryfiles
const router = createRouter({
  history: createWebHistory('/back/'),
  routes
})
  • 打包配置文件publicPath需要设置/back/或者./,这里不同打包工具配置自行查找。

设置完成后打包文件输出如下:

image.png

image.png

注意将打包工具的public设置为'./',因为这里的路径不是根路径。

重启nginx后访问:

image.png

这里配置的是history模式,刷新页面

image.png

所以需要在配置文件添加try_files $uri $uri/ /index.html;

server {
    listen  80;
    server_name localhost;

     location / {
         root /usr/share/nginx/html;
         index index.html;
     }

     location /h5/ {
         alias /usr/share/nginx/html/h5/;
         try_files $uri $uri/ /index.html;
     }

     location /back/ {
         alias /usr/share/nginx/html/back/;
         try_files $uri $uri/ /back/index.html;
     }
}

3.3 配置错误说明

如果不设置为/h5/index.html

image.png

如果alias不添加后缀/

image.png

4. 前端如何开启oss加速访问

以基于域名配置为例:

具体步骤:

  • 需要一个oss,创建bucket,开启传输加速访问域名,可以设置自己的域名。

image.png

  • 项目修改publicPath设置为加速域名,进行打包。
    • 打包文件

image.png

  • 此时需要将index.html文件上传到服务器的/h5文件夹下,打包后的static文件上传oss即可。
  • 上传oss后,可以通过加速的域名访问

重启nginx后进行访问:

首页通过服务器拉取:

image.png

js和css资源通过加速域名加载:

image.png

image.png

需要将服务器的index.html设置为不走缓存,如果进行缓存,会出现打包上传还是旧的资源情况。

总结

最后总结一下:使用Nginx服务部署多个项目,我们通过三种方法配置:

  1. 基于域名配置:通过不同的二级域名来访问不同的项目。

  2. 基于端口配置:通过监听不同的端口来区分项目。

  3. 基于location配置:通过路径的方式来区分访问不同的项目资源。这种方法可以不修改项目的配置文件,直接通过服务器的文件系统结构来访问不同项目,但需要调整项目构建时的publicPath以及Nginx的适当配置。

总的来说,基于域名配置是最简单方便的。

如有错误,请指正O^O!


相关系列文章:

三分钟!快速解决Dockerhub镜像站无法访问问题!

Docker部署nginx发布前端项目

Nginx部署多项目详细总结