VScodeなどローカル環境で制作中のサイトをアニメーションも含めて確認してもらいたいときには、簡単にサクッと公開URLが作成できてテスト公開できるngrok（エヌグロック）が便利。
目次
ローカル環境テスト公開 よく使う3つの方法を比較
| Live Share（VSCode） | ngrok（トンネル） | GitHub Pages / Netlify 等 | |
|---|---|---|---|
| 🔧 所要時間 | 初回5分 / 2回目以降30秒 | 初回10分 / 2回目以降1分 | 初回30分〜 / 2回目以降5〜10分 |
| 💻 手間感 | VSCode拡張を入れる＋相手もVSCode必要 | インストール → トークン設定 → コマンド打つだけ | Git管理＆アップロード作業が必要（慣れたら速い） |
| 💸 コスト | 完全無料 | 無料あり（URLは毎回変わる） 有料でカスタムドメイン | 基本無料（有料プランあり） |
| 🔸メリット | 一緒に編集できる | URLすぐ発行、誰でも見れる | 公開状態を再現できる |
| 🔸デメリット | 相手にもVSCode必須 | PCがスリープしたら接続が切れる | デプロイ作業がやや面倒 |
| 🔐 セキュリティ | URL知ってる人だけがアクセス可能（ただし相手に編集も許可） | ローカルにトンネルを開ける＝慎重さ必要 | 一般公開される前提。アクセス制御は工夫が必要 |
| 🎯 向いてる場面 | コードレビューや共同編集向け | 最速で「いま見せたい」が叶う | 公開前の確認やポートフォリオ、納品チェックなど |
ということで、VSCodeがいちばん手間がかからないけど、クライアントさんはきっとVSCode入れてないだろうから、とりあえず見てもらうならngrokかも。
ngrok（エヌグロック）の導入方法
所要時間の目安：初回10分（2回目以降は1分）
【ステップ1】ngrokをインストールする（Homebrew使用）
ターミナルを開いて下記コードでngrokをインストールする（Homebrew使用）
※Homebrew未導入なら先に brew のインストールが必要
brew install ngrok【ステップ2】ngrokの無料アカウントを作成
- https://dashboard.ngrok.com/signup へアクセス
- GoogleアカウントでもOK。サクッと登録。
- ダッシュボードで「Authtoken」が表示されるのでコピー
【ステップ3】ターミナルにAuthtokenを登録
ngrok config add-authtoken <ここにコピーしたトークン>【ステップ4】ローカルで起動しているサーバーのポートをngrokでトンネル
たとえば、VSCode + Live Serverなら http://127.0.0.1:5500 で動いているはずなので、ポート5500を指定：
ngrok http 5500これで完了！
https://xxxx-xxxx-xxxx.ngrok-free.app という感じのURLを先方に送れば見てもらえる！
パスワードをかけたいときは、下記の user と pass のところをそれぞれ変更する。
ngrok http --basic-auth="user:pass" 5500パスワードをかけるにしろかけないにしろ、ローカルマシンにトンネルを開くという仕組みなので、信用できる相手かよく考えなきゃだめ。
☕ テスト公開中はMacがスリープしないように
パソコンがスリープすると接続が切れてしまうので、スリープしない設定を忘れずに。
caffeinate環境設定を開いて設定して、あとでまた戻すより、ターミナルをもう一個開いて「caffeinate」しておくほうがらくかも。
コメント