ぼん

<h1 id="ngrok">
<a class="header-anchor-link" href="#ngrok" aria-hidden="true"></a> ngrok</h1>
<ul>
<li>
<p>読み：エングロック</p>
</li>
<li>
<p>ローカルPC上で稼働しているサービスを外部公開できる<br>
例えば、↓こんな具合にlocalhost:3000を外部に公開することができる</p>
</li>
</ul>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">ngrok http <span class="token number">3000</span>
</code></pre></div><ul>
<li>あくまで「簡易的に」なのでおもに開発用途</li>
</ul>
<h2 id="signup">
<a class="header-anchor-link" href="#signup" aria-hidden="true"></a> SignUp</h2>
<ul>
<li>アカウント作成<br>
<a href="https://dashboard.ngrok.com/get-started/setup" target="_blank" rel="nofollow noopener noreferrer">https://dashboard.ngrok.com/get-started/setup</a>
</li>
</ul>
<h2 id="install">
<a class="header-anchor-link" href="#install" aria-hidden="true"></a> Install</h2>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash"> brew <span class="token function">install</span> ngrok
</code></pre></div><p>check</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">ngrok <span class="token parameter variable">--version</span>
</code></pre></div><p>アカウントを接続</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">ngrok config add-authtoken XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</code></pre></div><p>デフォルトの構成ファイルに保存される</p>
<div class="code-block-container"><pre><code>Authtoken saved to configuration file: /Users/yourname/Library/Application Support/ngrok/ngrok.yml
</code></pre></div><p>Tokenはここから確認できる<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4e135c5136279" src="https://embed.zenn.studio/card#zenn-embedded__4e135c5136279" data-content="https%3A%2F%2Fdashboard.ngrok.com%2Fget-started%2Fyour-authtoken" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://dashboard.ngrok.com/get-started/your-authtoken" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://dashboard.ngrok.com/get-started/your-authtoken</a></p>
<h2 id="%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89help">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89help" aria-hidden="true"></a> コマンドHelp</h2>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">ngrok <span class="token builtin class-name">help</span>
</code></pre></div><h2 id="%E5%85%AC%E9%96%8B">
<a class="header-anchor-link" href="#%E5%85%AC%E9%96%8B" aria-hidden="true"></a> 公開</h2>
<ul>
<li>localhost:3000を公開する</li>
</ul>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">ngrok http <span class="token number">3000</span>
</code></pre></div><ul>
<li>終了</li>
</ul>
<div class="code-block-container"><pre><code>Ctrl+C
</code></pre></div><p>or</p>
<div class="code-block-container"><pre><code>killall ngrok
</code></pre></div>