Expoを使ったiOSアプリ開発環境構築・トラブルシューティングまとめ (WSL2 + Docker編)

概要

本記事は、Windows環境で「Dockerを使ってExpoベースのiOSアプリ開発」をやりたいと考えたところからスタートし、様々な問題に直面しつつ、最終的にWSL2上にNode.js/npmをインストールして環境を整えた過程をまとめたものです。

「Dockerで全部完結させたい」と考えていたらネットワークやバージョン、ファイアウォールの壁にぶつかり、結果としてWSL内でのnpm利用へシフトすることで解決に近づいた、という開発ストーリーです。

前提環境

• Windowsマシン
• WSL2（Ubuntu等）
• Node.js / npm（最終的にWSL上にインストール）
• Expo CLI（npx経由で使用）
• Docker（当初はDocker内でNode/npmを完結させたかったが、のちにWSL側でnpm installする流れに変更）

目標と経緯

• 当初の目的: Dockerを使い、コンテナ内でexpo startなどを実行し、iOS実機でアプリをプレビューしたい
• 問題発生: ネットワークやファイアウォール、Node.jsバージョン、expo doctorコマンド非対応など、様々なトラブル
• 方針転換: Dockerのみで環境完結を断念し、WSL上でNode.js/npmを使ってnpm installを行う
  • ホスト(WSL)側でnpm install → Dockerは最小限のセットアップのみ
  • Node.jsを最新化（14以上）でオプショナルチェイニング問題解消
  • ネットワーク問題が改善し、iOS実機で画面表示可能に

よく遭遇した問題

1. expo startでiPhoneからアクセス不可

   • ファイアウォールやLAN設定、Docker-WSL間のネットワーク、--lanや--tunnelの使い分けがカギ

2. Unexpected token ? / Unexpected token . SyntaxError

   • Node.jsバージョンが古い → Node.jsを14以上に更新で解消

3. expo doctorが使えずexpo-doctorが必要

   • npm install expo-doctor後、npx expo-doctorで診断可能

4. @types/react-native不要警告

   • npm uninstall @types/react-nativeで対応、react-native本体に型定義あり

対処アプローチ

Node.js / npm をWSL上にインストール

当初はDockerコンテナ内でnpm install等を完結させたかったが、
ネットワークやOSレイヤ差異で詰まりやすく、WSL上（Ubuntu）でNode.js/npmを用いてnpm installする方針に転換。
node -vでNode.jsバージョンを14以上に上げることでオプショナルチェイニング問題も解消。

Dockerfileの簡略化

FROM node:18-bullseye

RUN apt-get update && \
    apt-get install -y --no-install-recommends \
    git \
    watchman \
    python3 \
    make \
    g++ \
    && rm -rf /var/lib/apt/lists/*


WORKDIR /app EXPOSE 19000 19001 19002 CMD ["bash"]

以前はDocker内でグローバルインストールやnpm installをしていたが、
WSLでnpm installを完了した状態で-v $(pwd):/appマウントし、npx expo startを実行する流れに変更。
Dockerは最低限のツールセットのみ。

コマンド例（Docker使用時）

bash
# WSL上で依存関係インストール
cd /mnt/c/k-iizuka000/cat-calorie-planner/expo-app
npm install

# Dockerで起動
docker run -it --rm \
  -v $(pwd):/app \
  -p 19000:19000 -p 19001:19001 -p 19002:19002 \
  expo-env npx expo start --lan

WSL上で準備したnode_modulesを利用。
--lanで局所的なネットワーク接続を試し、それでもダメならtunnelモードを検討。

トンネルモード

npx expo start --tunnelでngrokを介したアクセスが可能になります。

LAN問題やファイアウォールによるブロックを回避できる可能性があり、
--lanモードでうまくいかない場合は--tunnelを試してみるとよいです。

iOS実機までの道のり

• ファイアウォール無効化や別ネットワーク（テザリング）での接続確認
• expo-doctorで依存関係チェック、@types/react-native削除など細かい改善
• 結果的にWSLでnpm管理、Dockerは補助的環境として機能し、iOS実機で画面表示に成功

最終的な成果

• Dockerだけで完結させるのは困難だったが、WSL上でnpmを利用しNode.jsアップデートで問題解消に近づいた
• ExpoでQRコード表示→iOS実機で実際に画面表示を確認
• 多方面からのアプローチ（Nodeバージョンアップ、ファイアウォール確認、tunnel使用、expo-doctor利用）で一歩ずつ前進

まとめ

• Windows + WSL + Docker + ExpoでiOS実機テストはハードルが多い
• 当初「Dockerですべて完結」の考えを改め、WSL上でnpmを利用する方針に変更したことで道が開けた
• ネットワーク・バージョン・依存関係を一つずつ解消すれば、最終的にiOS実機でのプレビューまで可能
• 同様の環境構築に挑む方が参考になるよう、本記事で得た知見を共有