Monorepo for Cloudflare Workers

AbemaTV, Inc. All Rights Reserved 
AbemaTV, Inc. All Rights Reserved  1
Monorepo for
Cloudflare Workers
2023-09-28
株式会社AbemaTV Shohei Ueda
Shohei Ueda

View Slide

AbemaTV, Inc. All Rights Reserved  2
● 自己紹介
● Cloudflare Workers
● Hayabusa & Falcon
● Monorepo
● wrangler
INDEX
● pnpm
● turborepo
● CI/CD
● Cloudflare アカウント運用
● まとめ

View Slide

自己紹介
3
peaceiris.com

View Slide

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

View Slide

Cloudflare Workers
5
Edge Computing

View Slide

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

View Slide

Hayabusa & Falcon
7
ABEMA 画像配信基盤 Falcon

View Slide

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

View Slide

Monorepo
9
モノレポで共通管理

View Slide

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

View Slide

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

View Slide

wrangler
12
“The CLI for Cloudflare Workers”

View Slide

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

View Slide

pnpm
14
“Fast, disk space efficient package manager”

View Slide

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 の採
用が増えていくと予想
選定理由
パッケージマネージャー

View Slide

turborepo
16
“Turbo is an incremental bundler and build system written in Rust.”

View Slide

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

View Slide

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

View Slide

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

View Slide

CI/CD
20
GitHub Actions

View Slide

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

View Slide

Cloudflare アカウント運用
22
Machine & Read-only Account

View Slide

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

View Slide

まとめ
24
🦅 🦅 🦅

View Slide

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

View Slide


View Slide

Monorepo for Cloudflare Workers

Monorepo for Cloudflare Workers

Shohei Ueda

More Decks by Shohei Ueda

Other Decks in Programming

Featured

Transcript