feat(docker): 添加完整的 Docker 构建支持

- 重构 Dockerfile 支持本地完整源码构建流程 - 添加 CI 专用的 Dockerfile.ci 使用预构建产物 - 创建 .dockerignore 和 .dockerignore.ci 文件优化构建上下文 - 添加 build-docker.sh 和 build-docker.bat 本地构建脚本 - 更新 GitHub Actions 工作流支持 Node.js 环境和 pnpm 依赖管理 - 添加 DOCKER.md 详细说明文档 - 优化 nginx 配置和端口暴露设置
2026-05-11 23:45:11 +08:00 · 2026-01-08 17:13:46 +08:00
parent 21cf5762d2
commit d9c708e0ca
8 changed files with 279 additions and 13 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,31 @@
+# 排除不需要的文件和目录，减少 Docker 构建上下文大小
+
+# 开发工具
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Git
+.git/
+.gitignore
+
+# 构建产物（本地构建时会重新生成）
+docs/
+pkg/
+
+# 临时文件
+*.tmp
+*.temp
+.DS_Store
+Thumbs.db
+
+# CI 相关文件
+.github/
+Dockerfile.ci
+
+# 其他不需要的目录
+android/app/build/
+android/.gradle/
+resources/
+electron/dist/
--- a/.dockerignore.ci
+++ b/.dockerignore.ci
@@ -0,0 +1,38 @@
+# CI 构建专用的 dockerignore
+# 只保留构建产物和必要的配置文件
+
+# 排除所有源代码和开发文件
+src/
+public/
+electron/
+node_modules/
+.vscode/
+.idea/
+.git/
+.github/
+
+# 排除构建工具配置
+vite.config.ts
+tsconfig*.json
+*.config.js
+*.config.ts
+package.json
+package-lock.json
+pnpm-lock.yaml
+
+# 排除其他构建产物
+pkg/
+android/
+resources/
+
+# 排除临时文件
+*.tmp
+*.temp
+.DS_Store
+Thumbs.db
+*.log
+
+# 只保留以下文件：
+# - docs/ (构建产物)
+# - nginx.conf (nginx配置)
+# - Dockerfile.ci
--- a/.github/workflows/ogame-vue-ts.yml
+++ b/.github/workflows/ogame-vue-ts.yml
@@ -1,4 +1,4 @@
-name: Docker 多架构构建并发布
+name: 构建并发布 Docker 镜像

 on:
  push:
@@ -19,6 +19,41 @@ jobs:
        with:
          fetch-depth: 0

+      # 设置 Node.js 环境
+      - name: 设置 Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      # 设置 pnpm
+      - name: 设置 pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      # 缓存 pnpm 依赖
+      - name: 缓存 pnpm 依赖
+        uses: actions/cache@v4
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+
+      # 安装依赖
+      - name: 安装依赖
+        run: pnpm install
+
+      # 构建项目
+      - name: 构建项目
+        run: pnpm run build
+
+      # 准备 CI 构建环境
+      - name: 准备 CI 构建环境
+        run: |
+          # 使用 CI 专用的 dockerignore
+          cp .dockerignore.ci .dockerignore
+
      # QEMU 用于支持多架构构建（必须）
      - name: 设置 QEMU
        uses: docker/setup-qemu-action@v3
@@ -43,11 +78,12 @@ jobs:
          username: ${{ vars.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

-      # 真正一键构建 + 推送多架构镜像（amd64 + arm64）
+      # 构建并推送多架构镜像（使用构建产物）
      - name: 构建并推送多架构镜像
        uses: docker/build-push-action@v6
        with:
          context: .
+          file: ./Dockerfile.ci
          platforms: linux/amd64,linux/arm64
          push: true
          tags: |
@@ -58,4 +94,3 @@ jobs:
          cache-from: type=gha
          cache-to: type=gha,mode=max
          outputs: type=image,name=target,annotation-index.org.opencontainers.image.description=OGame Vue Ts
-          no-cache: true
--- a/DOCKER.md
+++ b/DOCKER.md
@@ -0,0 +1,89 @@
+# Docker 构建说明
+
+本项目支持两种 Docker 构建方式：
+
+## 🏠 本地构建
+
+### 方式一：使用构建脚本（推荐）
+
+**Linux/macOS:**
+```bash
+chmod +x build-docker.sh
+./build-docker.sh
+```
+
+**Windows:**
+```cmd
+build-docker.bat
+```
+
+### 方式二：直接使用 Docker 命令
+
+```bash
+# 构建镜像
+docker build -t ogame-vue-ts:local .
+
+# 运行容器
+docker run -p 8080:80 ogame-vue-ts:local
+```
+
+## ☁️ GitHub Actions 自动构建
+
+当代码推送到 `main` 分支或创建 tag 时，GitHub Actions 会自动：
+
+1. 在 Actions 环境中构建项目
+2. 使用构建产物创建 Docker 镜像
+3. 推送到 GitHub Container Registry 和 Docker Hub
+
+### 使用预构建镜像
+
+```bash
+# 从 GitHub Container Registry 拉取
+docker pull ghcr.io/your-username/ogame-vue-ts:latest
+
+# 从 Docker Hub 拉取（如果配置了）
+docker pull your-dockerhub-username/ogame-vue-ts:latest
+
+# 运行
+docker run -p 8080:80 ghcr.io/your-username/ogame-vue-ts:latest
+```
+
+## 📁 文件说明
+
+- `Dockerfile` - 本地构建用，包含完整的源代码构建流程
+- `Dockerfile.ci` - GitHub Actions 构建用，使用预构建产物
+- `.dockerignore` - 本地构建时排除的文件
+- `.dockerignore.ci` - CI 构建时排除的文件
+- `build-docker.sh` / `build-docker.bat` - 本地构建便捷脚本
+
+## 🔧 配置说明
+
+### GitHub Actions 环境变量
+
+需要在 GitHub 仓库设置中配置：
+
+**Variables (公开):**
+- `DOCKERHUB_USERNAME` - Docker Hub 用户名（可选）
+
+**Secrets (私密):**
+- `DOCKERHUB_TOKEN` - Docker Hub 访问令牌（可选）
+- `GITHUB_TOKEN` - 自动提供，用于 GHCR
+
+### 本地构建要求
+
+- Docker
+- 足够的磁盘空间（构建过程中会下载 Node.js 依赖）
+
+## 🚀 快速开始
+
+1. **本地开发测试:**
+   ```bash
+   ./build-docker.sh
+   docker run -p 8080:80 ogame-vue-ts:local
+   ```
+
+2. **访问应用:**
+   打开浏览器访问 `http://localhost:8080`
+
+3. **生产部署:**
+   使用 GitHub Actions 自动构建的镜像进行部署
--- a/38
+++ b/38
@@ -1,22 +1,40 @@
-FROM node:lts-alpine AS builder
+# 本地构建用的 Dockerfile
+# 支持完整的源代码构建流程

-RUN mkdir -p /workspace
-WORKDIR /workspace
-RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories
-RUN apk update && apk add git
-RUN npm config set registry https://registry.npmmirror.com
-RUN git clone https://github.com/setube/ogame-vue-ts.git
-RUN mv ./ogame-vue-ts/* . ; rm -rf ./ogame-vue-ts/
+FROM node:20-alpine AS builder

-RUN npm install -g pnpm ; pnpm install;
+# 设置工作目录
+WORKDIR /app
+
+# 复制 package 文件
+COPY package.json pnpm-lock.yaml ./
+
+# 安装 pnpm
+RUN npm install -g pnpm
+
+# 安装依赖
+RUN pnpm install --frozen-lockfile
+
+# 复制源代码
+COPY . .
+
+# 构建项目
 RUN pnpm run build

+# 生产阶段
 FROM nginx:alpine

+# 复制 nginx 配置文件
 COPY nginx.conf /etc/nginx/conf.d/default.conf

+# 清理默认的 nginx 静态文件
 RUN rm -rf /usr/share/nginx/html/*
-COPY --from=builder /workspace/docs /usr/share/nginx/html

+# 复制构建产物到 nginx 静态文件目录
+COPY --from=builder /app/docs /usr/share/nginx/html
+
+# 暴露端口
 EXPOSE 80
+
+# 启动 nginx
 CMD ["nginx", "-g", "daemon off;"]
--- a/Dockerfile.ci
+++ b/Dockerfile.ci
@@ -0,0 +1,20 @@
+# GitHub Actions 构建用的 Dockerfile
+# 使用预构建的产物，不包含源代码构建过程
+
+FROM nginx:alpine
+
+# 复制 nginx 配置文件
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# 清理默认的 nginx 静态文件
+RUN rm -rf /usr/share/nginx/html/*
+
+# 复制构建产物到 nginx 静态文件目录
+# 这里的 docs 目录是在 GitHub Actions 中构建生成的
+COPY docs /usr/share/nginx/html
+
+# 暴露端口
+EXPOSE 80
+
+# 启动 nginx
+CMD ["nginx", "-g", "daemon off;"]
--- a/build-docker.bat
+++ b/build-docker.bat
@@ -0,0 +1,17 @@
+@echo off
+REM 本地 Docker 构建脚本 (Windows)
+REM 使用完整的源代码构建流程
+
+echo 🚀 开始本地 Docker 构建...
+
+REM 构建镜像
+docker build -t ogame-vue-ts:local .
+
+if %ERRORLEVEL% EQU 0 (
+    echo ✅ Docker 镜像构建成功！
+    echo 📦 镜像标签: ogame-vue-ts:local
+    echo 🏃 运行命令: docker run -p 8080:80 ogame-vue-ts:local
+) else (
+    echo ❌ Docker 镜像构建失败！
+    exit /b 1
+)
--- a/build-docker.sh
+++ b/build-docker.sh
@@ -0,0 +1,18 @@
+#!/bin/bash
+
+# 本地 Docker 构建脚本
+# 使用完整的源代码构建流程
+
+echo "🚀 开始本地 Docker 构建..."
+
+# 构建镜像
+docker build -t ogame-vue-ts:local .
+
+if [ $? -eq 0 ]; then
+    echo "✅ Docker 镜像构建成功！"
+    echo "📦 镜像标签: ogame-vue-ts:local"
+    echo "🏃 运行命令: docker run -p 8080:80 ogame-vue-ts:local"
+else
+    echo "❌ Docker 镜像构建失败！"
+    exit 1
+fi