LabEx を Cloudflare アカウントに接続する

はじめに

このラボや VM を開始する前に、必ずCloudflare 学習用アカウントの準備を読み、ブラウザーでアカウントを準備してください。この事前準備に LabEx VM は不要です。ログイン用メールアドレスが確認済みで、自分の専用学習用アカウントを選択でき、現在のプランが Workers Free であり、そのアカウントで Workers & Pages を開けることを確認してから進んでください。アカウント名を控えておきましょう。LabEx Learning は表示名の例です。準備済みの場合も、まずガイドを読んでこれらの項目を確認してください。

Cloudflare の学習用アカウントを準備しました。この実験では、Cloudflare のコマンドラインツールである Wrangler を使って、LabEx Linux 環境をそのアカウントに接続します。ブラウザーで本人確認を行い、Wrangler がこの VM 内に認証情報を保存します。Dashboard にサインインするだけでは、ターミナルは接続されません。

Prepare Your Cloudflare Learning Account で準備した、確認済みメールアドレスと Workers Free プランを使用している自分のアカウントを使ってください。アカウント名をすぐ確認できるようにしておきます。LabEx Learning という名前を推奨します。この実験では、ユーザー情報とアカウント情報への読み取りアクセスを要求します。アプリケーションのデプロイ、ドメイン、または有料サービスは必要ありません。

この実験では、Node.js 22.22.0 と Wrangler 4.131.1 が自動的にインストールされます。標準の Wrangler コマンドとプロジェクト設定を使用します。これらは自分のコンピューターでも利用できます。自分で接続を認証し、結果を確認して、最後にログアウトします。新しい VM ごとに、新たに認証する必要があります。

ブラウザーで Wrangler を認証する

このステップでは、自分の Cloudflare ログイン情報を使って、LabEx VM 上の Wrangler を認証します。

LabEx Terminal を開き、準備済みのプロジェクトディレクトリに移動します。cd コマンドは作業ディレクトリを変更します。以降のコマンドは、このディレクトリで実行されます。

cd /home/labex/project/cloudflare-connect

Wrangler は、このプロジェクトの開発用依存関係としてローカルにインストールされています。npx wrangler は、インストール済みのバージョンを実行します。セットアップで Node.js とプロジェクトの依存関係はすでにインストールされているため、再度インストールする必要はありません。バージョンを確認します。

npx wrangler --version

4.131.1 と表示されることを確認してください。プロジェクトの package.json ではこのバージョンが固定され、package-lock.json には解決済みの依存関係のバージョンが記録されています。自分のコンピューターで Node.js をインストールした後、npm install --save-dev --save-exact wrangler@4.131.1 を使ってプロジェクトに Wrangler を追加できます。これは説明であり、準備済みの実験環境で追加実行するコマンドではありません。既存のプロジェクトをコミット済みの lockfile とともに再現する場合は、npm ci を使用します。

プロジェクトごとにローカルインストールを行うと、各プロジェクトで使用するツールのバージョンを独立して管理できます。詳しくは Cloudflare のインストールガイドを参照してください。

次に、デバイス認証を開始します。--device は localhost のコールバックを使わずに、ブラウザーでの承認をリモートターミナルに接続します。--browser=false を指定すると、Wrangler が VM 内でブラウザーを起動しようとするのを防げます。2 つのスコープは、この接続演習に必要なアカウント情報とユーザー情報の読み取りアクセスを要求します。Cloudflare は、Wrangler が認証を維持できるように必要な Background Access も追加します。Worker の書き込み権限は要求しません。

npx wrangler login --device --browser=false --scopes account:read user:read

Wrangler に確認用 URL と短いコードが表示されます。このコマンドは実行したままにしてください。表示された Cloudflare の URL を自分のブラウザーで開き、現在のターミナルに表示されたコードを入力して続行します。URL にコードが含まれている場合も、ターミナルに表示されたコードと一致することを確認してください。スクリーンショットや他の人のセッションに表示されたコードは使用しないでください。

空のコード入力欄がある Cloudflare デバイス認証フォーム

似た文字を間違えないように、コードはターミナルから直接コピーしてください。Continue を選択します。Cloudflare がコードを確認できない場合は、文字が完全に一致しているか、現在のログインコマンドがまだ待機中かを確認してください。

求められたらサインインします。同意画面で、アプリケーションが Wrangler であることを確認し、要求された権限を確認します。アカウントを選択できる場合は、自分の学習用アカウントだけを選択してください。同意画面では、Account Read が Account & Billing の下にまとめられています。展開して内容を確認してください。User Read と Background Access は Required の下に表示されます。

User Read、Background Access、Account Read を表示する Wrangler の同意権限

Edit の横に表示されているアカウント名を確認します。学習用アカウントでない場合は、Edit を選択し、目的のアカウントを選んでから同意画面に戻ります。下のトリミングされたスクリーンショットには、選択したアカウントと Authorize ボタンが表示されています。完全なページでは、この領域の上にログイン中のユーザー情報が表示されます。

Edit と Authorize の操作項目が表示された、選択済みの LabEx Learning アカウント

表示されたプライバシー情報を確認し、内容に問題がなければ Authorize を選択します。Terminal に戻り、Successfully logged in. と表示されるまで待ってから続行してください。ブラウザーでの承認と、ターミナルでの処理完了は別々に確認する必要があります。

Wrangler への Authorization が許可されたことを確認する Cloudflare の画面

成功画面には、一般的な開発に関する提案が表示されます。エージェントツールをインストールしたり、提案されたプロンプトをコピーしたりする必要はありません。一般的なデプロイに関するメッセージによって、この実験で要求する読み取り権限が増えることもありません。

コードは短時間で期限切れになります。期限切れになった場合やリクエストを拒否した場合は、コマンドが終了するまで待つか Ctrl+C を押して停止し、同じコマンドを再度実行して新しいコードを取得してください。誤って通常のログインを開始し、接続できない localhost ページが表示された場合は、そのコマンドを停止して、上記のデバイスコマンドを使用してください。

Wrangler 自身を使って、保存されたログイン状態を確認します。

npx wrangler whoami --json

"loggedIn": true、"authType": "OAuth Token"、および学習用アカウントを含む accounts 配列を探します。各アカウントオブジェクトには name と id があります。--json フラグを指定すると、人間向けのレポートではなく構造化データが返されます。他のアカウント設定を理解する必要はありません。ブラウザーに成功ページが表示されただけでは、VM が認証を受け取ったことの証明にはなりません。Wrangler が未認証だと報告した場合は、デバイス認証をやり直してください。

このステップの確認ボタンを使用してください。LabEx は、この VM に保存された OAuth ログイン情報でアクセス可能なアカウントを読み取れることを独立して確認します。

Wrangler は認証情報を VM のユーザー設定に保存します。認証情報ファイルを表示またはコピーしたり、トークンを表示するコマンドを実行したりしないでください。デバイスフローについては、Wrangler 公式ログインドキュメントを参照してください。

学習用アカウントを選択して確認する

このステップでは、学習用アカウントを特定し、その ID を Wrangler の標準プロジェクト設定に保存します。

1 回のログインで複数のアカウントにアクセスできる場合があります。同じ確認コマンドを実行し、accounts 配列に表示されるアカウント名と ID を確認します。

npx wrangler whoami --json

name で学習用アカウントを特定できるオブジェクトを探します。アカウントが 1 つだけ表示される場合も、その名前を確認してください。複数表示された場合は、Dashboard のアカウントセレクターで、どれが学習用アカウントかを確認します。先頭に表示されたという理由だけでアカウントを選択しないでください。目的のアカウントが表示されない場合は、認証をやり直し、ブラウザーでそのアカウントを選択してください。

同じアカウントオブジェクトにある 32 文字の id をコピーします。アカウント名は表示用のラベルですが、ID は実際のアカウントを識別します。Wrangler の account_id 設定を使うと、ログインで複数のアカウントにアクセスできる場合でも、プロジェクトの対象アカウントを明示できます。

wrangler.jsonc を作成します。下のブロックを実行する前に、YOUR_ACCOUNT_ID をコピーした ID に置き換えてください。引用符は残します。ヒアドキュメントは、CONFIG 区切り文字の間にある内容をファイルに書き込みます。> はファイルの内容を置き換えます。

cat > wrangler.jsonc <<'CONFIG'
{
  "account_id": "YOUR_ACCOUNT_ID"
}
CONFIG

保存した設定を確認します。

cat wrangler.jsonc

account_id が whoami --json の学習用アカウントオブジェクトと一致し、プレースホルダーが残っていないことを確認してください。このファイルに含まれるのは識別子であり、パスワードや OAuth トークンではありません。コメントを含まない JSON は有効な JSONC です。この実験では、表示された形式を使用してください。後の実験では、同じ標準設定ファイルに Worker の設定を追加します。詳しくは Wrangler の設定を参照してください。

ログアウトする前に、このステップの確認ボタンを使用してください。バックエンドが設定を読み取り、認証済みの読み取り専用アカウントリクエストを実行します。Cloudflare がそのアカウントへのアクセスを確認することを検証するため、ファイルを保存しただけでは不十分です。失敗した場合は、コピーした ID、認証状態、接続状態を確認してください。ターミナルで追加のコマンドを実行する必要はありません。

これで、アカウント情報の読み取りアクセスを確認できます。後の実験では、デプロイに必要な追加権限を要求します。

この VM を切断する

このステップでは、この VM の Wrangler ログイン情報を削除し、認証されていない状態になったことを確認します。

まず、前のステップの確認を完了してください。ログアウトすると、前の確認で使用するライブ API チェックに必要な認証が削除されます。この実験ではクラウドリソースを作成していないため、削除するアプリケーションやアカウントはありません。

Wrangler のログアウトコマンドを実行します。

npx wrangler logout

続けて、未認証状態を明示的に確認します。

npx wrangler whoami --json

構造化された出力から "loggedIn": false を探します。この Wrangler バージョンでは、ログアウト後にコマンドがゼロ以外の終了ステータスで終了します。ここではそれが想定された動作です。この明示的な状態が表示されず、ネットワークエラーだけが表示されても、ログアウトした証明にはなりません。結果を独立して確認するには、このステップの確認ボタンを使用してください。

Dashboard の My Profile → Access Management → Connected Applications で、アプリケーションへの許可も確認できます。このページは同意画面からリンクされており、Cloudflare でアプリケーションのアクセスを管理または取り消す場所です。取り消す対象を確認してから、意図した許可だけを取り消してください。同じアプリケーションを別の環境が使用している可能性があります。

Wrangler からログアウトしても、Cloudflare の学習用アカウントが削除されたり、ブラウザーで Dashboard からサインアウトしたりすることはありません。後のレッスンで使用するため、アカウントは残しておいてください。wrangler.jsonc ファイルに含まれるのは認証情報ではなく識別子ですが、このファイルだけで新しい VM を認証することはできません。次の実験では、新しい環境から開始し、独自の接続手順を実行します。

この時点以降に前の確認を再実行すると、認証エラーになります。これは想定された結果です。演習をやり直す場合だけ再認証し、終了後は再度ログアウトしてください。

まとめ

Cloudflare のデバイスフローを使ってリモートの LabEx VM を認証し、自分の学習用アカウントを選択して、独立したプロセスからライブのアカウントアクセスを確認しました。その後、Wrangler からログアウトし、明示的に未認証状態になったことを確認しました。

学習用アカウントはコースで引き続き利用できます。ブラウザーログイン、VM の認証、選択したアカウントは、接続を構成する別々の要素です。新しい環境を開始するたびに、3 つすべてを確認してください。