はじめに
アドベントカレンダー、昔話を書こうと思ったのですがうまいこと筆が進まず、
予定を変えて知っておくとちょっと便利なサービスの紹介といきます。
Webサービスを扱っていると、Safariでの動作も確認する必要がでてきます。
iPhoneユーザーが増えた昨今では尚更ですね。
しかし開発マシンがWindowsであった場合ちょっと面倒。
もはやWindows版Safariはクローズされて久しい存在ですし、
どこかに公開しちゃえばそこにMacからアクセスすれば済む話なのですが、まずはローカルで動確したいですし。。。
概要
- ローカル動作確認時に便利な「ngrok」というサービスの紹介。
- ローカルで起動しているwebサービスを一時的に公開、インターネット経由でアクセス可能にするもの。
- これによりWinPCのローカルで動作しているサービスに対して、別のMacのSafariからアクセスできる。
利用手順
前提：windows10
1. ngrokにてユーザー登録を行う。FreeプランでOK。
2. ngrok-stable-windows-amd64.zip をダウンロード、適当なフォルダに展開。
3. 展開した（exeのある）フォルダでコマンドプロンプト起動。
4. 以下のコマンドでトークンを通す。トークンは通常 https://dashboard.ngrok.com/get-started で確認可能。
ngrok authtoken {token}
成功すると下図のようになる。
5. この時点でngrokの実行は可能。基本的な起動コマンドは以下。
ngrok http 80
成功すると下図のようになる。
- この例で言うと、「http(s)://9d1803db.ngrok.io」を「http://localhost:80」にフォワードさせる。
- この時点でlocalhost:80に何かしらのwebサービスが動いていれば、外部（インターネット）からアクセス可能。
- ドメイン部分は起動の度に振りなおされる。有料プランだとこれが固定できるっぽい。
- サービス停止は"ctrl+c"
- ngrok経由でアクセスすると、簡易アクセスログみたいなものがコマンドプロンプトに流れていく。
httpsやポート指定の場合
localhostの44300で起動されているとして、以下のコマンドで公開実行可能。
ngrok http https://localhost:44300 -host-header="localhost:44300"
ngrokを知った発端
某案件で、リッチスニペット・google構造化データを触る機会があった。
その際、google公式ドキュメントの中で「ローカルの資材をクローリングしたり、テストしたいならngrokとか使おうね」 とあったのがきっかけ。
https://developers.google.com/search/docs/guides/debug?hl=ja
ローカルページやファイアウォールで保護されているページをテストするには、ngrok などのトンネリング ソリューションを使用します。
googleお墨付きのようですし、信頼性は大丈夫かと。
参考
- ngrok でググれば記事はたくさん出てきます。