Monorepo for Cloudflare Workers

株式会社 AbemaTV の新画像基盤を Cloudflare Workers でどのように開発しているかの話
Monorepo, pnpm, turbo (turborepo), wrangler

"Muddy Web #6 - 泥臭いフロントエンドの現場" での発表資料
https://cyberagent.connpass.com/event/294610/

Transcript

1. AbemaTV, Inc. All Rights Reserved
 AbemaTV, Inc. All Rights Reserved
 1 Monorepo for Cloudflare Workers 2023-09-28 株式会社AbemaTV Shohei Ueda Shohei Ueda
2. AbemaTV, Inc. All Rights Reserved
 2 • 自己紹介 • Cloudflare Workers • Hayabusa & Falcon • Monorepo • wrangler INDEX • pnpm • turborepo • CI/CD • Cloudflare アカウント運用 • まとめ
3. AbemaTV, Inc. All Rights Reserved
 自己紹介 3 peaceiris.com
4. AbemaTV, Inc. All Rights Reserved
 Shohei Ueda 上田 菖平 • 2022年株式会社サイバーエージェント新卒入社 
 • 株式会社AbemaTV
 • バックエンド
 • Go, TypeScript, GitHub Actions 
 ◦ peaceiris/actions-gh-pages 
 ◦ peaceiris/actions-hugo 
 ◦ peaceiris/actions-mdbook 
 ◦ peaceiris/actions-label-commenter 
 ◦ peaceiris/emoji-ime-dictionary 
 • https://peaceiris.com/ 
 4 Profile
5. AbemaTV, Inc. All Rights Reserved
 Cloudflare Workers 5 Edge Computing
6. AbemaTV, Inc. All Rights Reserved
 Cloudflare Workers 6 • Cloudflare 社が提供している通称 Edge Computing 分野の製品 • 制限のある Node.js で実行できる ため JavaScript/TypeScript で処 理を記述可能 • WebAssembly で実行できるため Rust, Go でも記述可能 • Cache, Image Resizing, R2, Pages などをはじめ数多くの Cloudflare 製品 と連携してサーバーレスでアプリケー ションを構築可能 • 今回は Workers, Image Resizing の 組み合わせの話 • DDos 対策や Access などセキュリ ティ関連機能の恩恵も Cloudflare 関連製品との連携が容易 Edge Computing
7. AbemaTV, Inc. All Rights Reserved
 Hayabusa & Falcon 7 ABEMA 画像配信基盤 Falcon
8. AbemaTV, Inc. All Rights Reserved
 Hayabusa から Falcon へ 8 • サイバーエージェント社内共通の 画像配信システムとして Hayabusa が提供されていた • Hayabusa の撤退が決まったため に各事業部で移行が必要となった • ABEMA では画像配信基盤を新規 で整備 • Hayabusa と同じく Cloudflare Workers で構築 • 肥大化していた仕様はシンプルにし て実装し移行を完了 • Hayabusa の後継ということで Falcon と命名 Falcon Hayabusa
9. AbemaTV, Inc. All Rights Reserved
 Monorepo 9 モノレポで共通管理
10. AbemaTV, Inc. All Rights Reserved
 Monorepo 10 • バックエンドチームで Go のマイク ロサービスのモノレポ化を進行中 • その背景もあり Cloudflare Workers 関連のプロジェクトを管理 するモノレポを整備 • Falcon をモノレポ管理下で実装 • フロントエンド界隈のモノレポ事例に 学んで技術選定を実施 • パッケージマネージャー ◦ npm, yarn, pnpm, … • ビルドツール ◦ lerna, lerna-lite, nx, turborepo, … フロントエンドに学ぶ モノレポでプロジェクト開始
11. AbemaTV, Inc. All Rights Reserved
 Monorepo 11 $ tree -L 2 -I node_modules -I coverage . ├── README.md ├── commitlint.config.js ├── jest.config.json ├── package.json ├── packages │ ├── README.md │ ├── beaver │ └── falcon ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── renovate.json ├── scripts └── turbo.json $ tree -I node_modules ./packages/falcon ./packages/falcon ├── README.md ├── RELEASE ├── __tests__ │ ├── falcon.test.ts │ └── … ├── package.json ├── src │ ├── config.ts │ ├── falcon.ts │ ├── index.ts │ └── query-parser.ts ├── tsconfig.json └── wrangler.toml
12. AbemaTV, Inc. All Rights Reserved
 wrangler 12 “The CLI for Cloudflare Workers”
13. AbemaTV, Inc. All Rights Reserved
 wrangler 13 Cloudflare Workers の開発で用いる SDK/CLI とし て wrangler が提供されている インストール • npm install wrangler ローカルサーバー • wrangler dev --local デプロイ • wrangler publish --env development Workers の構成をファイルで宣言的に管 理 keep_vars = false を指定することでダッ シュボードからの変更を維持せず wrangler.toml の設定を正とすることが 可能 Workers の構成はすべて wrangler.toml にて管理 wrangler.toml Cloudflare Workers SDK/CLI
14. AbemaTV, Inc. All Rights Reserved
 pnpm 14 “Fast, disk space efficient package manager”
15. AbemaTV, Inc. All Rights Reserved
 pnpm 15 パッケージマネージャーとして pnpm を 採用 corepack 経由で利用 • corepack enable pnpm package.json • "packageManager": "pnpm@8.7.6" • "engines": {"pnpm": ">=8.0.0"} • workspace を利用したい • node_modules のディスク容量節約 現在は npm v9.4.0 からシンボリックリンク方式 が実験的に利用可能 今後はモノレポ構成のプロジェクトでも npm の採 用が増えていくと予想 選定理由 パッケージマネージャー
16. AbemaTV, Inc. All Rights Reserved
 turborepo 16 “Turbo is an incremental bundler and build system written in Rust.”
17. AbemaTV, Inc. All Rights Reserved
 turborepo (turbo) 17 ビルドツールとして turborepo を採用し て差分ビルドを利用 • 差分ビルド • Remote Caching 余談: Go モノレポは Bazel を採用して います Falcon とは別に新規で workers の package を追加することに。 タスクや config を Falcon のものと共通 で利用でき、管理する設定ファイルを減 らすことができた実感を得た 実際にプロジェクトを追加 ビルドツール
18. AbemaTV, Inc. All Rights Reserved
 pnpm and turbo 18 $ cat pnpm-workspace.yaml packages: - 'packages/*' $ cat turbo.json { "$schema": "https://turbo.build/schema.json", "pipeline": { "fmt": {}, "fmt:ci": {}, "tsc": {}, "lint": {}, "lint:fix": {}, "test": {}, "all": { "dependsOn": ["fmt", "tsc", "lint", "test"] } } } $ cat package.json … "scripts": { "postinstall": "pnpx husky install", "test:renovate": "renovate-config-validator", "all": "turbo run --parallel all", "all:ci": "turbo run --parallel all:ci", "fmt": "turbo run --parallel fmt", "fmt:ci": "turbo run --parallel fmt:ci", "lint": "turbo run --parallel lint", "lint:fix": "turbo run --parallel lint:fix", "tsc": "turbo run --parallel tsc", "test": "turbo run --parallel test" }, "packageManager": "pnpm@8.7.6", "engines": { "pnpm": ">=8.0.0" }, …
19. AbemaTV, Inc. All Rights Reserved
 pnpm and turbo 19 $ cat packages/falcon/package.json … "scripts": { "deploy:development": "wrangler publish --env development", "deploy:production": "wrangler publish --env production", "start": "wrangler dev --local", "fmt": "prettier --write '**/*.{ts,js}'", "fmt:ci": "prettier --check '**/*.{ts,js}'", "lint": "eslint --ext .ts .", "lint:fix": "eslint --ext .ts --fix .", "tsc": "tsc --noEmit", "test": "jest --config ../../jest.config.json", }, …
20. AbemaTV, Inc. All Rights Reserved
 CI/CD 20 GitHub Actions
21. AbemaTV, Inc. All Rights Reserved
 CI/CD 21 • CI/CD の実行環境に GitHub Actions を利用 • pull-request: ◦ prettier, tsc, eslint, jest • push: main branch ◦ 開発環境へのリリース • push: tag ◦ 本番環境へのリリース • 差分ビルド ◦ 変更のある package に対して のみ Job を起動 • Remote Caching は使っておらず、 規模も大きくはないため利用予定は 現状なし turborepo GitHub Actions
22. AbemaTV, Inc. All Rights Reserved
 Cloudflare アカウント運用 22 Machine & Read-only Account
23. AbemaTV, Inc. All Rights Reserved
 Cloudflare アカウント運用 23 マシンアカウントで Admin 権限を持つ Token を 発行し GitHub Actions の Secret に登録 基本的にログインはしない ユーザーのアカウントはログ確認・キャッシュ パージのみできる Read-only 権を付与 通常は各自のアカウントでログイン User Account (Read-only) Machine Account
24. AbemaTV, Inc. All Rights Reserved
 まとめ 24 🦅 🦅 🦅
25. AbemaTV, Inc. All Rights Reserved
 まとめ 25 • 社内共通の画像配信基盤 Hayabusa から ABEMA 画像配信 基盤 Falcon へ移行しました • Falcon は TypeScript を用いて開 発されている Cloudflare Workers のプロジェクトでモノレポ構成で管 理しています • Cloudflare Workers のプロジェクト を turborepo, pnpm などを活用し てモノリポで管理して快適に開発し ています • 実際にプロジェクトを追加することが あり、メンテナンス性の高さを実感し ました Monorepo のメンテナンス性 画像配信基盤の移行を完了
26. AbemaTV, Inc. All Rights Reserved