構築中サイトのテスト公開に便利、「ngrok」(エングロック)の使い方

![ngrokマイページ・ダッシュボード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94360/fd825580-9a70-19b6-e37a-744b22a73f49.png)

# ngrokとは
ローカルPCで構築中のWebサイトを外部公開できるサービスおよびCLIアプリです。`3e26.*****.jp.ngrok.io` のように、ngrokが自動生成するURLを使って、外部の人に簡単にアクセスさせることが可能です。

![ngrok実行イメージ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94360/52a8bb78-2339-85f4-4499-678d2c69d9af.png)

## 主な利用シーン
- スマホ実機でローカル環境にアクセス
- リモートチームメンバーに共有
- 制作中のサイトを顧客に見せる

ngrokを使えば、テスト用サーバを用意せずに、カジュアルに外部公開できます。

## 必要条件
ローカルPCでWebサーバが動作していることが前提です。

# アカウントの作成

1. [ngrok公式サイト](https://ngrok.com/)でアカウントを作成します。GitHubアカウントを使用することで簡単に作成できます。
2. アカウント作成後、[ユーザ画面にログイン](https://dashboard.ngrok.com/)します。

# クライアントのインストール

## Macでのインストール

1. ダッシュボードに表示されるコマンドをコピーして、ターミナルで実行します。トークンが自動で埋め込まれているので、そのままコピペするだけでインストールと初期設定が完了します。

![Macの場合](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94360/9f358994-a42f-adab-1344-a0e9ebbf6433.png)

## WSLでのインストール

Linuxのインストール手順を使います。Macと同様、コピペでインストールが可能です。下記は、パッケージリポジトリを追加する手順が含まれるため少し複雑に見えますが、インストール自体は`apt`コマンドで行うようになっています。

![Linuxの場合](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94360/e74965a0-8b21-5a69-2063-6e491d1a724d.png)

なお、Linux用Homebrewではインストールできません。

## Windowsでのインストール(非WSL)

ngrok公式サイトでは、Chocolatyを使ったインストール手順が提供されており、Macの場合と同様、コピペで簡単にインストールと初期設定を済ませることができます。

とはいえ、開発が停滞しているChocolatyを今から導入するのもどうかと思います。Chocolatyをインストールしていない場合は、代わりに、Windowsで広く普及している**WinGet**を使ってインストールすることを推奨します。

### WinGetでのインストール

```powershell
winget install Ngrok.Ngrok
```

もしWinGetがインストールされていない場合は、Microsoft Storeアプリから簡単にインストールできます。


### Chocolatyでのインストール

Chocolatyを導入済みの場合は、以下の公式コマンドでインストールするとよいでしょう。

```powershell
choco install ngrok
```

WinGetでもChocolatyでも、インストール後の初期設定が必要です。Mac・WSLと全く同じコマンドを入力します。ngrokサイトのダッシュボードからコピペして実行してください。

# ngrokの使い方

以下のコマンドでローカルのWebサイトを外部公開できます。

```bash
ngrok http 80
```

![ngrok実行イメージ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94360/52a8bb78-2339-85f4-4499-678d2c69d9af.png)

生成されたURL（例: `3e26.*****.jp.ngrok.io`）を他のメンバーや顧客に共有できます。公開を停止したい場合は、`ctrl + c` で停止できます。

# 稼働状態の確認

稼働中のngrokトンネルの状態は、以下のURLで確認できます。

```bash
http://127.0.0.1:4040
```

![稼働状態の確認](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94360/52952808-3e7d-c715-8346-929e71d67d2a.png)

# 永続的な固定URLの利用

永続的な固定URLを利用することもできます。セッションごとにURLが変わる通常の利用とは異なり、一度生成された固定URLは同じものを何度でも使うことができます。

「Claim your free static domain.」をクリックすると、永続的な固定URLが**自動生成**されます。URLを構成される文字列はランダムに決定されます。

![Claim your free static domain](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94360/61e6cfbe-6c9c-f52b-e90c-07308c1c964a.png)

自動生成されたURLが気に入らない場合、何度でも再生成が可能です。有料プランを契約すると、任意のURLを設定できるようになります。

![固定ドメイン生成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94360/efd1934d-cce8-312d-3295-25ab0e22a848.png)

# SSHでのトンネル構築

ngrokでは、SSH公開鍵を登録することで、SSHの`R`オプションを使ってトンネルを実現できます。これにより、ngrokコマンドのインストールが不要になります。

[SSH Public Keys](https://dashboard.ngrok.com/tunnels/ssh-keys)のページ内では、SSH公開鍵を登録した後、提供されているコマンドラインをコピペして使うだけで簡単にトンネルを開始できます。

ページ内に書かれているように、以下のコマンドでトンネルを開始できます。

```bash
ssh -R 443:localhost:80 v2@connect.ngrok-agent.com http
```

このコマンドを使用することで、ローカルのポート80をリモートのポート443にリバーストンネリングし、ngrokエージェントを介してトンネルを構築できます。コマンドラインを使い慣れている人なら、このくらいならHistoryから簡単に呼び出せるでしょうから、環境に影響を与えずこちらを利用するのもよさそうです。

# まとめ

ngrokを使うことで、簡単なコマンド一つでローカル環境を外部に公開できます。