使用 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,以提升部署效率和系统稳定性。

相关推荐
白云千载尽2 分钟前
docker入门篇
运维·docker·容器
最懒的菜鸟3 分钟前
CentOS 系统安装 docker 以及常用插件
docker·eureka·centos
王军新6 分钟前
Docker基础知识介绍
运维·docker·容器
不能只会打代码12 分钟前
六十天前端强化训练之第二十天React Router 基础详解
前端·react.js·前端框架·react router 基础
Bigger20 分钟前
async/await 必须使用 try/catch 吗?
前端·监控·promise
Bigger21 分钟前
终端美化神器——打造高颜值命令行输出
前端·node.js·命令行
Moshow郑锴33 分钟前
基于SpringBoot3+Druid数据库连接池与外部PostgreSQL的Kubernetes Pod YAML全解析
数据库·容器·kubernetes
Hooray39 分钟前
【Fantastic-admin 技术揭秘】页面组件刷新
前端·vue.js
好_快44 分钟前
Lodash源码阅读-isKey
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-isStrictComparable
前端·javascript·源码阅读