使用 Nginx 在同一端口部署两个前端项目并配置子路径

在现代 Web 开发中，我们经常需要在同一台服务器上部署多个前端项目。这不仅可以节省资源，还可以简化管理。本文将指导你如何使用Nginx在同一端口上部署两个前端项目，并通过配置子路径来区分它们。

环境准备

首先，我们需要准备两个前端项目，一个为主项目，另一个为子路径项目。我们将使用Vite作为构建工具，Nginx作为服务器。

子路径项目的Vite配置

对于子路径项目，我们需要在Vite配置中指定基础路径。这可以通过设置

base

属性来实现。以下是子路径项目的Vite配置示例：

base:VITE_APP_ENV!=="dev"?"/eps/":"/",

这段代码意味着在非开发环境下，子路径项目将被部署在

/eps/

路径下。

Dockerfile配置

接下来，我们需要创建一个Dockerfile来构建Nginx镜像。这个Dockerfile将复制前端项目的构建产物到指定的目录，并使用自定义的Nginx配置文件。以下是Dockerfile的示例：

FROM nginx:1.27.0

USER root

ENV APP_NAME=srm-ui
ENV SRM_WEB_ROOT="/app/srm"
ENV EPS_WEB_ROOT="/app/eps"

COPY /dist ${SRM_WEB_ROOT}
COPY /eps-ui/dist ${EPS_WEB_ROOT}

COPY /nginx.conf /etc/nginx/nginx.conf

CMD /bin/sh -c "/usr/sbin/nginx -g 'daemon off;'"

这个Dockerfile定义了两个环境变量

SRM_WEB_ROOT

和

EPS_WEB_ROOT

，分别指向主项目和子路径项目的根目录。然后，它将两个项目的构建产物复制到这些目录，并使用自定义的Nginx配置文件。

Nginx配置

最后，我们需要配置Nginx以处理两个项目的请求。以下是Nginx配置文件的示例：

user nginx;
 
worker_processes  1;
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
    keepalive_timeout  65;
 
    server {
        listen       80;
        server_name  _;
        root /app;
        absolute_redirect off;  # 至关重要

        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 5;
        gzip_vary on;
        gzip_buffers 32 4k;
        gzip_http_version 1.0;
        gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

        location / {
            root   /app/srm;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        location /eps {
            alias   /app/eps;
            index index.html index.htm;
            try_files $uri $uri/ /eps/index.html;
        }
    }
}

在这个配置中，我们定义了两个

location

块。第一个

location /

块处理主项目的请求，第二个

location /eps

块处理子路径项目的请求。

try_files

指令确保如果请求的文件或目录不存在，Nginx将回退到

/index.html

，这对于单页应用（SPA）至关重要。