はじめに
本記事では、Hono で作ったアプリを GitHub Actions で Cloudflare Workers の複数環境（stg, prod）にデプロイする方法について説明します。
上記タイトルを実現するための記事がいくつか存在しますので、それらを参考にして、$ bun create hono で Hono のアプリを作成するところから、順に紹介します。
Cloudflare Workers のサインアップ
必要に応じて Cloudflare Workers のサインアップを実施してください。
Hono のアプリを作成
$ bun create hono の実行
まずは、https://hono.dev/getting-started/bun を参考に $ bun create hono を実行します。
~/ghq
at 10:07:59 ❯ bun create hono my-app
create-hono version 0.6.3
✔ Using target directory … my-app
? Which template do you want to use? cloudflare-workers
✔ Cloning the template
? Do you want to install project dependencies? yes
? Which package manager do you want to use? bun
✔ Installing project dependencies
🎉 Copied project files
Get started with: cd my-app
~/ghq took 12s
at 10:08:13 ❯
その後プロジェクトに移動して $ bun run dev を実行し、http://localhost:8787 にアクセスすると、「Hello Hono!」と表示されます。
環境変数の参照
次に、複数環境で正しく環境変数を参照できていることを確認するために、「Hello Hono! from dev」のように、環境変数を表示するようにします。
環境変数の定義
まずは、https://developers.cloudflare.com/workers/wrangler/configuration/#secrets を参考に、プロジェクトルートに .dev.vars ファイルを作成します。
ENV=dev
Hono から環境変数を参照
https://hono.dev/getting-started/cloudflare-workers#bindings を参考に、Hono から環境変数を参照します。
動作確認
最後に、$ bun run dev を実行し、http://localhost:8787 にアクセスすると、「Hello Hono! from dev」と表示されることを確認します。
GitHub Actions で Cloudflare Workers の複数環境にデプロイ
以降で、作成した Hono のアプリを Cloudflare Workers にデプロイするための手順について、順に紹介します。
package.json と wrangler.toml を編集
まずは、package.json の scripts に記載されているエントリポイントへのパス src/index.ts を wrangler.toml の main に記載します。
GitHub Actions の Secrets を作成
次に、下記の記事を参考に、GitHub の Settings -> Environments から、環境ごとの環境変数を設定します。
ここでは、Environments として、stg と prod を作成し、下記の Secret を作成します。
- CLOUDFLARE_API_TOKEN
- CLOUDFLARE_ACCOUNT_ID
- ENV
- stg の場合は stg、prod の場合は prod と設定します。
CLOUDFLARE_API_TOKEN と CLOUDFLARE_ACCOUNT_ID は、下記の記事を参考に設定します。
GitHub Actions の Workflow を作成
最後に、下記を参考に Cloudflare Workers の複数環境にデプロイするための Workflow を作成します。
今回は、PR で stg へデプロイ、main への push で prod へデプロイするようにします。
Cloudflare Workers へのデプロイ
prod へデプロイ
まずは、prod へデプロイするために、GitHub のリポジトリに作成したコードを push します。
print deployment-url の step で表示される URL にアクセスすると、「Hello Hono! from prod」と表示されます。
stg へデプロイ
次に stg へデプロイするために、PR を作成します。
prod へのデプロイと同様の手順を実施した後、print deployment-url の step で表示される URL にアクセスすると、「Hello Hono! from stg deployed by GitHub Actions!」と表示されます。
おわりに
本記事では、Hono で作ったアプリを GitHub Actions で Cloudflare Workers の複数環境（stg, prod）にデプロイする方法について紹介しました。
本記事で作成したコードは下記のリポジトリに配置してありますので、よければご参照ください。
また、Cloudflare Workers へデプロイする初回の GitHub Actions では、「✘ [ERROR] 🚨 1 secrets failed to upload」のように Error が発生してしまう原因をご存知の方いらっしゃれば、ご教示いただけますと幸いです。mm
Discussion