前言本次部署采用前端项目独立容器部署方案基于 Nginx 容器托管前端静态资源并通过 Nginx 反向代理实现后端接口转发单独暴露外网访问端口。好处该部署模式实现了前端项目完全解耦、独立部署与服务器上其他项目无端口、服务、资源冲突。当前前端容器出现故障、重启、更新时仅影响当前前端项目访问不会干扰后端服务及其他业务项目稳定性和可维护性更强。1、部署前置准备前端的dist包通过npm run build出来的前端包docker-compose.yml 容器配置文件Dockerfile 镜像描述文件nginx.conf nginx配置文件dist包docker-compose.ymlservices:ruoyi-web-jstfc:image:ruoyi-web-jstfc:1.0.0container_name:ruoyi-web-jstfc restart:unless-stopped # 独立对外宿主机18081→ 容器80# 与旧项目 nginx 容器宿主机的80不冲突 ports:-${WEB_PORT:-18081}:80networks:-ruoyi-jstfc-net networks:ruoyi-jstfc-net:name:ruoyi-jstfc-net external:trueDockerfile 镜像描述文件# 镜像只负责托管静态文件反向代理后端接口FROMnginx:1.27-alpine # 删除默认配置与静态文件RUNrm-rf/usr/share/nginx/html/* /etc/nginx/conf.d/default.conf # 拷贝前端构建产物 COPY dist/ /usr/share/nginx/html/ # 拷贝 nginx 配置 COPY nginx.conf /etc/nginx/conf.d/default.conf # 对外暴露的端口 EXPOSE 80 CMD [nginx, -g, daemon off;]nginx.confserver{listen80;server_name _;charset utf-8;# 前端构建产物Vitebuild 输出 root/usr/share/nginx/html;index index.html;#后端接口反向代理容器内80→ 同网络 ruoyi-admin-jstfc:8080# 主接口前缀与 application-prod.yml 中 servlet context-path 对应 location/prod-api/{proxy_pass http://ruoyi-admin-jstfc:8080/;proxy_set_headerHost$host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;proxy_set_headerX-Forwarded-Proto$scheme;proxy_connect_timeout60s;proxy_read_timeout600s;proxy_send_timeout600s;client_max_body_size260m;}# 标准/api/路径 location/api/{proxy_pass http://ruoyi-admin-jstfc:8080/api/;proxy_set_headerHost$host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;proxy_set_headerX-Forwarded-Proto$scheme;proxy_connect_timeout60s;proxy_read_timeout600s;proxy_send_timeout600s;client_max_body_size260m;}# 上传的静态资源房产图、头像等 location/profile/{proxy_pass http://ruoyi-admin-jstfc:8080/profile/;proxy_set_headerHost$host;proxy_set_headerX-Real-IP$remote_addr;}#前端SPA#SPA路由 fallback部署在根路径/ location/{try_files $uri $uri//index.html;}}2、构建镜像在项目目录下运行:docker build -t ruoyi-web-jstfc:1.0.0 .3、创建共享网络如果还没建docker network create ruoyi-jstFc-net4、启动docker compose up -d5、查看容器运行状态与日志筛选查看当前前端容器运行状态docker ps | findstr jstFc实时查看容器运行日志排查启动异常、接口代理报错问题docker logs -f ruoyi-web-jstFc
