前端应用容器化部署全指南：Docker+monorepo+vue+uniapp

随着云计算和DevOps的普及，容器化技术已成为现代前端开发不可或缺的一部分。本文将全面介绍如何使用Docker进行前端应用的容器化部署，从基础概念到高级优化策略，帮助开发者构建高效、可靠的前端部署流程。

一、为什么选择Docker部署前端应用？

在传统的前端部署方式中，开发者常常面临环境不一致、依赖冲突和部署复杂等问题。Docker通过容器化技术解决了这些痛点，为前端部署带来了显著优势：

1. 环境一致性：Docker容器确保了开发、测试和生产环境的一致性，消除了"在我机器上能运行"的问题

2. 快速部署与扩展：容器化的前端应用可以秒级启动，轻松实现水平扩展

3. 资源隔离与安全：每个容器运行在隔离的环境中，提高了安全性并避免了资源冲突

4. 简化CI/CD流程：容器镜像作为标准化的交付物，可以无缝集成到各种CI/CD管道中

5. 多版本共存：不同版本的前端应用可以以容器形式共存，便于灰度发布和A/B测试

二、基础Docker部署流程

1. 准备工作

在开始Docker化前端应用前，需要确保：

• 项目已完成基础开发并通过本地测试
• 已安装Docker Desktop或Docker Engine
• 了解项目构建命令(如npm run build)和构建输出目录(通常是/dist或/build)
• 有一个monorepo项目 项目目录

├── Dockerfile
├── .dockerignore
├── nginx.conf
├── pnpm-lock.yaml
├── package.json
├── turbo.json
├── .npmrc
├── pnpm-workspace.yaml
├── .gitignore
├── README.md
├── apps/
│   ├── ruoyi-vue3/
│   │   ├──src
│   │   ├── package.json
│   └── zxt-web-mobile/
│       ├──src
│       ├── package.json
├── packages/ 
│   ├── utils/
│   │   ├── fun.ts
│   │   ├── index.ts
│   │   └── package.json
│   ├── ui/
│   │   ├── index.ts
│   │   ├── package.json
│   │   └── components
├── .turbo/
├── .git/
├── .vscode/
├── .aliyun/

2. 编写基础Dockerfile

再monorepo项目的根目录中新建dockerfile文件
一个典型的前端Dockerfile包含以下核心指令：

# 使用官方Node镜像作为构建环境
FROM node:18-alpine as builder

# 设置工作目录
WORKDIR /app

# 复制源代码
COPY . .

# 安装依赖
RUN npm install pnpm -g
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile

# 执行构建
RUN pnpm build

# 使用Nginx作为生产服务器
FROM nginx:alpine

# 从构建阶段复制静态文件
COPY --from=builder /app/apps/ruoyi-vue3/dist /usr/share/nginx/html/vue
COPY --from=builder /app/apps/zxt-web-mobile/dist/build/h5 /usr/share/nginx/html/uniapp
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露80端口
EXPOSE 80

3. 编写基础nginx.conf

server {
    listen       80;

    server_name  localhost;

    proxy_set_header X-Forward-For  $proxy_add_x_forwarded_for;
    proxy_set_header Host           $proxy_host;
    proxy_set_header X-Real-IP      $remote_addr;
    proxy_set_header Request-Url    $request_uri;
    client_max_body_size 2048m;
    
	
     location / {
            return 302 /vue;  # 重定向到 /ggz
        }
      location /vue {
            alias /usr/share/nginx/html/vue/;
            index index.html;
            try_files $uri $uri/ /vue/index.html;
        }
    
       location /uniapp {
           alias /usr/share/nginx/html/uniapp/;
           index index.html;
           try_files $uri $uri/ /uniapp/index.html;
       }
}

4.修改项目base路径

/apps/ruoyi-vue3/view.config.js

base: VITE_APP_ENV === 'production' ? '/vue/' : '/',

/apps/zxt-web-mobile/view.config.js

base: '/uniapp/',

5. 构建和运行容器

构建Docker镜像：

bash
docker build -t my-frontend-app .

运行容器：

bash
docker run -d --name my-frontend-app -p 8080:80 my-frontend-app

访问http://localhost:8080/vue或者http://localhost:8080/uniapp 即可查看部署的前端应用。
即可查看部署的前端应用。

这个Dockerfile采用了多阶段构建模式，第一阶段使用Node环境构建应用，第二阶段使用轻量级的Nginx镜像提供服务，显著减小了最终镜像体积。

6. 遇到白屏问题

补充两点需要注意得点
1、页面请求静态文件static路径错误

# 补充nginx.conf文件
server {
    listen       80;

    server_name  localhost;

    proxy_set_header X-Forward-For  $proxy_add_x_forwarded_for;
    proxy_set_header Host           $proxy_host;
    proxy_set_header X-Real-IP      $remote_addr;
    proxy_set_header Request-Url    $request_uri;
    client_max_body_size 2048m;

	    location /uniapp {
	        alias /usr/share/nginx/html/uniapp/;
            index index.html;
            try_files $uri $uri/ /uniapp/index.html;
	    }

        location /static/ {
            alias /usr/share/nginx/html/uniapp/static/;
        }

        location /assets/ {
            alias /usr/share/nginx/html/uniapp/assets/;
        }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

2、修改manifest.json文件得template和router

# manifest.json
 "h5": {
        "template": "index.html",
        "router": {
            "mode": "history",
            "base": "/uniapp"
        },
        "sdkConfigs": {
            "maps": {
                "qqmap" : {
                    "key" : ""
                }
            }
        },
        "async": {
            "timeout": 20000
        },
        "uniStatistics": {
            "enable": true
        },
        "devServer": {
            "port": 80,
            "https": false
        }
    },

结语

Docker为前端开发带来了革命性的部署体验，从简单的静态站点到复杂的单页应用，容器化都能提供一致、可靠的运行环境。通过本文介绍的基础部署到高级优化策略，开发者可以构建出高效、安全的前端部署流程。随着云原生技术的不断发展，前端容器化将会变得更加简单和强大，成为现代Web开发的标准实践。