STEP 1: Node.js & npm を用意

Node.js や npm をローカル環境に用意します。

1-1. Homebrew でインストールする方法

個人的にはこちらの方法をお勧めします。

Homebrew をインストールし、ターミナルからインストールする方法です。

Homebrew は、Mac のローカル環境のソフトのインストールを管理できるコマンドラインツールです。慣れればめちゃくちゃ簡単にソフトのインストール・アップデート・アンインストールなどの管理ができます。

Homebrew公式サイト(インストール方法)
https://brew.sh/index_ja

Homebrew のインストールが終われば、Node をインストールします。コマンドで一発です。

brew install node

おまけ: Node や npm は brew コマンドを使ってアップデートできます

# Homebrew 自体をアップデート
brew update
# Homebrew でインストールしたパッケージの最新版にアップデート
brew upgrade

補足2: Cloudflare 公式では Volta や nvm などで Node バージョンを簡単に変更できるようなパッケージのインストールをお勧めしてますし、npm 意外にも yarn というパッケージマネージャーがありますが、今回は割愛します。

1-2. インストーラーからインストールする方法

Node.js の公式サイトからインストーラーをダウンロード、実行し、node & npm をインストールすることも可能です。

Node.js 公式サイト
 https://nodejs.org/ja

STEP 2: Wrangler をインストール

いよいよ Cloudflare の Wrangler をインストールします。

ここからは、必ず、ターミナル (Terminal) などのコマンドラインツールを利用する必要があります。

Mac のどこからからも使えるよう、グローバルオプションでインストールします。

npm install -g wrangler

STEP 3: Cloudflare との認証

アカウント認証を行います。以下のコマンドをターミナルで実行すると、ブラウザが立ち上がります。ご自分の Cloudflare アカウントでログインし、認証情報を保存します。

wrangler login

これで、wrangler のセットアップは以上です。お疲れ様でした。

STEP 4: テストでデプロイ (worker.dev サブドメインの作成)

Cloudflare で、開発で使える worder.dev サブドメインを取得しましょう。

Hello World プロジェクトを適当に作ってデプロイすることで取得できます。

プロジェクト名は「katztest」としていますが、他の名前でも良いです。

まず、ローカルでプロジェクトを初期化します。

wrangler init katztest

対話プロンプトが出てくるので、以下の設定を参考に進めてください

wrangler init katztest
 ⛅️ wrangler 2.13.0
--------------------
Using npm as package manager.
✨ Created katztest/wrangler.toml
✔ Would you like to use git to manage this Worker? … no
✔ No package.json found. Would you like to create one? … yes
✨ Created katztest/package.json
✔ Would you like to use TypeScript? … no
✔ Would you like to create a Worker at katztest/src/index.js? › Fetch handler
✨ Created katztest/src/index.js
✔ Would you like us to write your first test? … no

katztest というディレクトリができるので。そのディレクトリ以下に移動。

publish コマンドを実行します。

cd katztest
wrangler publish

workers.dev サブドメインを作成するかと聞かれるので、Y と答え、

Would you like to register a workers.dev subdomain now? › (Y/n)

自分だけのサブドメインを登録しましょう。以下で登録を申請します。

What would you like your workers.dev subdomain to be? It will be accessible at https://<subdomain>.workers.dev ›

管理画面へのリンクが表示されます。

そこにアクセスして、katztest のプロジェクトが追加されているか確認しましょう。

プロジェクトをクリックして枠の中を見ると、以下の画像ように worker.dev ドメインの登録作業を行なっているという画面が出ます。

少し待って、ドメインが表示されたらドメインをクリック。

ブラウザの「Hello World」という文字が表示されたら完了です。

これで、worker.dev のサブドメインを取得できました。

お疲れ様でした。

おまけ: Wrangler のアップデート

Wranger をアップデートする際はターミナルから以下のコマンドを打ちます。

npm update -g wrangler

おまけ: Cloudflare 日本のコミュニティ

Cloudflare の日本のコミュニティが 2023年3月に立ち上がりました。
全国各地で勉強会が開催されています。

僕は名古屋コミュニティの立ち上げをお手伝いいたしました。

以上