Zenn
☺️

DevContainer環境でWrangler loginを行う方法

2024/06/02に公開
Tips
Cloudflare
devcontainer
Wrangler
tech

具体的な方法についてはドキュメントに記載されていますが、説明がわかりにくかったので噛み砕いて解説します。
Use wrangler login on a remote machine

発生している問題

DevContainer内でwrangler loginを行いたいが、Cloudflareの認可ページから正常にコールバックすることができずに認可セッションがタイムアウトしてしまう。

DevContainer
$ wrangler login
 ⛅️ wrangler 3.58.0
-------------------
Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth?response_type=code&client_id=54311594-84e3-412a-b38-e84b82f473e56&redirect_uri=http%3A%2F%2Flocalhost%3A8976%2Foauth%2Fcallback&scope=account%3Aread%20user%3Aread%20workers%3Awrite%20workers_kv%3Awrite%20workers_routes%3Awrite%20workers_scripts%3Awrite%20workers_tail%3Aread%20d1%3Awrite%20pages%3Awrite%20zone%3Aread%20ssl_certs%3Awrite%20constellation%3Awrite%20ai%3Awrite%20queues%3Awrite%20offline_access&state=xYeMlcrRtUH2SR.E3dIdkd5csZN9Kqhm&code_challenge=Z0k3drH_o3K8ff0l60O6fOlxP-fEJeXHitH4odUeRCU&code_challenge_method=S256
▲ [WARNING] Failed to open


✘ [ERROR] Timed out waiting for authorization code, please try again.


🪵  Logs were written to "/home/vscode/.config/.wrangler/logs/wrangler-2024-06-01_18-43-23_366.log"

前提

今回はMacOS上のDevContainer内でWrangler Loginを行う方法を記述します。

実施手順

DevContainer
# wranglerのインストール
npm i -g wrangler

# loginの開始
wrangler login

上記コマンドを入力することで、OAuthの認可フロー開始用URLが生成されます。
ターミナルは消さずに、生成されたURLをホスト上のブラウザ（今回はMac/Chrome）で開きます。
認可画面の例

OAuthの認可画面にて'Allow'を押すことで、開発者ツールのNetworkタブにコールバック用のURIが表示されます。

コールバックURLの例

そのコールバック用URLを右クリック、Copy > Copy as cURLの手順でコピーし、DevContainerで新しいターミナルを開き、そこにコピーしたcURLコマンドを入力します。

DevContainer
curl 'http://localhost:8976/oauth/callback?code=c6c32qaHg_32l932Kby32_tcDuh7Bf2wpFK5jXU.gweVhe320-ZUl-GZBAaweJis99fwe9UhcfawuMvM_70&scope=account%3Aread%20user%3Aread%20workers%3Awrite%20workers_kv%3Awrite%20workers_routes%3Awrite%20workers_scripts%3Awrite%20workers_tail%3Aread%20d1%3Awrite%20pages%3Awrite%20zone%3Aread%20ssl_certs%3Awrite%20constellation%3Awrite%20ai%3Awrite%20queues%3Awrite%20offline_access&state=RfaweEoXH2f2awaZL8qip32e~6faz' \
  -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7' \
  -H 'Accept-Language: en-US,en;q=0.9,ja;q=0.8' \
  -H 'Connection: keep-alive' \
  -H 'Sec-Fetch-Dest: document' \
  -H 'Sec-Fetch-Mode: navigate' \
  -H 'Sec-Fetch-Site: cross-site' \
  -H 'Sec-Fetch-User: ?1' \
  -H 'Upgrade-Insecure-Requests: 1' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36' \
  -H 'sec-ch-ua: "Google Chrome";v="125", "Chromium";v="125", "Not.A/Brand";v="24"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"'

上記のCURLコマンドを実行することで、Wrangler Loginが完了し、Successfully logged in.と表示されます。

Discussion