文章
文章用户商铺专辑快讯圈子网址导航问答程序定制

前端工程师必备：Docker 从入门到实战

一、Docker 基础概念与核心价值

1.1 什么是 Docker？

Docker 是一个开源的应用容器引擎，基于 Go 语言开发，采用 Apache 2.0 协议开源。它允许开发者将应用及其依赖打包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器或 Windows 机器上，也可以实现虚拟化。

Docker 的核心组件：

  • Docker 客户端：用户与 Docker 交互的接口
  • Docker 守护进程：负责构建、运行和分发容器
  • Docker 镜像：只读模板，包含运行应用所需的代码、运行时、库、环境变量和配置文件
  • Docker 容器：镜像的运行实例，包含应用及其运行环境
  • Docker 仓库：存储和分发 Docker 镜像的地方

1.2 为什么前端工程师需要 Docker？

1. 环境一致性

前端开发经常遇到”在我机器上能运行”的问题。Docker 通过容器化技术，确保开发、测试、生产环境完全一致，消除环境差异导致的 bug。

2. 快速部署

Docker 镜像可以在几秒内启动，相比传统虚拟机启动时间（分钟级）有数量级提升，极大提高开发效率。

3. 资源隔离

容器之间相互隔离，互不影响，可以在一台机器上运行多个应用，充分利用硬件资源。

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

Docker 是 CI/CD 流程的核心技术，可以自动化构建、测试、部署流程。

5. 微服务架构

现代前端应用往往采用微服务架构，Docker 是微服务部署的最佳实践。

二、Docker 安装与配置

2.1 不同平台的安装方式

macOS 安装

# 使用 Homebrew 安装
brew install --cask docker

# 或者下载 Docker Desktop for Mac
# https://docs.docker.com/desktop/mac/install/

Windows 安装

# 使用 Chocolatey 安装
choco install docker-desktop

# 或者下载 Docker Desktop for Windows
# https://docs.docker.com/desktop/windows/install/

Linux 安装（Ubuntu）

# 卸载旧版本
sudo apt-get remove docker docker-engine docker.io containerd runc

# 安装依赖
sudo apt-get update
sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

# 添加 Docker 官方 GPG 密钥
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

# 设置稳定版仓库
echo \
  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

# 安装 Docker Engine
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

# 验证安装
sudo docker run hello-world

2.2 配置 Docker

配置镜像加速器（国内用户）

# 创建或修改 /etc/docker/daemon.json
sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": [
    "https://hub-mirror.c.163.com",
    "https://mirror.baidubce.com"
  ]
}
EOF

# 重启 Docker
sudo systemctl daemon-reload
sudo systemctl restart docker

配置用户权限

# 将当前用户加入 docker 组
sudo usermod -aG docker $USER

# 重新登录使配置生效
newgrp docker

三、Docker 核心命令详解

3.1 镜像管理命令

拉取镜像

# 拉取官方镜像
docker pull nginx:latest

# 拉取指定版本
docker pull node:16-alpine

# 从私有仓库拉取
docker pull registry.example.com/myapp:latest

查看镜像

# 查看所有镜像
docker images

# 查看镜像详情
docker inspect nginx:latest

# 查看镜像历史
docker history nginx:latest

删除镜像

# 删除单个镜像
docker rmi nginx:latest

# 强制删除（即使有容器使用）
docker rmi -f nginx:latest

# 删除所有镜像
docker rmi $(docker images -q)

# 删除悬空镜像（无标签）
docker image prune

3.2 容器管理命令

运行容器

# 运行并进入交互模式
docker run -it ubuntu:20.04 /bin/bash

# 后台运行容器
docker run -d --name my-nginx nginx:latest

# 映射端口
docker run -d -p 8080:80 --name my-nginx nginx:latest

# 挂载数据卷
docker run -d -v /host/path:/container/path nginx:latest

# 设置环境变量
docker run -d -e NODE_ENV=production node:16-alpine

# 指定网络
docker run -d --network my-network nginx:latest

查看容器

# 查看运行中的容器
docker ps

# 查看所有容器（包括停止的）
docker ps -a

# 查看容器日志
docker logs my-nginx

# 实时查看日志
docker logs -f my-nginx

# 查看容器资源使用
docker stats my-nginx

容器操作

# 启动容器
docker start my-nginx

# 停止容器
docker stop my-nginx

# 重启容器
docker restart my-nginx

# 进入容器
docker exec -it my-nginx /bin/bash

# 删除容器
docker rm my-nginx

# 强制删除运行中的容器
docker rm -f my-nginx

# 删除所有停止的容器
docker container prune

3.3 网络管理命令

查看网络

# 查看所有网络
docker network ls

# 创建网络
docker network create my-network

# 查看网络详情
docker network inspect bridge

# 删除网络
docker network rm my-network

3.4 数据卷管理命令

创建数据卷

# 创建数据卷
docker volume create my-volume

# 查看数据卷
docker volume ls

# 查看数据卷详情
docker volume inspect my-volume

# 删除数据卷
docker volume rm my-volume

# 删除未使用的数据卷
docker volume prune

四、Dockerfile 详解

4.1 Dockerfile 指令

FROM：指定基础镜像

FROM node:16-alpine

RUN：执行命令

RUN npm install
RUN apt-get update && apt-get install -y curl

COPY：复制文件

COPY package.json package-lock.json ./
COPY src/ ./src/

ADD：复制文件并支持 URL 和解压

ADD https://example.com/file.tar.gz /tmp/

ENV：设置环境变量

ENV NODE_ENV=production
ENV PORT=3000

EXPOSE：暴露端口

EXPOSE 3000

CMD：容器启动命令

CMD ["npm", "start"]

ENTRYPOINT：容器入口点

ENTRYPOINT ["node", "app.js"]

WORKDIR：设置工作目录

WORKDIR /app

USER：指定运行用户

USER node

ARG：构建参数

ARG NODE_VERSION=16
FROM node:${NODE_VERSION}-alpine

4.2 多阶段构建

多阶段构建可以减小最终镜像大小，只包含运行应用所需的文件。

# 第一阶段：构建应用
FROM node:16-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

# 第二阶段：运行应用
FROM node:16-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./
EXPOSE 3000
CMD ["npm", "start"]

4.3 构建优化技巧

1. 利用缓存

# 先复制 package.json 并安装依赖
COPY package.json package-lock.json ./
RUN npm ci

# 再复制源代码
COPY . .

2. 使用 .dockerignore

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

3. 使用多阶段构建

FROM node:16-alpine AS builder
# ... 构建阶段

FROM node:16-alpine
# ... 运行阶段

五、Docker Compose 实战

5.1 docker-compose.yml 配置

基本配置

version: '3.8'

services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development
    volumes:
      - .:/app
      - /app/node_modules
    depends_on:
      - db

  db:
    image: postgres:13
    environment:
      POSTGRES_DB: myapp
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

网络配置

networks:
  app-network:
    driver: bridge

扩展配置

services:
  app:
    # ... 其他配置
    restart: unless-stopped
    deploy:
      resources:
        limits:
          cpus: '0.50'
          memory: 512M
        reservations:
          cpus: '0.25'
          memory: 256M

5.2 Compose 命令

# 启动服务
docker-compose up

# 后台启动
docker-compose up -d

# 停止服务
docker-compose down

# 查看服务状态
docker-compose ps

# 查看日志
docker-compose logs

# 构建镜像
docker-compose build

# 重新构建并启动
docker-compose up --build

# 执行命令
docker-compose exec app npm test

六、前端项目 Docker 化实战

6.1 React 项目 Docker 化

Dockerfile

# 构建阶段
FROM node:16-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html index.htm;

        location / {
            try_files $uri $uri/ /index.html;
        }

        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
}

构建和运行

# 构建镜像
docker build -t my-react-app .

# 运行容器
docker run -d -p 3000:80 --name react-app my-react-app

6.2 Vue 项目 Docker 化

Dockerfile

# 构建阶段
FROM node:16-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
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
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

6.3 Next.js 项目 Docker 化

Dockerfile

FROM node:16-alpine AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci --only=production

FROM node:16-alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN npm run build

FROM node:16-alpine AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["npm", "start"]

七、Docker 在 CI/CD 中的应用

7.1 GitHub Actions 集成

.github/workflows/deploy.yml

name: Deploy to Production

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Set up Docker Buildx
      uses: docker/setup-buildx-action@v2

    - name: Login to Docker Hub
      uses: docker/login-action@v2
      with:
        username: ${{ secrets.DOCKER_USERNAME }}
        password: ${{ secrets.DOCKER_PASSWORD }}

    - name: Build and push
      uses: docker/build-push-action@v4
      with:
        context: .
        push: true
        tags: ${{ secrets.DOCKER_USERNAME }}/my-app:latest

    - name: Deploy to server
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.SERVER_HOST }}
        username: ${{ secrets.SERVER_USERNAME }}
        key: ${{ secrets.SERVER_SSH_KEY }}
        script: |
          docker pull ${{ secrets.DOCKER_USERNAME }}/my-app:latest
          docker stop my-app || true
          docker rm my-app || true
          docker run -d -p 3000:3000 --name my-app ${{ secrets.DOCKER_USERNAME }}/my-app:latest

7.2 GitLab CI/CD 集成

.gitlab-ci.yml

image: docker:20.10.16

services:
  - docker:20.10.16-dind

variables:
  DOCKER_TLS_CERTDIR: "/certs"

stages:
  - build
  - deploy

before_script:
  - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY

build:
  stage: build
  script:
    - docker build -t $CI_REGISTRY_IMAGE:latest .
    - docker push $CI_REGISTRY_IMAGE:latest

deploy:
  stage: deploy
  script:
    - |
      ssh $DEPLOY_SERVER_USER@$DEPLOY_SERVER_HOST << 'EOF'
        docker pull $CI_REGISTRY_IMAGE:latest
        docker stop my-app || true
        docker rm my-app || true
        docker run -d -p 3000:3000 --name my-app $CI_REGISTRY_IMAGE:latest
      EOF
  only:
    - main

八、Docker 安全最佳实践

8.1 镜像安全

使用官方基础镜像

FROM node:16-alpine

定期更新镜像

# 定期拉取最新基础镜像
docker pull node:16-alpine

# 扫描镜像漏洞
docker scan my-app:latest

使用最小化基础镜像

FROM node:16-alpine

8.2 容器安全

以非 root 用户运行

FROM node:16-alpine
RUN addgroup -g 1000 -S nodejs
RUN adduser -S nodejs -u 1000
USER nodejs

限制容器权限

docker run --read-only --tmpfs /tmp my-app

限制资源使用

docker run --memory=512m --cpus=1 my-app

8.3 网络安全

使用自定义网络

docker network create app-network
docker run --network app-network my-app

限制网络访问

docker run --network none my-app

九、Docker 监控与日志

9.1 容器监控

查看容器状态

docker ps
docker stats
docker top my-app

查看资源使用

docker stats --format "table {{.Name}}\t{{.CPUPerc}}\t{{.MemUsage}}"

9.2 日志管理

查看日志

docker logs my-app
docker logs -f my-app
docker logs --tail 100 my-app

日志驱动

docker run --log-driver=json-file --log-opt max-size=10m my-app

9.3 健康检查

Dockerfile 健康检查

HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
  CMD curl -f http://localhost:3000/health || exit 1

查看健康状态

docker inspect --format='{{json .State.Health}}' my-app

十、常见问题与解决方案

10.1 构建问题

缓存失效

# 清除构建缓存
docker builder prune

# 强制重新构建
docker build --no-cache -t my-app .

构建上下文过大

node_modules
.git
.dockerignore

10.2 运行问题

端口冲突

# 查看端口占用
docker ps
netstat -tulpn | grep :3000

# 停止占用端口的容器
docker stop my-app

# 或者使用其他端口
docker run -p 3001:3000 my-app

权限问题

# 修改文件权限
chmod 644 package.json

# 或者使用 --user 参数
docker run --user $(id -u):$(id -g) my-app

10.3 网络问题

容器间通信

# 创建自定义网络
docker network create app-network

# 连接到网络
docker run --network app-network my-app

DNS 解析

# 查看容器 DNS 配置
docker run --rm busybox nslookup google.com

总结

Docker 是现代前端工程师必备的技能之一，它不仅能解决环境一致性问题，还能显著提高开发效率和部署速度。通过本文的学习，你应该掌握了 Docker 的基础概念、核心命令、Dockerfile 编写、Docker Compose 使用，以及如何将前端项目 Docker 化。

在实际工作中，建议：

  1. 所有项目都使用 Docker 进行开发、测试和部署
  2. 编写标准的 Dockerfile 和 docker-compose.yml
  3. 集成到 CI/CD 流程中
  4. 遵循安全最佳实践
  5. 定期更新基础镜像和依赖

随着云原生技术的发展，Docker 的重要性只会越来越强。掌握 Docker 技术，将为你在前端领域的职业发展提供强有力的支持。

版权声明：本文为JienDa博主的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
若内容若侵犯到您的权益，请发送邮件至：platform_service@jienda.com我们将第一时间处理！
所有资源仅限于参考和学习，版权归JienDa作者所有，更多请访问JienDa首页。

给TA赞助
共{{data.count}}人
人已赞助
后端

嵌入式面试核心考点：从 C 语言基础到芯片资源深度剖析

2025-12-19 23:24:38

人工智能

2025年十大AI写小说软件全景盘点：网文作者更文利器

2025-12-4 2:37:17

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

返回顶部