<p>Next.jsのAPIrouteを利用して、webhookのテストをローカル環境でしたかったので<strong>ngrok</strong>を使った忘備録です。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2ea1647207c8" src="https://embed.zenn.studio/card#zenn-embedded__2ea1647207c8" data-content="https%3A%2F%2Fngrok.com%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://ngrok.com/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://ngrok.com/</a></p>
<h2 id="1.-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#1.-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 1. インストール</h2>
<p>Homebrew経由でインストールします。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">brew <span class="token function">install</span> <span class="token parameter variable">--cask</span> ngrok
</code></pre></div><h2 id="2.-%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B">
<a class="header-anchor-link" href="#2.-%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E7%AB%8B%E3%81%A1%E4%B8%8A%E3%81%92%E3%82%8B" aria-hidden="true"></a> 2. サーバーを立ち上げる</h2>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token comment"># 引数の最後にある 3000 はローカルマシンが受け付けているポート番号</span>
ngrok http <span class="token number">3000</span>

<span class="token comment"># ngrok by @inconshreveable                                                                           (Ctrl+C to quit)</span>
<span class="token comment"># </span>
<span class="token comment"># Session Status                online</span>
<span class="token comment"># Session Expired               Restart ngrok or upgrade: ngrok.com/upgrade</span>
<span class="token comment"># Version                       2.3.40</span>
<span class="token comment"># Region                        United States (us)</span>
<span class="token comment"># Web Interface                 http://127.0.0.1:4040</span>
<span class="token comment"># Forwarding                    http://xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx.ngrok.io -&gt; http://localhost:3000</span>
<span class="token comment"># Forwarding                    https://xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx.ngrok.io -&gt; http://localhost:3000</span>
<span class="token comment"># </span>
<span class="token comment"># Connections                   ttl     opn     rt1     rt5     p50     p90</span>
<span class="token comment">#                               19      0       0.00    0.00    30.00   30.47</span>
<span class="token comment"># </span>
<span class="token comment"># HTTP Requests</span>
<span class="token comment"># -------------</span>
</code></pre></div><p>あとは表示された<strong>Forwarding</strong>で表示されたURLに対して、webhookのリクエスト先を設定することで、Next.jsのログに流れてきます。</p>
<h2 id="%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> 終わりに</h2>
<p>初めて触りましたが、めちゃくちゃ便利でした。</p>
<h2 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h2>
<ul>
<li><a href="https://blog.microcms.io/local-custom-notification/" target="_blank" rel="nofollow noopener noreferrer">https://blog.microcms.io/local-custom-notification/</a></li>
</ul>


ngrokを使ってwebhookをテストする

Discussion