0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-03-25

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 ドメインの登録作業を行なっているという画面が出ます。

image.png

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

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

image.png

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

お疲れ様でした。

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

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

npm update -g wrangler

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

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

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

以上

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?