使用 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.0USER rootENV 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.confCMD /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）至关重要。