vault backup: 2026-05-27 22:18:59

2026-05-27 22:18:59 +08:00
parent 68cb4c393f
commit d09524a6b2
4 changed files with 550 additions and 0 deletions
@@ -0,0 +1,95 @@
+---
+tags:
+  - CI/CD
+  - Slidev
+  - Docker
+  - Nginx
+  - Gitea Actions
+create time: 2026-05-27 19:30
+---
+
+# CICD 在 Slidev 中的应用
+
+## 概述
+
+本文档记录使用 Gitea Actions 实现 Slidev 演示文稿项目的自动化构建与部署流程：代码推送到 `main` 分支后自动构建所有 deck，并将产物部署到基于 Docker 的 Nginx 容器。
+
+> [!TIP] 本文件夹包含以下子文档：
+> - [[CICD 在 Slidev 中的应用/workflow-configuration]] — Workflow YAML 逐块详解（触发条件、运行环境、依赖管理）
+> - [[CICD 在 Slidev 中的应用/deployment-strategy]] — 部署架构深入分析（DooD 模式、Nginx 运作、设计决策）
+> - [[CICD 在 Slidev 中的应用/Docker-in-Container 部署模式详解]] — DooD vs SID vs DinD vs Kaniko 方案对比
+
+## 项目背景
+
+本项目是一个基于 [Slidev](https://sli.dev/) 的多 deck 演示文稿平台，使用 Markdown 编写幻灯片内容。项目中包含多个独立的演示文稿（每个称为一个 **deck**），统一由 `index.html` 的 landing page 进行导航分发。
+
+**技术栈选型：**
+
+| 组件 | 选择 | 理由 |
+|------|------|------|
+| 演示文稿框架 | Slidev | Markdown + Vue 驱动，适合技术分享场景 |
+| 代码托管 | Gitea（自部署） | 团队内部私有实例，支持 Actions 兼容语法 |
+| CI/Runner | Gitea Act Runner（阿里云） | 自建 runner，避免公有 cloud runner 的配额限制 |
+| 构建工具 | pnpm + Slidev build | 多 deck 批量构建，输出纯静态站点 |
+| 部署方式 | Docker DooD + Nginx Alpine | 无状态部署，每次重建保证干净环境 |
+
+**为什么需要 CI/CD？**
+
+Slidev 的演示文稿本质是静态站点，传统手动部署流程为：本地 `build` → 拷贝文件到服务器 → 重启 Nginx。这种方式的痛点在于：
+
+- **人工遗漏**：新增 deck 后忘记重新构建或遗漏文件复制
+- **环境不一致**：本地构建产物可能在服务器上因依赖版本差异出现问题
+- **协作困难**：多人同时修改不同 deck 时无法自动化集成
+
+通过 Gitea Actions + Docker 实现自动化后，开发者只需关注 `.md` 内容的编写和提交，构建、部署全流程自动完成——**push 即上线**。
+
+## 正文
+
+### CI/CD 流水线概览
+
+对于一个 Slidev 项目，典型的发布流程可以拆解为以下几个阶段：
+
+```mermaid
+flowchart LR
+    A["📝 push 到 main"] --> B["Gitea Actions 触发"]
+    B --> C["安装系统依赖"]
+    C --> D["检出代码"]
+    D --> E["安装 pnpm + 项目依赖"]
+    E --> F["构建 slides"]
+    F --> G["启动 Nginx 容器"]
+    G --> H["复制产物到容器"]
+    H --> I["网站上线"]
+```
+
+### 架构总览
+
+```mermaid
+graph TB
+    subgraph "本地开发"
+        DEV["开发者\n编辑 .md"] --> PUSH["git push → main"]
+    end
+
+    subgraph "Gitea Runner (阿里云)"
+        ACTION["Gitea Actions Runner"]
+        BUILD["node:22-alpine 容器\n构建 slides → dist/"]
+    end
+
+    subgraph "宿主机 Docker"
+        NGINX["slides-nginx 容器\n8080 → 80"]
+        HTML["/usr/share/nginx/html/\n← dist/ 内容"]
+    end
+
+    USER["访客浏览器"]
+    PUSH --> ACTION
+    ACTION --> BUILD
+    BUILD --> COPY["docker cp"]
+    COPY --> NGINX
+    NGINX --> HTML
+    NGINX --> USER
+```
+
+## 关联笔记
+
+- [[CICD 在 Slidev 中的应用/workflow-configuration]]
+- [[CICD 在 Slidev 中的应用/deployment-strategy]]
+- [[CICD 在 Slidev 中的应用/Docker-in-Container 部署模式详解]]