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

---

前言

项目为前端 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 容器

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 版本

docker version

3.查看Docker 服务状态

# 检查 Docker 服务状态
docker info

4.在项目中创建Dockerfile

前提：项目的准备工作都完事了，比如：package、build命令配置等
创建基础Dockfile文件，至于名字可以可以直接叫：Dockfile

配置信息看config文件

## ============================
## 前端项目 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;"]

优化版

## ============================
## 优化版 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="[e-mail]" \version="1.0" \description="${APP_NAME}"EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

5.创建必要的配置文件

创建 nginx 配置

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

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：

# 依赖
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命令，分开输入看注释，还有名字是镜像的名字，自己定义

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

7.测试运行

# 运行容器
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

剩下属于远程服务部分