LocalhostをiPhoneから確認する | Windows版

背景

Node.jsで起動した3000番ポートをiphoneで確認したい！
と思ったのですが、調べてもMacとiPhone, WindowsとAndroidなどしか見当たらず解決に時間がかかりました。
同じ状況にいる方の手助けになればと思います。

結論

ngrokというサービスを使います！

開発環境

• Windows 11
• iPhone

事前準備

1. ngrokに登録（こちらから）
2. 左バーの「Setup & Installation」が表示されていると思うので、AgentsからWindowsを選択
3. Windowsキー + R を押してcmdと入力し、コマンドプロンプトを起動
4. Chocolatoryが入っている場合はコマンドプロンプトから choco install ngrok を実行、入っていない場合はウェブサイトに戻ってDownloadから64ビット版をダウンロード
5. ダウンロードした場合は、.exeファイルをCドライブ>Usersに移動
6. コマンドプロンプトでngrok config add-authtoken から始まるコマンドまで実行して通ったら準備完了です

ポート起動

1. VSCodeのターミナルから起動（今回はnpm startで起動しました）
2. ポート番号を確認し、コマンドプロンプトで ngrok http ポート番号 （「ポート番号」の部分は数字に書き換えてください）を実行
3. Forwarding欄に出てくるURLをLINEやSlackなどに貼り付け、スマホからアクセス

注意点

無料版の場合は、起動するたびにURLが変更されるので注意してください。
VSCode上でのスタイル変更等は都度反映されるので（ホットリロード）起動しなおす必要はないです。便利。

その他

余談になりますが、VSCodeにはLive Serverという拡張機能があります。
（左バー上の四角いブロックのボタン（カーソルを当てるとExtentionsと出てきます）を押して、検索ボックスにLive Serverと入れると出てきます）

VSCode右下にGo Liveという表示がされていればインストールできています！
もしインストールしても表示されない場合は、Ctrl + Shift + P を押してEnterで画面を再起動しましょう。

ルートディレクトリに index.html のファイルがあれば、5500番ポートが起動され、index.htmlが表示されます。
この状態でngrokを起動すれば、スマホでも確認可能です！

ホットリロード機能もあり便利なので、ぜひ使ってみてください✨