VSCodeのDevContainerでExpoサーバーを立てると、スマホからアクセスできない問題

事象

VSCodeのDevContainerでDocker環境を作り、React Native+Expoでスマホアプリのサーバを立てたが、

スマホのExpo Goから以下のQRコードをスキャンすると、アクセス失敗の画面が出てきました。

これは本来使ったdevcontaoner.json

{
	"name": "Node.js & TypeScript",
	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
	"features": {
		"ghcr.io/devcontainers/features/aws-cli:1": {},
		"ghcr.io/devcontainers/features/python:1": {},
		"ghcr.io/devcontainers-extra/features/amplify-cli:2": {}
	},
}

原因と解決策

以下のサイトが参考になった！

Expo Go と Expo サーバーは、同じネットワークに接続している必要があります。しかし現在の状態では、Expo サーバーがコンテナの IP アドレスで起動しているため、Expo Go からアクセスできません。

そこで、Expo サーバーをホストマシンのローカル IP アドレスで起動するよう設定し、さらに Expo サーバーが使用する 8081 ポートをホストの 8081 ポートにマッピングすることで、この問題を解決します。

「forwardPorts」で、Visual Studio Code の Dev Containers（開発コンテナ）機能でホストマシンからコンテナ内部のポート 8081 へアクセスできるようにします。

「runArgs」でDockerのポートマッピング（ホスト OS の 8081をコンテナの8081にマッピングする）と、環境変数ファイル（ローカル IP アドレスなどの設定）の指定をします。

修正したdevcontaoner.jsonが以下になります。

{
	"name": "Node.js & TypeScript",
	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
	"features": {
		"ghcr.io/devcontainers/features/aws-cli:1": {},
		"ghcr.io/devcontainers/features/python:1": {},
		"ghcr.io/devcontainers-extra/features/amplify-cli:2": {}
	},
	"forwardPorts": [
		8081
	],
	"runArgs": [
		"-p=8081:8081",
		"--env-file",
		".devcontainer/.env"
	]
}

「ipconfig」コマンドで「ローカル IP アドレス」を調べることができます。

.envを追加しローカル IP アドレを設定します。

REACT_NATIVE_PACKAGER_HOSTNAME=192.168.xx.xx

すると、無事スマホからアクセスできました！