1. Docker 基礎概念

1.1 核心組件

組件	描述
鏡像	包含應用及其依賴的只讀模板
容器	鏡像的運行實例
Dockerfile	定義鏡像構建步驟的腳本

1.2 Docker 工作流程

---

2. 環境準備

2.1 安裝 Docker

# 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 驗證安裝

docker --version
docker-compose --version

---

3. 項目配置

3.1 項目結構

my-app/
├── dist/
├── src/
├── package.json
├── Dockerfile
└── docker-compose.yml

3.2 創建 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 構建鏡像

docker build -t my-app .

4.2 運行容器

docker run -d -p 8080:80 my-app

4.3 訪問應用

打開瀏覽器訪問 http://localhost:8080

---

5. 使用 Docker Compose

5.1 創建 docker-compose.yml

version: '3'
services:web:build: .ports:- "8080:80"volumes:- ./dist:/usr/share/nginx/htmlrestart: always

5.2 啟動服務

docker-compose up -d

5.3 查看日志

docker-compose logs -f

---

6. 高級配置

6.1 多階段構建

FROM node:14 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run buildFROM 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 環境變量

ENV NODE_ENV=production

# docker-compose.yml
environment:- NODE_ENV=production

6.3 數據卷

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. 查看日志：

   docker logs <container_id>
   

2. 進入容器：

   docker exec -it <container_id> /bin/sh
   

3. 檢查網絡：

   docker network inspect <network_name>
   

---

9. 擴展閱讀

• Docker 官方文檔
• Dockerfile 最佳實踐
• 前端性能優化指南

---

通過本文的深度解析，開發者可以全面掌握使用 Docker 部署前端項目的方法與技巧。建議結合實際項目需求，合理配置 Docker，以提升部署效率和系統穩定性。