菜单

构建和部署系统

相关源文件

本文档详细介绍了 roadmap.sh 项目中使用的构建和部署流程。它涵盖了如何为生产环境构建代码库、部署工作流以及自动化这些流程的持续集成管道。

概述

roadmap.sh 平台使用一套精简的构建和部署系统,从源代码生成静态文件并将其部署到生产服务器。该系统包含几个关键组件:

  1. 构建配置 - 基于 Astro 的构建过程,带有定制配置
  2. 构建脚本 - 用于渲染和准备的自定义脚本
  3. 部署管道 - 用于 EC2 部署的 GitHub Actions 工作流
  4. 缓存 & 优化 - CloudFront 缓存管理和图像优化

来源: package.json7-31 .github/workflows/deployment.yml1-75 astro.config.mjs1-76

构建配置

构建过程以 Astro 为中心,Astro 是一个现代化的静态网站生成器。配置在 astro.config.mjs 中定义,包括站点元数据、重定向、Vite 配置和集成插件的设置。

关键配置要素包括:

  • 输出模式设置为 server 用于服务器端渲染
  • Node 适配器配置用于独立模式
  • 用于交互式组件的 React 集成
  • 通过 Vite 插件集成 Tailwind CSS
  • 带自定义过滤器和序列化的站点地图生成

来源: astro.config.mjs1-76

构建脚本

项目使用了 package.json 文件中定义的几个自定义脚本来辅助构建过程:

脚本目的
build生成生产文件的主构建命令
generate-renderer从 web-draw 仓库生成路线图渲染器
compress:images优化生产图像
generate:roadmap-content-json将路线图内容处理为 JSON 格式
roadmap-content处理路线图内容文件

最重要的构建步骤是路线图渲染器生成,这由 generate-renderer.sh 脚本处理。该脚本:

  1. 克隆 web-draw 仓库(如果尚未存在)
  2. 创建所需的目录
  3. 复制编辑器分发文件和 package.json
  4. 重新安装依赖项以确保编辑器正确配置

来源: package.json7-31 scripts/generate-renderer.sh1-26 scripts/editor-roadmap-content-json.ts1-185

部署管道

部署过程通过 GitHub Actions 自动化,并在 .github/workflows/deployment.yml 文件中定义。工作流包含以下几个步骤:

  1. 仓库检出和环境设置

    • 以适当的深度检出仓库
    • 设置 Node.js 和 pnpm
  2. 配置准备

    • 克隆私有配置仓库
    • 应用特定于环境的设置
  3. 构建过程

    • 安装依赖项
    • 生成路线图渲染器
    • 压缩图像
    • 构建应用程序
  4. 部署到 EC2

    • 设置 SSH 密钥
    • 使用 rsync 将文件传输到 EC2
    • 重启服务器上的 PM2 服务
  5. 缓存失效

    • 通过 GitHub API 触发 Cloudfront 缓存清除

来源: .github/workflows/deployment.yml1-75

持续集成

除了主要的部署工作流外,该仓库还实现了几个持续集成工作流,以确保内容保持最新并维护依赖关系:

  1. 路线图内容 JSON 刷新

    • 计划每日运行或手动触发
    • 生成最新的内容 JSON 文件
    • 创建包含更改的拉取请求
  2. 依赖升级

    • 计划每周运行
    • 将所有依赖项更新到最新版本
    • 创建包含更新的拉取请求

这些自动化工作流有助于在无需人工干预的情况下维护代码库的新鲜度和安全性。

来源: .github/workflows/refresh-roadmap-content-json.yml1-52 .github/workflows/upgrade-dependencies.yml1-52

本地开发设置

对于本地开发,项目在贡献指南中提供了具体说明:

  1. 克隆仓库
  2. 将编辑器包添加为工作区依赖项
  3. 使用 pnpm 安装依赖项
  4. 运行开发服务器

此设置确保开发人员拥有与生产构建系统相同的环境,从而保持环境之间的一致性。

来源: contributing.md128-143

文件结构

构建和部署系统与几个关键目录和文件交互:

路径目的
/dist构建文件的输出目录
/src源代码和内容
/public原样提供静态文件
/scripts构建和部署脚本
/packages/editor路线图编辑器组件
/.github/workflowsCI/CD 工作流定义

内容和构建脚本的分离确保了平台内容创建和技术基础设施方面之间的清晰界限。

来源: .gitignore5-7 scripts/generate-renderer.sh1-26

结论

roadmap.sh 平台的构建和部署系统采用了现代实践,如自动化 GitHub 工作流、优化的构建流程和持续集成,以维持可靠的用户体验。配置旨在易于维护和扩展,并具有清晰的职责分离和重复任务的自动化。

使用 Astro 作为构建框架,并结合用于特殊需求的自定义脚本,为向用户交付路线图内容创建了一个灵活而强大的系统。