前端项目 Docker 部署指南

大A2025年09月10日约 4 分钟

本文将帮助您使用 Docker 容器化技术部署前端项目。Docker 提供了环境一致性、快速部署和可扩展性，是现代化前端部署的优秀解决方案。

准备工作

1. 安装 Docker

Windows/Mac: 下载 Docker Desktop

Linux: 使用包管理器安装

# Ubuntu/Debian
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io# CentOS/RHEL
sudo yum install docker-ce docker-ce-cli containerd.io
sudo systemctl start docker

2. 验证安装

docker --version
docker-compose --version

项目配置

1. 创建 Dockerfile

在项目根目录创建 Dockerfile：

# 使用官方 Node.js 作为基础镜像
FROM node:18-alpine as builder# 设置工作目录
WORKDIR /app
# 复制 package.json 和 package-lock.json
COPY package*.json ./
# 安装依赖
RUN npm ci --only=production
# 复制源代码
COPY . .
# 构建项目
RUN npm run build
# 使用 Nginx 作为生产服务器
FROM nginx:alpine
# 复制构建文件到 Nginx 服务目录
COPY --from=builder /app/dist /usr/share/nginx/html
# 复制自定义 Nginx 配置（如果有）
# COPY nginx.conf /etc/nginx/conf.d/default.conf
# 暴露端口
EXPOSE80
# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

2. 创建 .dockerignore 文件

node_modules
npm-debug.log
.git
.gitignore
Dockerfile
.dockerignore

3. （可选）创建 nginx.conf 配置文件

server {
    listen 80;
    server_name localhost;    root /usr/share/nginx/html;
    index index.html;
    # 处理 SPA 路由
    location / {
        try_files $uri $uri/ /index.html;
    }
    # 启用 gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

构建和运行

1. 构建 Docker 镜像

# 构建镜像
docker build -t my-frontend-app .# 查看镜像列表
docker images

2. 运行容器

# 运行容器
docker run -d -p 8080:80 --name frontend-container my-frontend-app# 查看运行中的容器
docker ps

3. 访问应用

打开浏览器访问 http://localhost:8080

使用 Docker Compose（推荐）

1. 创建 docker-compose.yml

version:'3.8'services:
frontend:
build:
context:.
dockerfile:Dockerfile
ports:
-"8080:80"
container_name:my-frontend-app
restart:unless-stopped
environment:
-NODE_ENV=production

2. 使用 Docker Compose 管理服务

# 启动服务
docker-compose up -d# 停止服务
docker-compose down
# 查看日志
docker-compose logs -f
# 重新构建并启动
docker-compose up -d --build

多阶段构建优化

对于更复杂的项目，可以使用多阶段构建：

# 第一阶段：依赖安装
FROM node:18-alpine as dependencies
WORKDIR /app
COPY package*.json ./
RUN npm ci# 第二阶段：构建
FROM node:18-alpine as builder
WORKDIR /app
COPY --from=dependencies /app/node_modules ./node_modules
COPY . .
RUN npm run build
# 第三阶段：生产环境
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE80
CMD ["nginx", "-g", "daemon off;"]

环境变量配置

1. 使用环境变量

# 在 Dockerfile 中定义构建时变量
ARG API_URL
ENV VITE_API_URL=${API_URL}

2. 构建时传递变量

docker build --build-arg API_URL=https://api.example.com -t my-app .

3. 运行时环境变量

对于需要在运行时注入的环境变量，可以使用启动脚本：

# 修改 CMD 使用脚本启动
COPY entrypoint.sh /
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

创建 entrypoint.sh：

#!/bin/sh
# 替换环境变量占位符
sed -i "s|__API_URL__|${API_URL}|g" /usr/share/nginx/html/js/*.js# 启动 Nginx
exec nginx -g 'daemon off;'

最佳实践

使用 Alpine 基础镜像：减小镜像体积
多阶段构建：分离构建环境和运行环境
使用 .dockerignore：避免不必要的文件被复制
指定版本标签：避免使用 latest 标签
优化层缓存：将不经常变化的操作放在前面

常见问题排查

# 查看容器日志
docker logs frontend-container# 进入容器调试
docker exec -it frontend-container sh
# 查看容器资源使用情况
docker stats frontend-container
# 检查镜像层
docker history my-frontend-app

持续集成/持续部署（CI/CD）集成

GitHub Actions 示例

name:DeploytoDockerHubon:
push:
branches:[main]
jobs:
build-and-push:
runs-on:ubuntu-latest
steps:
-uses:actions/checkout@v3

-name:BuildandpushDockerimage
uses:docker/build-push-action@v4
with:
context:.
push:true
tags:username/my-frontend-app:latest

总结

通过 Docker 部署前端项目，您可以获得：

环境一致性
快速部署和回滚
资源隔离
易于扩展

本指南涵盖了从基础配置到高级优化的各个方面，帮助您建立高效的前端 Docker 部署流程。