
文章目录
-
- [1. Docker 基础概念](#1. Docker 基础概念)
-
- [1.1 核心组件](#1.1 核心组件)
- [1.2 Docker 工作流程](#1.2 Docker 工作流程)
- [2. 环境准备](#2. 环境准备)
-
- [2.1 安装 Docker](#2.1 安装 Docker)
- [2.2 验证安装](#2.2 验证安装)
- [3. 项目配置](#3. 项目配置)
-
- [3.1 项目结构](#3.1 项目结构)
- [3.2 创建 Dockerfile](#3.2 创建 Dockerfile)
- [4. 构建与运行](#4. 构建与运行)
-
- [4.1 构建镜像](#4.1 构建镜像)
- [4.2 运行容器](#4.2 运行容器)
- [4.3 访问应用](#4.3 访问应用)
- [5. 使用 Docker Compose](#5. 使用 Docker Compose)
-
- [5.1 创建 docker-compose.yml](#5.1 创建 docker-compose.yml)
- [5.2 启动服务](#5.2 启动服务)
- [5.3 查看日志](#5.3 查看日志)
- [6. 高级配置](#6. 高级配置)
-
- [6.1 多阶段构建](#6.1 多阶段构建)
- [6.2 环境变量](#6.2 环境变量)
- [6.3 数据卷](#6.3 数据卷)
- [7. 最佳实践建议](#7. 最佳实践建议)
-
- [7.1 镜像优化](#7.1 镜像优化)
- [7.2 安全建议](#7.2 安全建议)
- [8. 常见问题与解决方案](#8. 常见问题与解决方案)
-
- [8.1 问题列表](#8.1 问题列表)
- [8.2 调试技巧](#8.2 调试技巧)
- [9. 扩展阅读](#9. 扩展阅读)
1. Docker 基础概念
1.1 核心组件
组件 | 描述 |
---|---|
镜像 | 包含应用及其依赖的只读模板 |
容器 | 镜像的运行实例 |
Dockerfile | 定义镜像构建步骤的脚本 |
1.2 Docker 工作流程
编写 Dockerfile 构建镜像 运行容器 访问应用
2. 环境准备
2.1 安装 Docker
bash
# Ubuntu
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io
# CentOS
sudo yum install -y yum-utils
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
sudo yum install docker-ce docker-ce-cli containerd.io
# macOS
brew install --cask docker
2.2 验证安装
bash
docker --version
docker-compose --version
3. 项目配置
3.1 项目结构
bash
my-app/
├── dist/
├── src/
├── package.json
├── Dockerfile
└── docker-compose.yml
3.2 创建 Dockerfile
dockerfile
# 使用官方 Node.js 镜像作为基础镜像
FROM node:14 as build-stage
# 设置工作目录
WORKDIR /app
# 复制 package.json 和 package-lock.json
COPY package*.json ./
# 安装依赖
RUN npm install
# 复制项目文件
COPY . .
# 构建项目
RUN npm run build
# 使用 Nginx 镜像作为运行环境
FROM nginx:stable-alpine as production-stage
# 复制构建结果到 Nginx 目录
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 暴露端口
EXPOSE 80
# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]
4. 构建与运行
4.1 构建镜像
bash
docker build -t my-app .
4.2 运行容器
bash
docker run -d -p 8080:80 my-app
4.3 访问应用
打开浏览器访问 http://localhost:8080
5. 使用 Docker Compose
5.1 创建 docker-compose.yml
yaml
version: '3'
services:
web:
build: .
ports:
- "8080:80"
volumes:
- ./dist:/usr/share/nginx/html
restart: always
5.2 启动服务
bash
docker-compose up -d
5.3 查看日志
bash
docker-compose logs -f
6. 高级配置
6.1 多阶段构建
dockerfile
FROM node:14 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
6.2 环境变量
dockerfile
ENV NODE_ENV=production
yaml
# docker-compose.yml
environment:
- NODE_ENV=production
6.3 数据卷
yaml
volumes:
- ./dist:/usr/share/nginx/html
7. 最佳实践建议
7.1 镜像优化
- 使用轻量级基础镜像 :如
alpine
版本 - 减少层数:合并 RUN 指令
- 清理缓存:删除不必要的文件
7.2 安全建议
- 非 root 用户运行:提高安全性
- 限制资源使用:防止资源耗尽
- 定期更新镜像:修复安全漏洞
8. 常见问题与解决方案
8.1 问题列表
问题 | 原因 | 解决方案 |
---|---|---|
构建失败 | 依赖问题 | 检查 package.json |
容器无法启动 | 端口冲突 | 更改端口映射 |
访问失败 | 网络配置问题 | 检查防火墙设置 |
8.2 调试技巧
-
查看日志 :
bashdocker logs <container_id>
-
进入容器 :
bashdocker exec -it <container_id> /bin/sh
-
检查网络 :
bashdocker network inspect <network_name>
9. 扩展阅读
通过本文的深度解析,开发者可以全面掌握使用 Docker 部署前端项目的方法与技巧。建议结合实际项目需求,合理配置 Docker,以提升部署效率和系统稳定性。