Cloudflare の公式ドキュメントはこちら。
公式ドキュメントのとおりにやれば良いだけの話ではあるのですが、「よーし、なんか作るぞー」と思ってから、表題のとおりプロジェクト作成から main ブランチにプッシュされたら（実際のお仕事では main ブランチに直接プッシュはしないので PR が main ブランチにマージされたら）GitHub Actions で自動デプロイされるまでの環境構築を、あまり頭を使わずにシュッとやりたいのでまとめました。
- Cloudflare Workers プロジェクトを作成
- GitHub リポジトリを作成
- Cloudflare API トークンを作成
- GitHub Actions の Secrets を設定
- Workflow を追加して commit & push
- Deployeeeed!!
ぐらいのリズムでやりたい。
1. Cloudflare Workers プロジェクトを作成
ローカルリポジトリを作って移動。ちなみに、 Ctrl-] で ghq + fzf で移動できるようにしてあります（ghq + fzf 便利すぎておすすめ）。
$ ghq create gabu/workers-deploy
$ cd $HOME/dev/src/github.com/gabu/workers-deploy
プロジェクトを作成。
$ npm create cloudflare@latest .
途中の選択肢は以下で一番シンプルに。一旦デプロイもしちゃいます。
- What type of application do you want to create?
- type "Hello World" Worker
- Do you want to use TypeScript?
- Yes
- Do you want to deploy your application?
- Yes
このスピード感は何度やっても感動ですね（すごすぎる）。
ちなみに、Initial commit もキメてくれるのでこのまま進みます。
$ git log
commit 7635c70f1f737a3ded47525abfce8475175595e7 (HEAD -> main)
Author: gabu
Date: Thu Jan 4 23:18:55 2024 +0900
Initial commit (by create-cloudflare CLI)
2. GitHub リポジトリを作成
とりあえず GitHub にリポジトリを作ってプッシュだけしときましょう。（CLI でシュッと作りたい気持ちはありつつ）いつも Web コンソールでポチポチしています。
$ git remote add origin https://github.com/gabu/workers-deploy.git
$ git push -u origin main
はい、OK!
3. Cloudflare API トークンを作成
デプロイに必要なので Cloudflare の API トークンを作成します。この辺りは公式ドキュメントのとおりに。
- ダッシュボード https://dash.cloudflare.com/ を開いて
- 右上のアイコンメニューの My Profile をクリック
- 左メニューの API Tokens をクリック
- Create Token をクリック
- Edit Cloudflare Workers を探して Use template をクリック
- Token name が
Edit Cloudflare Workersのままでは後で見た時に意味不明になるのでそれっぽい名前に変更
例えば Deploy Workers from GitHub Actions とか、より明示的に Deploy Workers from GitHub Actions gabu/workers-deploy とかですかね。
- Permissions は触らず。Account と Zone は最小限に。
デプロイだけを考えるなら見るからに不要そうなパーミッションがたくさん含まれていそうなのですが、公式ドキュメントでは特に個別のパーミッションに言及されていないので一旦選べと言われたテンプレートのまま進むことにします（ちょっと気になるけど...）。一方で、Account と Zone については最小限にすることが推奨されているので、実運用では特にデプロイできるアカウントを絞り込んでおくのが良さそうですね。
You will need to choose the account and zone resources that the generated API token will have access to. We recommend scoping these down as much as possible to limit the access of your token.
とりあえず趣味開発ぐらいならこんな設定で十分かと思います。
- Continue to summary をクリック、内容をさらっと確認して Create Token をクリック
- 作成できた API トークンをしっかりコピーしておきます
Cloudflare のアカウント ID をコピー
アカウント ID も必要なので、そちらもコピーしておきます。
- ダッシュボード https://dash.cloudflare.com/ を開いて
- Workers & Pages > Overview の右側にあります
4. GitHub Actions の Secrets を設定
作成した API トークンとアカウント ID を GitHub Actions の Secrets に設定します。
リポジトリの Settings > Secrets and variables > Actions を開きます。
設定するのは Repository secrets の方です。New repository secret をクリック。以下それぞれ設定します。
-
CF_API_TOKEN: API トークン -
CF_ACCOUNT_ID: アカウント ID
5. Workflow を追加して commit & push
ローカルのリポジトリに戻って、Workflow ファイルを追加して commit & push します。
$ mkdir -p .github/workflows
$ vim .github/workflows/deploy.yml
name: Deploy
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
name: Deploy
steps:
- uses: actions/checkout@v3
- name: Deploy
uses: cloudflare/wrangler-action@v3
with:
apiToken: ${{ secrets.CF_API_TOKEN }}
accountId: ${{ secrets.CF_ACCOUNT_ID }}
$ git ci -am "Add deploy workflow"
$ git push
さあ、今作った Workflow が正しく動いているか、GitHub で確認してみます。
一発で成功してるーーー🎉
ログを確認すると Deployment ID の先頭が a0c165dd ですね。これを Cloudflare 側でも確認してみます。
ばっちり a0c165dd がデプロイされていますね💯
6. Deployeeeed!!
では、お待ちかねのコードを編集して push & 自動デプロイされるか確認します。適当に編集して、
export default {
async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
- return new Response('Hello World!');
+ return new Response('Hello World from GitHub Actions! ');
},
};
commit & push!!
💯💯💯
やっぱりコンテナがない分（それだけじゃない？）デプロイが超絶速いですね。この開発体験はやはり最高すぎる。うー仕事でも使いたい！
さいごに
既に Cloudflare Workers を触っている方 & GitHub Actions で CI/CD している方はたくさんいると思いますが、これからやってみるぞ！という方の参考になれば幸いです。いろいろ忘れた頃に自分で読んで助かるーと思えるように書いたので、久しぶりに Cloudflare Workers を触るぞという方のお役にも立てるかもしれません。
それでは！
今回使ったリポジトリはこちらです。
Discussion