<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p><a href="https://ngrok.com/" target="_blank" rel="nofollow noopener noreferrer">ngrok</a>を利用することで、ローカルで実行しているサーバーを外部に公開できます。</p>
<p>以前は設定なしで利用できていましたが、少し前にアカウント登録が必要になりました。<br>
本資料では、アカウント登録＆設定手順とトンネリングのやり方を解説します。</p>
<h2 id="%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E7%99%BB%E9%8C%B2%EF%BC%86%E8%A8%AD%E5%AE%9A%E6%89%8B%E9%A0%86">
<a class="header-anchor-link" href="#%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E7%99%BB%E9%8C%B2%EF%BC%86%E8%A8%AD%E5%AE%9A%E6%89%8B%E9%A0%86" aria-hidden="true"></a> アカウント登録＆設定手順</h2>
<h3 id="%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B" aria-hidden="true"></a> アカウント登録する</h3>
<p><a href="https://ngrok.com/" target="_blank" rel="nofollow noopener noreferrer">ngrok</a>のWebサイトでアカウント登録を行い、<code>Authトークン</code>を取得します。</p>
<ol>
<li>
<a href="https://ngrok.com/" target="_blank" rel="nofollow noopener noreferrer">ngrok</a> へアクセス
<ul>
<li><a href="https://ngrok.com/" target="_blank" rel="nofollow noopener noreferrer">https://ngrok.com/</a></li>
</ul>
</li>
<li>右上の<code>Sign up</code>を押す
<ul>
<li><a href="https://gyazo.com/5c2dc9f08da565f5ad170b811609a20f" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/5c2dc9f08da565f5ad170b811609a20f.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></li>
</ul>
</li>
<li>メールアドレス、パスワード等入力し、アカウント作成
<ul>
<li>GitHubやGoogleアカウントから作成してもかまいません</li>
<li><a href="https://gyazo.com/1f92cdacddb9b8a794472cde195d9b29" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/1f92cdacddb9b8a794472cde195d9b29.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></li>
</ul>
</li>
</ol>
<h3 id="auth%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#auth%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B" aria-hidden="true"></a> Authトークンを取得する</h3>
<p>ログインします。<br>
ログイン後、左側メニューの<code>Your Authtoken</code>をクリックし、トークンをコピーします。</p>
<p><a href="https://gyazo.com/3616df34d446576989bb7a2e2e028ec0" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/3616df34d446576989bb7a2e2e028ec0.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<h2 id="auth%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#auth%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B" aria-hidden="true"></a> Authトークンを設定する</h2>
<p>ターミナルを立ち上げて、下記のコマンドを実行する</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">npx ngrok authtoken 前手順で取得したトークン
</code></pre></div><p><a href="https://gyazo.com/a56ae3cb99f326c27bb33392f13af1c1" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/a56ae3cb99f326c27bb33392f13af1c1.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<p>これで設定は完了です。ngrokでトンネリングしてみましょう。</p>
<h2 id="%E3%83%88%E3%83%B3%E3%83%8D%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%88%E3%83%B3%E3%83%8D%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B" aria-hidden="true"></a> トンネリングする</h2>
<p>ターミナルで以下のコマンドを実行します</p>
<div class="code-block-container"><pre><code>npx ngrok http 3000
</code></pre></div><blockquote>
<p><code>3000</code>は使用しているポート番号に置き換えてください</p>
</blockquote>
<p>実行すると、URLがいくつか表示されるので<code>https</code>から始まるものをコピーして利用しましょう。</p>
<p><a href="https://gyazo.com/a12ed66cd6a8bfc4714dc84eb223d513" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/a12ed66cd6a8bfc4714dc84eb223d513.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<p>LINE Botを作るときは、上記でコピーしたURLをLINE DevelopersコンソールのWebhook URLに設定して利用しましょう。<br>
その他にも、Webサーバーを一時的に外部公開したいときなどに利用できます。</p>
<p>手順は以上で終わりです。お疲れさまでした。</p>
<h2 id="%E6%B3%A8%E6%84%8F%E7%82%B9">
<a class="header-anchor-link" href="#%E6%B3%A8%E6%84%8F%E7%82%B9" aria-hidden="true"></a> 注意点</h2>
<p><code>auth</code>トークンは公開しないようにしましょう</p>
<details><summary>誤ってauthトークンを公開してしまったときの対応手順</summary><div class="details-content">
<ol>
<li>もし公開してしまったら、ダッシュボードの<code>Your Authtoken</code>内の一番下にリセットボタンがあるので、作りなおす<br>
<a href="https://gyazo.com/f6f4490e1ea6cfdaa651fa387a235cbb" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/f6f4490e1ea6cfdaa651fa387a235cbb.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a>
</li>
<li>Windowsだと <code>C:\Users\[ユーザー名]\.ngrok2</code> にある <code>ngrok.yml</code> ファイルを削除<br>
<a href="https://gyazo.com/749d91a1e1c3405b05c7c9fe80ab4640" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/749d91a1e1c3405b05c7c9fe80ab4640.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a><br>
Macは <code>/Users/[ユーザー名]/.ngrok2</code><br>
<a href="https://gyazo.com/e0b73b5af48438448d63f19aa917cfe8" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/e0b73b5af48438448d63f19aa917cfe8.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a>
</li>
<li>再び<code>npx ngrok authtoken [新しいauthトークン]</code>の実行</li>
</ol>
</div></details>


アカウントが必要になったngrokの利用準備手順

Discussion