はじめに
CloudflareのCDNサービスについて調べたとき、CloudflareにWorkersというサービスがあることを知りました。
せっかくだったのでCloudflare Workersを少し触ってみました。
Cloudflareにサインアップ
まず、Cloudflareにサインアップします。
無料のプランがあるので、気軽く試してみることができると思います。（クレジットカード登録も不要でした。）
Cloudflare Workersのサイトは以下のリンクを参照してください。
サインアップ後、ログインして、更新が必要なアカウントの設定（例えば、サブドメイン名など）は修正します。
ダッシュボードからプロジェクト作成
Workersのダッシュボード画面から「Workers & Pages」をクリックします。
「Workers & Pages」画面では、今まで作成したプロジェクトの一覧確認や新規プロジェクトの新規作成やデプロイなどの操作が可能です。
例えば、以下のような画面から新規プロジェクトの作成が可能です。
CLIツールを利用してプロジェクト作成
以下のリンクを参照しても良いです。
0. 構築環境
試してみた環境は以下のようになります。
- Ubuntu 22.04
- Node.js 21.7.3
- npm 10.5.0
1. Wranglerをインストールする
Cloudflareは、Wranglerというツールを使って、プロジェクト管理ができます。
まずはWranglerというツールをインストールします。
以下のリンクを参照しても良いです。
Wranglerをインストールします。
$ npm install wrangler --save-dev
Wranglerのインストールが完了できたら、バージョンを確認します。
$ npx wrangler --version
2. プロジェクトを作成する
Wranglerがインストールできたら、npm経由で新しいCloudflareのプロジェクトを作成します。
適切なパスで、以下のコマンドを実行します。
$ npm create cloudflare@latest
いくつか質問が出ますが、以下のように入力して、プロジェクトを作成しました。
╰ In which directory do you want to create your application? also used as application name
./first
コマンド実行時、パス入力を特にしなかった場合、プロジェクト名を聞きます。
プロジェクト名はfirstにしました。
╰ What type of application do you want to create?
● "Hello World" Worker
○ "Hello World" Worker (Python)
○ Website or web app
○ Example router & proxy Worker
○ Scheduled Worker (Cron Trigger)
○ Queue consumer & producer Worker
○ Co-ordination / multiplayer API (using Durable Objects)
○ API starter (OpenAPI compliant)
○ Worker built from a template hosted in a git repository
作成するアプリケーションの種類を選びます。
"Hello World" Workerを選択しました。
╰ Do you want to use TypeScript?
Yes / No
TypeScriptの使用するか聞きます。
Yesを選択しました。
╰ Do you want to use git for version control?
Yes / No
バージョン管理でGitを使うか聞きます。
Yesを選択しました。
╰ Do you want to deploy your application?
Yes / No
今のアプリケーションをデプロイするか聞きます。
もし、Yesを選択したとき、Wranglerのログインをしていない場合、ログインを先に進みます。
3. ローカル環境で動作を確認する
以下のコマンドを実行することで、ローカル環境で動作確認することが可能です。
$ npx wrangler dev
コマンド実行すると、ローカル環境でアプリケーションが起動します。
アプリケーションが起動後、curlコマンドでアプリケーションにリクエストを投げると、レスポンスが返されます。
$ curl http://localhost:8787
Hello World!
4. コードを修正する
プロジェクトフォルダ内のsrc/index.tsにコードが書いているので、適切に修正します。
今回は、レスポンスメッセージHello World!をHello Worker!に修正してファイルを保存しました。
export default {
async fetch(request, env, ctx): Promise<Response> {
- return new Response('Hello World!');
+ return new Response('Hello Worker!');
},
} satisfies ExportedHandler<Env>;
5. デプロイして、変更を確認する
コードの作成を完了し、問題なければデプロイをします。
$ npx wrangler deploy
デプロイが完了後、またcurlコマンドでリクエストを投げると、レスポンスが返されます。
$ curl https://first.foo-bar.workers.dev
Hello Worker!
また、以下のようにCloudflareのダッシュボードで、デプロイしたアプリケーションが表示されます。
おわりに
Cloudflare Workersプロジェクトを新規作成して、コード修正し、デプロイまでやってみました。
今回はCloudflare Workersを初めて触ってみたので、まだわからないことが多いのですが、いろいろ学んでみたいと思います。
参考