0


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

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

环境准备

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

子路径项目的Vite配置

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

  1. base

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

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

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

  1. /eps/

路径下。

Dockerfile配置

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

  1. FROM nginx:1.27.0
  2. USER root
  3. ENV APP_NAME=srm-ui
  4. ENV SRM_WEB_ROOT="/app/srm"
  5. ENV EPS_WEB_ROOT="/app/eps"
  6. COPY /dist ${SRM_WEB_ROOT}
  7. COPY /eps-ui/dist ${EPS_WEB_ROOT}
  8. COPY /nginx.conf /etc/nginx/nginx.conf
  9. CMD /bin/sh -c "/usr/sbin/nginx -g 'daemon off;'"

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

  1. SRM_WEB_ROOT

  1. EPS_WEB_ROOT

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

Nginx配置

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

  1. user nginx;
  2. worker_processes 1;
  3. events {
  4. worker_connections 1024;
  5. }
  6. http {
  7. include mime.types;
  8. default_type application/octet-stream;
  9. keepalive_timeout 65;
  10. server {
  11. listen 80;
  12. server_name _;
  13. root /app;
  14. absolute_redirect off; # 至关重要
  15. gzip on;
  16. gzip_min_length 1k;
  17. gzip_comp_level 5;
  18. gzip_vary on;
  19. gzip_buffers 32 4k;
  20. gzip_http_version 1.0;
  21. gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
  22. location / {
  23. root /app/srm;
  24. index index.html index.htm;
  25. try_files $uri $uri/ /index.html;
  26. }
  27. location /eps {
  28. alias /app/eps;
  29. index index.html index.htm;
  30. try_files $uri $uri/ /eps/index.html;
  31. }
  32. }
  33. }

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

  1. location

块。第一个

  1. location /

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

  1. location /eps

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

  1. try_files

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

  1. /index.html

,这对于单页应用(SPA)至关重要。


本文转载自: https://blog.csdn.net/qq_28827635/article/details/143212887
版权归原作者 泡泡码客 所有, 如有侵权,请联系我们删除。

“使用 Nginx 在同一端口部署两个前端项目并配置子路径”的评论:

还没有评论