どこでもReact Native開発！ngrokで実現する柔軟な開発環境

React Nativeの実機開発で「自宅のWi-Fiじゃないと動かない…」と困った経験はありませんか？

この記事では、ngrokを使ってカフェでもテザリングでも、どこでも開発できる環境の作り方を紹介します。

😰 よくある問題

• 自宅Wi-Fiでしか開発できない
• カフェのWi-Fiだとバックエンドに接続できない
• 環境ごとにIPアドレスを変更するのが面倒
• テザリングに切り替えると設定変更が必要

✨ 解決策：ngrok固定ドメインを使う

ngrokの固定ドメインを使えば、環境変数を一度設定するだけで、どこでも開発可能になります。

仕組み

iPhone → ngrok固定ドメイン（HTTPS）→ Macのlocalhost:3000

• バックエンドは localhost:3000 で起動
• ngrokがインターネット経由でトンネル接続
• iPhoneは固定ドメインに接続（場所を選ばない）

🛠️ セットアップ手順

1. ngrokの固定ドメインを取得

# ngrokアカウントでダッシュボードから固定ドメインを作成
# 例: your-app.ngrok-free.dev

2. 環境変数を設定

.env.development

# ngrok固定ドメインを設定
EXPO_PUBLIC_API_URL=https://your-app.ngrok-free.dev

3. 開発時の起動コマンド

# ターミナル1: バックエンド起動
cd backend
npm run server

# ターミナル2: ngrok起動
ngrok http --domain=your-app.ngrok-free.dev 3000

# ターミナル3: Metro Bundler起動
cd mobile
npx expo start --dev-client --clear

🎯 これで何ができる？

✅ 自宅Wi-Fi

• ngrok経由でバックエンドに接続
• そのまま開発

✅ カフェ・お店のWi-Fi

• ngrok経由でバックエンドに接続
• MacとiPhoneが同じWi-Fiに接続されていればOK

✅ テザリング

• ngrok経由でバックエンドに接続
• iPhoneをテザリングON → Macを接続

🔑 重要なポイント

一度設定すれば、環境変数の変更は不要！

• 自宅でもカフェでもテザリングでも同じ設定
• ネットワーク接続を変えるだけ

⚠️ AP Isolationに注意

一部のカフェや公共Wi-Fiでは、デバイス間通信が制限されている場合があります（AP Isolation）。

症状

• バックエンドには接続できる（ngrok経由）
• Metro Bundlerに接続できない（ポート8081）

対処法

テザリングに切り替えるだけ

# iPhoneでテザリングON
# MacをiPhoneのテザリングに接続
# それだけ！設定変更は不要

📊 通信の流れを理解する

バックエンド通信（ポート3000）

iPhone → インターネット → ngrok → Mac localhost:3000

• どのWi-Fiでも関係なし
• ngrokが中継してくれる

Metro Bundler通信（ポート8081）

iPhone → 同じWi-Fi内 → Mac :8081

• MacとiPhoneが同じネットワークにいる必要あり
• AP Isolationがあると接続不可

💡 開発フロー

通常の開発（お店のWi-Fi）

1. バックエンド起動
2. ngrok起動
3. MacとiPhoneを同じWi-Fiに接続
4. Metro Bundler起動
5. 開発開始！

AP Isolationがある場合

1. バックエンド起動（そのまま）
2. ngrok起動（そのまま）
3. iPhoneでテザリングON
4. MacをiPhoneに接続
5. Metro Bundler起動（念のため再起動）
6. 開発開始！

🚀 メリットまとめ

✅ 環境変数の変更不要 – 一度設定すればどこでもOK
✅ HTTPS対応 – セキュアな通信
✅ 固定ドメイン – URLが変わらない
✅ どこでも開発可能 – 自宅、カフェ、移動中
✅ 切り替えが簡単 – ネットワーク接続を変えるだけ

⚙️ 設定ファイル例

.env.development

# API Configuration
EXPO_PUBLIC_API_URL=https://your-app.ngrok-free.dev

# その他の設定
EXPO_PUBLIC_STAGE=dev
EXPO_PUBLIC_ENABLE_DEBUG_MODE=true

apiClient.ts

// 環境変数から自動取得（推奨）
export const API_URL = process.env.EXPO_PUBLIC_API_URL || 'http://localhost:3000';

// ❌ ハードコードしないこと
// export const API_URL = 'http://192.168.11.13:3000';

iOS Info.plist（HTTP通信許可）

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
  <key>NSAllowsLocalNetworking</key>
  <true/>
</dict>

🔍 トラブルシューティング

ngrokに接続できない

# ヘルスチェック
curl https://your-app.ngrok-free.dev/health

# ngrokの状態確認
curl -s http://localhost:4042/api/tunnels | python3 -m json.tool

Metro Bundlerに接続できない

# ポート8081の確認
lsof -i:8081

# Metro Bundler再起動
lsof -ti:8081 | xargs kill -9
npx expo start --dev-client --clear

環境変数が反映されない

# 環境変数確認
cd mobile
grep EXPO_PUBLIC_API_URL .env.development

# Expoサーバーを必ず再起動
lsof -ti:8081 | xargs kill -9
npx expo start --dev-client --clear

📝 チェックリスト

開発開始前に確認

• バックエンドサーバーが起動している
• ngrokトンネルが起動している
• .env.developmentにngrokドメインが設定されている
• MacとiPhoneが同じネットワークに接続されている
• Metro Bundlerが起動している

🎓 学んだこと

1. ngrok固定ドメインを使えば環境変数を変更せずにどこでも開発可能
2. バックエンド通信はngrok経由なのでWi-Fi種類は無関係
3. Metro Bundler通信は同じネットワークが必要
4. AP Isolation対策はテザリングに切り替えるだけ
5. 設定ファイルの変更は一切不要

まとめ

ngrokの固定ドメインを使えば、React Native開発が圧倒的に柔軟になります。

• 自宅でもカフェでも電車でも開発可能
• 環境変数の切り替えストレスから解放
• テザリングへの切り替えも簡単

ぜひ試してみてください！

---

参考リンク

• ngrok公式サイト
• Expo開発ドキュメント