[覚書] devcontainerからwrangler loginしたい with pnpm

環境：MacOSのdevcontainer

直接URLを使って認証画面を開いている方がいましたが、私は同じ方法では解決しなかったので備忘録として残しておきます。

また、パッケージマネージャとしてpnpmを使っていますが、npmを使っている場合は必要に応じてコードを調整してください。

参考（解決策の元ネタ）

devcontainer.json

{
  "name": "Wrangler Dev",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:dev-22",
  "mounts": [
    "source=global-pnpm-store,target=${containerWorkspaceFolder}/.pnpm-store,type=volume"
  ],
  "postCreateCommand": ".devcontainer/postCreate.sh",
}

postCreate.sh

#!/bin/bash

# pnpm環境なら必要
sudo chown node .pnpm-store

# IPv4からIPv6へのトンネリング用にsocatをインストール
sudo apt-get update && sudo apt-get install -y socat

# wranglerログイン用にIPv4のlocalhostからIPv6のlocalhostへトンネルを作成
socat TCP4-LISTEN:8976,fork TCP6:[::1]:8976 &
tunnel_proc=$!

# wranglerをインストール
npm install -g wrangler@latest

# wranglerにログイン
npx wrangler login

# → URLをクリック
# → Cloudflareの認証画面にて"Allow"をクリックする

# トンネルを終了
kill $tunnel_proc

# パッケージをインストール
pnpm install