はじめに
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 に移行することで、インフラ費用も人的コストも節約できそうです