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 實踐奠定堅實基礎。