要将若依（RuoYi）前端项目部署到 Docker 中，可通过 Nginx 容器静态托管 的方式实现。以下是详细步骤：

步骤 1：准备前端构建产物

首先需要将若依前端项目打包为静态文件：

1. 进入 ruoyi-ui 目录：

   bash

   cd D:\Code\RuoYi-Vue\ruoyi-ui
   

2. 执行生产环境构建命令：

   bash

   npm run build:prod
   

   构建完成后，会在 ruoyi-ui 目录下生成 dist 文件夹，里面是前端静态资源（HTML、CSS、JS 等）。

步骤 2：编写 Nginx 配置文件

创建 nginx.conf 文件（与 Dockerfile 同目录），用于配置 Nginx 静态资源托管和反向代理后端接口：

nginx

user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       81;  # 前端访问端口，可自定义
        server_name  localhost;

        # 静态资源托管（指向前端构建产物目录）
        location / {
            root   /opt/project/vacation/vacation-front;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;  # 解决 Vue 路由刷新 404 问题
        }

        # 反向代理后端接口（替换为你的后端服务地址）
        location /prod-api/ {
            proxy_pass http://ruoyi-backend-service:8081/;  # 后端服务名:端口（需与后端 Docker 配置一致）
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }
}

步骤 3：编写 Dockerfile

在 ruoyi-ui/dist 目录下创建 Dockerfile，用于构建前端镜像：

dockerfile

# 基础镜像：Nginx
FROM nginx:1.18.0

# 复制 Nginx 配置文件
COPY nginx.conf /etc/nginx/nginx.conf

# 创建前端资源存放目录
RUN mkdir -p /opt/project/vacation/vacation-front

# 复制前端构建产物到容器内
COPY . /opt/project/vacation/vacation-front

# 暴露端口（与 Nginx 配置的 listen 端口一致）
EXPOSE 81

步骤 4：构建前端 Docker 镜像

在 ruoyi-ui/dist 目录下执行构建命令：

bash

docker build -t ruoyi-front:1.0 .

步骤 5：启动前端容器（配合后端服务）

若依前端需要依赖后端接口，建议通过 Docker Compose 统一管理服务，确保网络连通性：

1. 在项目根目录创建 docker-compose.yml：

   yaml

   version: '3'
   networks:
     ruoyi-network:  # 自定义网络，确保前后端在同一网络
       driver: bridge
   services:
     # 后端服务（需先构建后端镜像，参考之前的后端 Docker 配置）
     backend:
       container_name: ruoyi-backend-service
       image: ruoyi-backend:1.0
       ports:
         - "8081:8081"
       networks:
         - ruoyi-network
       # 后端环境变量（数据库、Redis 配置，需根据实际情况填写）
       environment:
         - SPRING_DATASOURCE_URL=jdbc:mysql://你的MySQL地址:3307/ry-vue?...
         - SPRING_DATASOURCE_USERNAME=root
         - SPRING_DATASOURCE_PASSWORD=你的密码
         - SPRING_REDIS_HOST=你的Redis地址
         - SPRING_REDIS_PORT=6379
   
     # 前端服务
     front:
       container_name: ruoyi-front
       image: ruoyi-front:1.0
       ports:
         - "81:81"
       networks:
         - ruoyi-network
       depends_on:
         - backend  # 确保后端启动后再启动前端
   

2. 启动所有服务：

   bash

   docker compose up -d
   

验证部署

打开浏览器访问 http://localhost:81，若能正常显示若依前端页面且能调用后端接口，说明部署成功。

总结

若依前端 Docker 部署的核心是 Nginx 静态托管 + 反向代理，通过 Docker 网络确保前后端连通。若需单独启动前端容器，需将 proxy_pass 中的后端地址替换为实际的主机 IP 或后端容器 IP。

哪错了，docker run -d --name vacation-front --networks vacation-network -p 82:82 vacation-front:1.0

命令中的错误在于 --networks 是 Docker Compose 的语法，直接用 docker run 时应使用 --network（单数形式）。正确命令如下：

bash

docker run -d --name vacation-front --network vacation-network -p 82:82 vacation-front:1.0

错误原因解析：

• docker run 命令中指定网络的参数是 --network（单数），用于将容器加入已存在的网络。
• --networks（复数）是 Docker Compose 配置文件（docker-compose.yml）中的语法，不能直接用于 docker run 命令。

补充检查步骤：

1. 确保网络 vacation-network 已存在，若不存在需先创建：

   bash

   docker network create vacation-network
   

2. 启动后可通过以下命令验证容器是否加入网络：

   bash

   docker network inspect vacation-network | grep "vacation-front"
   

修改后重新执行命令即可正常启动容器并加入指定网络。