かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

ngrok で Azure Functions のローカルで実行しているエミュレーターにインターネットからアクセスできるようにしてみよう

Memo Azure

いつも忘れるのでメモです。

ngrok 使うとローカルのサーバーを簡単にインターネットからアクセスするためのおぜん立てをしてくれる！ 開発中のお供に便利です。例えば Google Assistant 対応アプリ作るときに Dialogflow 使ってると Webhook を指定できるのですが、こいつはインターネットに公開されてないといけない。

でもデバッグするにはローカルで実行されてるもののほうが都合がいいです。 別に Azure にデプロイしてもデバッガアタッチできるのですがレスポンス面ではローカルにあるほうがいいですしデプロイが割とすぐ終わるとしてもローカル実行に比べると開発のテンポが悪いですしね。

そんなわけで ngrok 使うと手元のものがインターネットに公開されるので便利。 理想的には Dialogflow で作ったものもローカル実行が出来ればいいのですが、出来ないことを嘆いても仕方がないですね。

やってみよう

Azure Functions で HttpTrigger の関数を作って実行するとこんな URL でアクセスできるようになります。

http://localhost:7071/api/Function1

なので以下のような ngrok のコマンドを実行すればいいのですが…

ngrok http 7071

だけで実行して

ngrok by @inconshreveable                                                                               (Ctrl+C to quit)

Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://54eeb34f.ngrok.io -> localhost:7071
Forwarding                    https://54eeb34f.ngrok.io -> localhost:7071

Connections                   ttl     opn     rt1     rt5     p50     p90
                              1       0       0.01    0.00    0.03    0.03

うまくいったような雰囲気になるのですが postman あたりで上記 URL を叩いてみるとこんな結果になります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<HTML>
    <HEAD>
        <TITLE>Bad Request</TITLE>
        <META HTTP-EQUIV="Content-Type" Content="text/html; charset=us-ascii">
    </HEAD>
    <BODY>
        <h2>Bad Request - Invalid Hostname</h2>
        <hr>
        <p>HTTP Error 400. The request hostname is invalid.</p>
    </BODY>
</HTML>

これは、単純に Azure Functions のローカルエミュレータが localhost からのアクセスしか許可してくれないというのがあるからですね。

で、これが今回メモしたかった内容なのですが、そういうときは ngrok 経由の呼び出しもローカルからのアクセスですよ～っていうのをエミュレーターに送り付けてだましてやればいいのですが、その設定が -host-header オプションになります。

こんな感じで指定します。

ngrok http 7071 -host-header="localhost:7071"

これで表示された URL に postman でアクセスすると無事 200 番 OK が返ってくるようになります。

ということで、毎回調べるのでメモでした。