河南省豫建设计院网站公司网络营销实施计划
在现代 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）至关重要。