Monorepo for Cloudflare Workers

by Shohei Ueda

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

AbemaTV, Inc. All Rights Reserved  Hayabusa から Falcon へ 8 ● サイバーエージェント社内共通の画像配信システムとして Hayabusa が提供されていた ● Hayabusa の撤退が決まったために各事業部で移行が必要となった ● ABEMA では画像配信基盤を新規で整備 ● Hayabusa と同じく Cloudflare Workers で構築 ● 肥大化していた仕様はシンプルにして実装し移行を完了 ● Hayabusa の後継ということで Falcon と命名 Falcon Hayabusa

Slide 9

Slide 9 text

Slide 10

Slide 10 text

AbemaTV, Inc. All Rights Reserved  Monorepo 10 ● バックエンドチームで Go のマイクロサービスのモノレポ化を進行中 ● その背景もあり Cloudflare Workers 関連のプロジェクトを管理するモノレポを整備 ● Falcon をモノレポ管理下で実装 ● フロントエンド界隈のモノレポ事例に学んで技術選定を実施 ● パッケージマネージャー ○ npm, yarn, pnpm, … ● ビルドツール ○ lerna, lerna-lite, nx, turborepo, … フロントエンドに学ぶモノレポでプロジェクト開始

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

AbemaTV, Inc. All Rights Reserved  pnpm 15 パッケージマネージャーとして pnpm を採用 corepack 経由で利用 ● corepack enable pnpm package.json ● "packageManager": "[email protected]" ● "engines": {"pnpm": ">=8.0.0"} ● workspace を利用したい ● node_modules のディスク容量節約現在は npm v9.4.0 からシンボリックリンク方式が実験的に利用可能今後はモノレポ構成のプロジェクトでも npm の採用が増えていくと予想選定理由パッケージマネージャー

Slide 16

Slide 16 text

Slide 17

Slide 17 text

AbemaTV, Inc. All Rights Reserved  turborepo (turbo) 17 ビルドツールとして turborepo を採用して差分ビルドを利用 ● 差分ビルド ● Remote Caching 余談: Go モノレポは Bazel を採用しています Falcon とは別に新規で workers の package を追加することに。タスクや config を Falcon のものと共通で利用でき、管理する設定ファイルを減らすことができた実感を得た実際にプロジェクトを追加ビルドツール

Slide 18

Slide 18 text

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": "[email protected]", "engines": { "pnpm": ">=8.0.0" }, …

Slide 19

Slide 19 text

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", }, …

Slide 20

Slide 20 text

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

AbemaTV, Inc. All Rights Reserved  Cloudflare アカウント運用 23 マシンアカウントで Admin 権限を持つ Token を発行し GitHub Actions の Secret に登録基本的にログインはしないユーザーのアカウントはログ確認・キャッシュパージのみできる Read-only 権を付与通常は各自のアカウントでログイン User Account (Read-only) Machine Account

Slide 24

Slide 24 text

Slide 25

Slide 25 text

AbemaTV, Inc. All Rights Reserved  まとめ 25 ● 社内共通の画像配信基盤 Hayabusa から ABEMA 画像配信基盤 Falcon へ移行しました ● Falcon は TypeScript を用いて開発されている Cloudflare Workers のプロジェクトでモノレポ構成で管理しています ● Cloudflare Workers のプロジェクトを turborepo, pnpm などを活用してモノリポで管理して快適に開発しています ● 実際にプロジェクトを追加することがあり、メンテナンス性の高さを実感しました Monorepo のメンテナンス性画像配信基盤の移行を完了