こんにちは、AWS チームの尾谷です。

2023 年 3 月 15 日に開催された Cloudflare Meetup Sapporo のキックオフイベントについてレポートをしたいと思います。

本キックオフイベントは2023 年 3 月 16 日現在、9 拠点での開催が決定していて、その「かわきり」となるのが札幌のイベントでした。 (追加を予定されているという話もありました。)

フォージビジョンからは、社長の喜多と松尾と尾谷の 3 人が参加して参りました。

cfm-cts.connpass.com

本ブログのテーマはキックオフイベントで、Cloudflare のエバンジェリストに就任された亀田さんのハンズオンのセッションに関して、「開発環境セットアップ」の部分でつまづいたポイントなどをアウトプットします。

アカウント作成

Cloudflare アカウントは無料で作れます。AWS と違ってクレジットカードが必須ではありません。「触りだけ」と思いアカウントを作り放置してて「気づいたら高額請求。」みたいな事故が起きないエンジニアに優しい仕様です。

アカウント作成方法は、トラストバンクの武田さんが分かりやすくまとめて下さっています。

zenn.dev

ハンズオン

ハンズオンセッションでは亀田さんが作成された以下の手順を進めていきました。
Windows をベースに記載された資料ですが、mac でも実施可能です。

zenn.dev

この中の Windows 環境でCloudflare 開発ツール Wranglerを設定する方法とHello World!の実行までの手順に関して、三点ほどつまづきポイントがありましたので記載しておきます。

PowerShell コマンドに関して

一点目は、PowerShell コマンドに関してです。 mac だと PowerShell の以下のコマンドは不要でした。

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process

localhost でのブラウザプレビューに関して

二点目は初回の wrangler dev コマンドに関してです。
Windows でも、mac でも wrangler dev コマンドを初回に投入した直後は、localhost にアクセスしてもタイムアウトしました。

今、実行したら問題なく接続できました。
OAuth 認証を行っているため、認証ができていないことが原因でした。

% wrangler dev
Delegating to locally-installed wrangler@2.12.3 over global wrangler@2.12.3...
Run `npx wrangler dev` to use the local version directly.

Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth?

原因は、分かりませんが、スキップして進めても最後まで完走できますので、ご安心ください。

サブドメインに関して

最後は、サブドメインの登録に関してです。
サブドメインの登録をしておかないと、wrangler publish コマンドを投入した後にページが表示されません。
ここでつまづいている方が多かった印象です。

無料枠でもかなり突っ込んで触れる印象

今回ハンズオンでデプロイした Cloudflare Workers は、JavaScript ベースでコーディングができ、ドメインを取得しなければ無料でかなり触れると感じました。
また、フロントエンドの技術に明るい方だとスムーズに開発できると思います。
インフラ的な観点で言うと、リアルタイムログからアクセスログがかなり詳細に確認できる点が便利だと感じました。

TypeScript でもう少しカスタマイズしてみました。

export default {
    async fetch(
        request: Request,
        env: Env,
        ctx: ExecutionContext
    ): Promise<Response> {
        return new Response(
            '<h1>松尾さん！ここまで行きました。</h1><p style="color: green;">亀田さん！ありがとうございました。</p>',
            {
                headers: {
                    'content-type': 'text/html;charset=UTF-8;lang=jp'
                }
            }
    )}
};

面白いです！この調子で、KV、D1、R2 と理解を進めていこうと思います。