Cloudflare Worker や Pages を利用するには、wrangler というコマンドラインツールをインストールすることが必要です。
英語の公式ドキュメントを元に、初心者向けに解説してます。(2023年3月時点)
Mac 用の解説です。
Windows は設定がややこしくらしく、Cloudflare Japan エバンジェリスト亀田さんが用意した記事を参照ください。
Windows 環境でCloudflare 開発ツール Wranglerを設定する方法とHello World!の実行まで
https://zenn.dev/kameoncloud/articles/1fac9762aab4ec
※ Cloudflare アカウントをまだ作成していない人は、こちらからアカウント作成をお願いします。
【超入門】Cloudflareアカウントを新規登録する
https://zenn.dev/taketakekaho/articles/5f72f4c58ab0ba
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月に立ち上がりました。
全国各地で勉強会が開催されています。
僕は名古屋コミュニティの立ち上げをお手伝いいたしました。
以上