使用 Docker 部署前端项目全攻略

文章目录

    • [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 镜像优化

  1. 使用轻量级基础镜像 :如 alpine 版本
  2. 减少层数:合并 RUN 指令
  3. 清理缓存:删除不必要的文件

7.2 安全建议

  1. 非 root 用户运行:提高安全性
  2. 限制资源使用:防止资源耗尽
  3. 定期更新镜像:修复安全漏洞

8. 常见问题与解决方案

8.1 问题列表

问题 原因 解决方案
构建失败 依赖问题 检查 package.json
容器无法启动 端口冲突 更改端口映射
访问失败 网络配置问题 检查防火墙设置

8.2 调试技巧

  1. 查看日志

    bash 复制代码
    docker logs <container_id>
  2. 进入容器

    bash 复制代码
    docker exec -it <container_id> /bin/sh
  3. 检查网络

    bash 复制代码
    docker network inspect <network_name>

9. 扩展阅读


通过本文的深度解析,开发者可以全面掌握使用 Docker 部署前端项目的方法与技巧。建议结合实际项目需求,合理配置 Docker,以提升部署效率和系统稳定性。

相关推荐
MarkGosling2 分钟前
【开源项目】轻量加速利器 HubProxy 自建 Docker、GitHub 下载加速服务
运维·git·docker·容器·开源·github·个人开发
chanalbert10 分钟前
Docker网络技术深度研究与实战手册
docker·容器·自动化运维
Mintopia10 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
Mintopia11 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js
linux修理工13 分钟前
docker部署zingerbee/netop 轻量级网络流量监控工具
docker
陌小路16 分钟前
5天 Vibe Coding 出一个在线音乐分享空间应用是什么体验
前端·aigc·vibecoding
成长ing1213824 分钟前
cocos creator 3.x shader 流光
前端·cocos creator
Alo36533 分钟前
antd 组件部分API使用方法
前端
BillKu36 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js