从开发到部署：Docker 化前端应用全流程指南

1.安装Docker插件

说明：菜单栏左上角打开"文件 → 设置"，左侧为项目导航栏，中央为插件管理面板，搜索"docker"筛选出插件列表。右侧显示所选"Docker"官方插件的功能与特性，底部提供确认、取消和应用按钮。

2.连接Docker

说明：在"设置"中，左侧菜单"构建、执行、部署"下已有"Docker"选项，右侧显示具体的连接配置面板。当前配置名称为"Docker-test01"，已成功使用"Docker for Windows"并通过命名管道连接到本地 Docker 守护进程，底部显示"连接成功"。在 Windows 环境下可直接使用命名管道连接；若是在远程服务器环境，应使用 TCP 套接字，并在"引擎 API URL"中填写服务器的 Docker 地址进行连接。

3.Dockerfile

说明：Dockerfile 基于官方 Nginx 镜像，将自定义配置文件和前端打包产物拷贝到镜像中，并启动 Nginx 服务，监听 80 端口提供静态页面和代理功能。

javascript 复制代码

FROM nginx:latest

# 使用我们自己的 nginx.conf
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 拷贝 dist
COPY dist/ /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

4.nginx.conf

说明：配置让 Nginx 在 80 端口提供前端静态文件服务，支持 hash 路由，并将 /universal-api/ 的请求代理到宿主机 8082 端口的后端服务。

javascript 复制代码

server {
    listen 80;
    server_name localhost;

    # 直接返回静态文件（hash 路由不需要 history）
    root /usr/share/nginx/html;

    # 处理你的 API 代理
    location /universal-api/ {
        proxy_pass http://host.docker.internal:8082/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 如果静态资源不存在则返回 index.html（可选）
    # hash 路由其实不需要这一段，可写可不写
    location / {
        try_files $uri $uri/ /index.html;
    }
}

5.Docker 运行/调试配置

说明：创建和配置一个 Docker 运行/调试配置的具体步骤。具体来说，这张图显示的是在"运行/调试配置"对话框中，用户正在创建一个名为 test-02的配置，其主要设置包括：使用 Dockerfile 来构建镜像，将镜像标签命名为 02，将容器名称设置为 test-container-02，并配置端口映射将主机的 18883 端口映射到容器的 80 端口，同时还在配置一个在容器运行前需要执行的 npm run build构建脚本。

配置在启动 Docker 容器（名为 test-container-02）之前，自动执行一个 NPM 脚本（这里是 build）来构建项目。左侧的配置界面中，"执行前"区域被展开，并选中了"添加新任务 -> 运行 npm 脚本"；右侧弹出的"NPM 脚本"设置窗口则具体指定了要运行的脚本是 build。

6.构建镜像

说明：点击运行后，项目会先完成打包，打包完成后执行镜像构建任务，镜像构建成功后自动创建容器。

7.Web 应用访问地址

说明：http://localhost:18883/#/