Cloudflare Workers で自動デプロイ付きのサーバーレスアプリケーションを公開しよう

はじめに

2/10 のイベントに先駆けて、社内で開催する Cloudflare 勉強会のための資料です

前回までの記事で Cloudflare のアカウントを作り、 Cloudflare Pages 上に Web サイトを公開しました

今回の記事では Cloudflare Workers でサーバーレスアプリケーションを公開します

Cloudflare Workers とは

サーバーレスコードをデプロイして、優れたパフォーマンス、信頼性、拡張性をグローバルに実現しましょう。

Cloudflare Workers はサーバーレスでコードをデプロイ、実行、運用するためのプラットフォームです

コードをデプロイするだけで、 Web からアクセス可能な API などが公開できます

いわゆる FaaS = Function as a Service の一種です

開発者はサーバーを意識することなく、実行したいコードだけに集中できます

サーバーの性能や台数、運用保守に囚われる必要がないため、少人数での運用も可能になります

ビルトインセキュリティでプロジェクトを拡張

しかも Cloudflare の場合、 WAF や DDoS 攻撃対策などのセキュリティ機能も最初から付いてきます

無料プランの場合、以下の制約があります

リクエストあたりのCPU時間：10ミリ秒以内

そのため、外部の API を呼び出すような処理は実行できません

10ミリ秒を超えた場合、 Hono だと以下のように Canceled とログが出力されます

POST https://xxx.yyy.workers.dev/zzz - Canceled @ 2024/2/6 18:21:45

有料プラン（$5/月〜）の場合、制約が緩和されます

リクエストあたりの実時間：30秒以内

Workers を始めましょう

ログイン

前々回の記事にも書いた通り、 Cloudflare Workers はクレジットカード登録不要の Free プランで無料から使えます

Cloudflare にログインして、 Workers を始めましょう

ログインしたら、ホーム画面（ダッシュボード）が表示されます

英語表示になっている場合、右上で言語を日本語に設定しましょう

セットアップ

左メニューから「Workers & Pages」をクリックします

「Workers & Pages」の概要ページに遷移します
右上の「アプリケーションの作成」をクリックしてください

「アプリケーションを作成する」というページに遷移します
「ワーカーの作成」をクリックしてください

「"Hello World" スクリプトのデプロイ」というページに遷移します

以下のような JavaScript がコードとして入力されています

...

export default {
  async fetch(request, env, ctx) {
    return new Response('Hello World!');
  },
};

「Hello World!」という文字列を返すだけのコードになっています

まずは、このまま「デプロイ」をクリックしましょう

たったのコレだけでサーバーレスアプリケーションがデプロイできました

「ワーカーをプレビューする」の下にあるリンクをクリックしてみましょう

新しいタブで作成したアプリケーションが開きます

コードに書いてあった通り、「Hello World!」と表示されました

元のタブで「ワーカーの構成」をクリックすると、ワーカーのダッシュボードページが表示されます

コードの変更

ワーカーのダッシュボードページで右上「クイック編集」をクリックします

コードの編集ページが開くので、適当に変更してから「保存してデプロイする」をクリックしましょう

デプロイしたアプリケーションを再読込すると、変更が反映されています

コードの変更もボタン一つで適用できてしまいました

CLI からのアプリケーション公開

TypeScript プロジェクトの作成

次は CLI からプロジェクトを作ってデプロイしてみましょう

以下のコマンドを実行します

npm create cloudflare@latest my-worker -- --type hello-world --ts --git

デプロイするか質問されるので、一旦 No にしておきます

╰ Do you want to deploy your application?
  Yes / No

生成された my-worker ディレクトリー内の src/index.ts を開くと、以下のように TypeScript で「 Hello World!」の文言を返すようになっています

export interface Env {
    ...
}

export default {
	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
		return new Response('Hello World!');
	},
};

ローカルでのアプリケーション起動

以下のコマンドを実行しましょう

cd my-worker
npx wrangler dev

? Would you like to help improve Wrangler by sending usage metrics to Cloudflare? › (Y/n) など質問されるので適当に答えます

ログインを求められた場合、ブラウザで認証してください

その後、以下のように表示され、ローカルでアプリケーションが起動します

...
[wrangler:inf] Ready on http://localhost:8787
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ [b] open a browser, [d] open Devtools, [l] turn off local mode, [c] clear console, [x] to exit                      │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

「b」キーを押すと、表示された http://localhost:8787 をブラウザで開きます

確かに「Hello World!」と返ってきました

「x」キーを押して終了します

CLI からのデプロイ

npx wrangler deploy

実行すると、以下のようにログが表示されます

 ⛅️ wrangler 3.26.0
-------------------
Total Upload: 0.19 KiB / gzip: 0.16 KiB
Uploaded my-worker (0.89 sec)
Published my-worker (4.66 sec)
  https://my-worker.rwakabay.workers.dev
Current Deployment ID: aa403c6a-f08f-408f-8149-db0c6ff45471

表示された URL をブラウザで開くと、「Hello World!」が確認できます

Cloudflare を確認すると、プロジェクトが追加されています

GitHub 連携

自動デプロイできるように、 GitHub との連携を設定します

GitHub Actions を使うことで、 GitHub にプッシュしたタイミングで Cloudflare Workers にデプロイできます
GitHub Actions はパブリックリポジトリーなら無料で実行可能です

以下の記事を参考にしました

トークンの発行

GitHub から Cloudflare にアクセスするため、認証用のトークンを発行します

「Workers & Pages」の概要ページから、右メニューにある「API トークンの管理」をクリックしましょう

「API トークン」のページから右上「トークンを作成する」をクリックします

Cloudflare Workers にデプロイするためのトークンなので、「Cloudflare Workers を編集する」の右にある「テンプレートをしようする」をクリックします

API トークンの作成ページが表示されます

トークン名の鉛筆アイコンをクリックして、トークン名を変更します

以下のように選択してください

• 「アカウントリソース」で自分のアカウントを選択
• 「ゾーンリソース」で「アカウントにあるすべてのゾーン」、自分のアカウントを選択

「概要に進む」をクリックします

作成内容の確認画面が表示されます
「トークンを作成する」をクリックしてください

作成したトークンが表示されます
「Copy」をクリックして、トークンの値をメモ等に保持しておきます

GitHub リポジトリーの作成、設定

以下のリンクから GitHub に新しいリポジトリーを作成します

Repository name に任意を名前を入力して「Create repository」をクリックしてください

空のリポジトリーが作成されます

右上の「Settings」タブをクリックしてリポジトリーの設定ページを開きます

緑色の「New repository secret」をクリックしてください

Name に「CF_TOKEN」など、任意の名前を入力し、 Secret に Clopudflare で発行したトークンの値を入力します
「Add secret」をクリックしましょう

「CF_TOKEN」が Repository secrets に追加されました

GitHub Actions の追加

ローカルのプロジェクト内に .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_TOKEN }}

適当に index.ts を変更してください

以下のコマンドでローカルのプロジェクトを GitHub 上にプッシュします

git remote add origin https://github.com/<GitHubユーザー名>/<リポジトリー名>
git branch -M main
git add .
git commit -m 'Add GitHub Actions'
git push -u origin main

プッシュ後、 GitHub リポジトリーの Actions タブを開くと、デプロイが実行されています

ローカルで変更した内容が反映されました

まとめ

Cloudflare Workers でサーバーレスアプリケーションを公開できました

GitHub Actions を利用することで、自動デプロイも簡単に実装できました

構築、運用保守が究極的に楽になる、まさにサーバーレスの良いところが体現できています

ものによっては Cloudflare に移行することで、インフラ費用も人的コストも節約できそうです