目录

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
哟哟耶耶2 小时前
npm-npm init与npm init -y区别与作用(初始化一个新的node.js项目)
前端·npm·node.js
reddingtons6 小时前
在 Ubuntu 下通过 Docker 部署 Nginx 服务器
服务器·ubuntu·docker
大得3696 小时前
宝塔docker切换存储目录
java·docker·eureka
计算机毕设定制辅导-无忧学长7 小时前
HTML 新手入门:从零基础到搭建第一个静态页面(二)
前端·javascript·html
luckyext7 小时前
Postman用JSON格式数据发送POST请求及注意事项
java·前端·后端·测试工具·c#·json·postman
1 Byte7 小时前
Centos7使用docker搭建redis集群
redis·docker·容器·redis集群搭建
烛阴8 小时前
JavaScript 函数对象与 NFE:你必须知道的秘密武器!
前端·javascript
px52133448 小时前
Solder leakage problems and improvement strategies in electronics manufacturing
java·前端·数据库·pcb工艺
eli9608 小时前
node-ddk,electron 开发组件
前端·javascript·electron·node.js·js