前端monorepo应用容器化部署全指南： Docker-compose 一键打包部署项目

随着云计算和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)
• 在docker上拉取docker-compose

docker pull docker-compose

• 创建好一个monorepo项目

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

2. 编写基础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/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露80端口
EXPOSE 80

# 启动Nginx
CMD ["nginx", "-g", "daemon off;"]

2. 编写基础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 / {
            alias /usr/share/nginx/html;
            index index.html;
            try_files $uri $uri/ /index.html;
        }
}

3.编写docker-compose.yml文件

services:
  zxt-web-mobile:
    build:
      context: .
      dockerfile: apps/zxt-web-mobile/Dockerfile
    ports:
      - "8000:80"

    ruoyi-vue3:
       build:
         context: ./apps/ruoyi-vue3  # 相对路径更可靠
         dockerfile: Dockerfile
       ports:
         - "3000:80"

4. 构建和运行容器

运行docker-compose：

bash
docker-compose up

访问http://localhost:300/即可查看部署的前端应用。