Cloudflare Workers を始める

はじめに

これは Cloudflare のアカウント作成から Cloudflare Workers にアプリケーションをデプロイするまでの備忘録となる。

今回試したアプリケーション

今回試したアプリケーションは https://hello-clw.kasaharu.workers.dev にデプロイされている。

kasaharu.workers.dev の部分はアカウントに対して一意に割り当てられたサブドメインとなる。デフォルトだとメールアドレスのアカウントの部分が設定されるがあとから変更も可能である。 また hello-clw の部分はアプリケーションの名前になっている。

アカウント作成

アカウントもなかったので https://workers.cloudflare.com/ から作成する。作成の細かいステップは忘れてしまったが、そんなに難しいことはしていない。

アプリケーションの用意

公式ドキュメント にあるように CLI を使ってアプリケーションを用意した。最初に npm create cloudflare@latest を実行するだけで、あとはプロンプトの質問に答える形で設定した。 設定をピックアップするとアプリケーション名は hello-clw とし、アプリケーションタイプは "Hello World" Worker とした。これでデプロイまで実行される。

事前にサブドメインの変更ができなかったので、アプリケーションをデプロイ後に Workers & Pages から変更した。 作成されたプロジェクトは GitHub repo に push した。

GitHub Actions によるデプロイパイプライン

すでに初回のデプロイは終わっているが、2 回目以降は package.json に書かれた npm script を手動で実行してデプロイすることになる。

最初のうちに GitHub Actions 経由でデプロイできるようしておけば、手動でコマンドを実行しなくて良いので設定しておく。 デプロイには Deploy to Cloudflare Workers with Wrangler · Actions · GitHub Marketplace · GitHub を使用した。

API token が必要になるので Cloudflare 側で作成する。https://dash.cloudflare.com/profile/api-tokens から「Edit Cloudflare Workers」のテンプレートを使い作成する。 token を発行したら CF_API_TOKEN という名前で対象の GitHub repo の Secrets に登録する。

設定が終わったらデプロイ用の workflow を用意する。今回は .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 }}

これで main ブランチに push すると同時に Worker へのデプロイが動くようになった。

まとめ

Worker が動く環境が無料で手に入った。フロントエンドに置きたくないロジックを Worker に任せる選択肢がでてきそうである。

参考リンク

• Get started guide · Cloudflare Workers docs
• Deploy to Cloudflare Workers with Wrangler · Actions · GitHub Marketplace · GitHub
• Run in CI/CD · Cloudflare Workers docs