【Docker】在项目中如何实现Dockerfile 文件编写

前言
[一、Dockerfile是什么？Docker 和 Dockerfile 的关系](#一、Dockerfile是什么？Docker 和 Dockerfile 的关系)
- 官网地址
- Docker是什么？Dockerfile又是什么？
- [Dockerfile 与 Docker 的关系](#Dockerfile 与 Docker 的关系)
- [传统部署 vs Docker 部署](#传统部署 vs Docker 部署)
二、实现步骤
- [1.本地安装docker（Docker Desktop ）](#1.本地安装docker（Docker Desktop ）)
- [2.查看Docker 版本](#2.查看Docker 版本)
- [3.查看Docker 服务状态](#3.查看Docker 服务状态)
- 4.在项目中创建Dockerfile
- 5.创建必要的配置文件
- - [创建 nginx 配置](#创建 nginx 配置)
  - [创建 .dockerignore 文件](#创建 .dockerignore 文件)
- 6.构建镜像
- 7.测试运行

前言

项目为前端 React18、node v18.20.5

以此为例展开对Dockerfile的介绍与实现

注意：细节不多，主要是实践干货

提示：以下是本篇文章正文内容，下面案例可供参考

一、Dockerfile是什么？Docker 和 Dockerfile 的关系

官网地址

Docker 官方文档首页： https://docs.docker.com/

Dockerfile 参考手册： https://docs.docker.com/reference/dockerfile/

Docker 入门指南： https://docs.docker.com/get-started/

Docker是什么？Dockerfile又是什么？

概念	比喻	作用
Docker	集装箱运输系统	提供构建、运输和运行容器的平台和工具
Dockerfile	集装箱建造说明书	集装箱建造说明书

Dockerfile 将应用及其所有依赖（操作系统、运行时、库、环境变量、配置）一起打包成一个镜像。这个镜像在任何安装了 Docker 的机器上运行的表现都完全一致。真正实现了 "一次构建，处处运行"。
Dockerfile 是一个文本文件，它定义了构建镜像的每一步。构建过程完全自动化，无需人工干预。并且，只要 Dockerfile 内容不变，多次构建产生的镜像就是完全相同的，具有极强的可重复性。

✅主要目的是就是：让所有团队成员环境一致，就算不同项目之间不同的Node版本 + 不同的依赖，也可以互不干扰，可同时运行

Dockerfile 与 Docker 的关系

Docker：容器化平台（引擎）

Dockerfile：构建 Docker 镜像的"配方"或"蓝图"

关系：Dockerfile → Docker 镜像 → Docker 容器

bash 复制代码

Dockerfile (源代码) 
    ↓ (docker build)
Docker 镜像 (可执行包) 
    ↓ (docker run) 
Docker 容器 (运行实例)

传统部署 vs Docker 部署

传统：安装Node → 配置环境 → 安装依赖 → 构建 → 配置Web服务器

Docker：docker build && docker run

二、实现步骤

1.本地安装docker（Docker Desktop ）

docker官网地址：https://www.docker.com/

步骤不做介绍，mac电脑安装过快没有参考性

然后就是登录Docker账号，这边可以登录GitHub账号，主要方便看docker镜像安装情况

2.查看Docker 版本

bash 复制代码

docker version

3.查看Docker 服务状态

bash 复制代码

# 检查 Docker 服务状态
docker info

4.在项目中创建Dockerfile

前提：项目的准备工作都完事了，比如：package、build命令配置等

创建基础Dockfile文件，至于名字可以可以直接叫：Dockfile

配置信息看config文件

bash 复制代码

## ============================
## 前端项目 Dockerfile
## ============================

# 第一阶段：构建阶段
FROM node:20-alpine AS builder

# 设置工作目录
WORKDIR /app

# 复制包管理文件
COPY package.json package-lock.json* ./

# 安装依赖
RUN npm ci --legacy-peer-deps

# 复制源代码
COPY . .

# 构建项目
RUN npm run build

# 第二阶段：运行阶段
FROM nginx:alpine

# 复制构建产物
COPY --from=builder /app/dist /usr/share/nginx/html

# 暴露端口
EXPOSE 80

# 启动 nginx
CMD ["nginx", "-g", "daemon off;"]

优化版

bash 复制代码

## ============================
## 优化版 Dockerfile
## ============================

# 构建参数
ARG NODE_VERSION=20-alpine
ARG NGINX_VERSION=alpine
ARG APP_NAME=frontend-app

# 第一阶段：依赖安装（利用缓存）
FROM node:${NODE_VERSION} AS deps
WORKDIR /app
COPY package.json package-lock.json* ./
RUN npm ci --legacy-peer-deps --only=production

# 第二阶段：构建
FROM node:${NODE_VERSION} AS builder
WORKDIR /app

# 复制 node_modules（利用缓存）
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# 环境变量
ARG BUILD_ENV=prod
ENV NODE_ENV=production

# 构建
RUN npm run build

# 第三阶段：运行
FROM nginx:${NGINX_VERSION} AS runtime

# 安装必要的工具
RUN apk add --no-cache curl

# 复制构建产物
COPY --from=builder /app/dist /usr/share/nginx/html

# 复制 nginx 配置
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf

# 健康检查
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s \
  CMD curl -f http://localhost/ || exit 1

# 标签
LABEL maintainer="your-team@company.com" \
      version="1.0" \
      description="${APP_NAME}"

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

5.创建必要的配置文件

创建 nginx 配置

在项目根目录创建 docker/nginx.conf：

bash 复制代码

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

    # gzip 压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # 前端路由支持
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 健康检查端点
    location /healthz {
        access_log off;
        return 200 "healthy\n";
        add_header Content-Type text/plain;
    }
}

创建 .dockerignore 文件

在项目根目录创建 .dockerignore：

bash 复制代码

# 依赖
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# 构建输出
dist/
build/
.umi/
.umi-production/

# 环境文件
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# 日志
logs
*.log

# IDE
.vscode/
.idea/
*.swp
*.swo

# 系统
.DS_Store
Thumbs.db

# 测试
coverage/
.nyc_output/

# Git
.git/
.gitignore

# 其他
.cache/
.parcel-cache/

6.构建镜像

下面的docker命令，分开输入看注释，还有名字是镜像的名字，自己定义

bash 复制代码

# 基础构建
docker build -t frontend-app:latest .

# 带构建参数的构建
docker build \
  -t frontend-app:prod \
  --build-arg BUILD_ENV=prod \
  --build-arg APP_NAME=frontend-app \
  .

7.测试运行

bash 复制代码

# 运行容器
docker run -d --name frontend -p 8080:80 frontend-app:latest

# 检查运行状态
docker ps
docker logs frontend

# 测试访问
curl http://localhost:8080
# 或在浏览器打开 http://localhost:8080

# 进入容器检查
docker exec -it frontend sh
ls -la /usr/share/nginx/html

剩下属于远程服务部分