【超初心者】macOS での Cloudflare Worker 用 wrangler インストール方法


Cloudflare Worker や Pages を利用するには、wrangler というコマンドラインツールをインストールすることが必要です。

[英語の公式ドキュメント](https://developers.cloudflare.com/workers/wrangler/install-and-update/)を元に、初心者向けに解説してます。(2023年3月時点)

Mac 用の解説です。

Windows は設定がややこしくらしく、Cloudflare Japan エバンジェリスト亀田さんが用意した記事を参照ください。

[Windows 環境でCloudflare 開発ツール Wranglerを設定する方法とHello World!の実行まで](https://zenn.dev/kameoncloud/articles/1fac9762aab4ec)
[https://zenn.dev/kameoncloud/articles/1fac9762aab4ec](https://zenn.dev/kameoncloud/articles/1fac9762aab4ec)

※ Cloudflare アカウントをまだ作成していない人は、こちらからアカウント作成をお願いします。

[【超入門】Cloudflareアカウントを新規登録する](https://zenn.dev/taketakekaho/articles/5f72f4c58ab0ba)
[https://zenn.dev/taketakekaho/articles/5f72f4c58ab0ba](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)
[https://brew.sh/index_ja](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)
[https://nodejs.org/ja](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 ドメインの登録作業を行なっているという画面が出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/0c9fd392-116c-ed51-9a24-76d3659a31c8.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/80e9f29c-4f88-ae72-eb82-4ef24b6fe9ce.png)

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

お疲れ様でした。


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

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

```
npm update -g wrangler
```

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

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

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

https://cfm-cts.connpass.com/



以上