1. 概述

• Docker Desktop 是 Docker 官方为 Windows 与 macOS 提供的集成开发环境，内置 Docker Engine、Docker CLI、Docker Compose、Kubernetes 与资源管理界面。它通过 WSL 2（Windows）或 HyperKit（macOS）实现轻量级虚拟化，允许在本地一键构建、运行、调试 Linux 或 Windows 容器。安装后，镜像与容器在各用户间共享，支持代理、资源限额、自动更新及扩展插件，是个人开发者和小团队进行容器化开发、测试与学习的首选工具。

2. 下载

• 下载网址：https://docs.docker.com/desktop/setup/install/windows-install/
  

• 将Docker Desktop for Windows - x86_64下载到本地
  

3. 安装

• 双击安装程序图标进入向导，等待几分钟，安装完成
  

4. 注册

• 启动Docker Desktop
  
• 单击【Create an account】按钮，进入注册页面
  
• 输入个人注册信息
  
• 单击【Sign up】按钮，注册成功，跳转到登录页面
  

5. 登录

• 输入用户名
  
• 单击【Continue】按钮，输入密码
  
• 单击【Continue】按钮，登录成功
  

6. 启动

• 单击【Proceed to Docker Desktop】按钮，报错说WSL需要更新
  
• 执行命令：wsl --update，更新WSL
  
• 单击【Restart】按钮，重新打开Docker Desktop
  

7. 容器

• 容器（Container）是 Docker 中可移植、自包含的运行单元，打包应用及其全部依赖、配置与文件系统，形成镜像的实例化对象。它共享主机操作系统内核，但拥有独立的进程、网络、文件与用户空间，因此启动秒级、资源占用低、环境一致性高。容器可在开发、测试、生产间无差异迁移，实现“一次构建，到处运行”。

8. 运行容器

8.1 运行容器的镜像

• 我们准备用Dockerfile和一个示例应用来创建镜像
  

8.2 获取示例应用

• 执行命令：git clone https://github.com/docker/welcome-to-docker
  
• 执行命令：cd welcome-to-docker
  

8.3 验证Dockerfile文件

• 打开应用目录下的Dockerfile文件
  

8.4 拉取Alpine精简镜像

• 执行命令：docker pull node:22-alpine，拉取官方Node.js v22的Alpine精简镜像
  
• 输入用户名：huawei2025
  
• 输入密码，注意，屏幕并不回显密码
  
• 执行命令：winget install GnuWin32.Grep （Windows 11 已内置winget）
  
• 配置环境变量（C:\Program Files (x86)\GnuWin32\bin）
  
• 于是可以在任意位置访问grep.exe程序
  
• 重新打开命令行窗口
  
• 执行命令：cd welcome-to-docker，进入应用目录
  
• 执行命令：grep --version，查看grep的版本
  
• 执行命令：docker images | grep node，确认已存在node标签为22-alpine的镜像
  
• 在Docker Desktop窗口，切换到Images选项卡，可以查看拉取的镜像 - node: 22-alpine
  

8.5 创建镜像

• 在应用目录里执行命令：docker build -t welcome-to-docker .
  

• 查看构建的镜像 - welcome-to-docker

8.6 运行容器

• 找到运行容器的按钮
  
• 单击运行按钮，弹出配置窗口
  
• 配置容器名、端口、挂载卷和环境变量
  
• 现在配置：运行一个叫my-welcome-app的容器，把本地D:\howard文件夹挂载到容器内/app/howard，并通过 http://localhost:3000访问它，同时告诉应用“我现在在生产环境运行”。
• 单击【Run】按钮
  

8.7 查看前端

• 访问http://localhost:3000
  

9. 访问静态资源

9.1 本地静态资源

• 在D:\howard里放一张图片docker.png

9.2 创建服务器脚本

• 在应用根目录里创建server.js
  

// server.js
const express = require('express');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 3000;// 把 /app/howard 映射成 /static
app.use('/static', express.static('/app/howard'));// 托管 React 构建产物
app.use(express.static(path.join(__dirname, 'build')));// 兜底路由：所有未匹配的请求都返回 React 的 index.html
app.get('*', (_req, res) => {res.sendFile(path.join(__dirname, 'build', 'index.html'));
});app.listen(PORT, () => {console.log(`Server is listening on port ${PORT}`);
});

9.3 修改Dockerfile文件

• 让它先构建React，再用server.js启动
  

# 构建阶段
FROM node:22-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build# 运行阶段
FROM node:22-alpine
WORKDIR /app
# 安装生产依赖
COPY package*.json ./
RUN npm ci --only=production && npm cache clean --force
# 拷入构建产物和后端脚本
COPY --from=build /app/build ./build
COPY server.js ./EXPOSE 3000
CMD ["node", "server.js"]

9.4 重新构建镜像

• 执行命令：docker build -t welcome-to-docker .
  

9.5 删除容器

• 执行命令：docker rm -f my-welcome-app
  

9.6 运行容器

• 配置运行的容器
  
• 单击【Run】按钮
  

9.7 访问静态资源

• 访问http://localhost:3000/static/docker.png
  

10. 实战小结

• 本次实操在 Windows 11 上成功安装 Docker Desktop，通过 WSL 2 与 Hyper-V 双后端完成 Linux 容器环境搭建。注册并登录 Docker Hub 后，拉取 node:22-alpine 镜像，基于示例应用构建自定义镜像 welcome-to-docker，实现 React 前端与 Express 后端一体化部署。通过挂载本地 D:\howard 目录并映射端口 3000，实现静态资源访问与开发调试。过程中完成 WSL 更新、grep 工具安装及 Dockerfile 多阶段构建优化，验证了“一次构建，到处运行”的容器化优势，为后续微服务与 CI/CD 实践奠定坚实基础。