ngrok入門：ローカル環境を簡単に外部公開する方法

## 0. ngrokとは
ngrokは、ローカル環境で動作しているWebサーバやアプリケーションを一時的にインターネット経由で公開するためのリバースプロキシツールです。ローカル環境をHTTPSとして公開できるため、以下のような用途で便利です。

- HTTPS通信が求められる外部サービスとの連携（※）
- 第三者がローカル環境にアクセスする必要がある場合

※例えば、LINEのMessaging API > Webhookを用いた開発を行う場合には、通信はHTTPSで行う必要があります。（[参考](https://developers.line.biz/ja/docs/messaging-api/ssl-tls-spec-of-the-webhook-source/#page-title)）

## 1. ローカル環境（Docker）の準備
### 環境構築
まずは、ngrokで公開するローカル環境を構築します。今回は簡潔にするため、Nginxのみを利用した最小構成にします。
（※[GitHub](https://github.com/KotaNakamura96/ngrok-playground)にてローカル環境用のリポジトリを用意しておりますので、そちらもご参照ください。）

```linux:フォルダ構成
.
├── docker/
│   └── nginx/
│       └── Dockerfile
├── public/
│   └── index.html
└── docker-compose.yml
```

各ファイルの内容
```Dockerfile:docker/nginx/Dockerfile
FROM nginx:latest
RUN service nginx start
```

```html:public/index.html
<h1>Hello World!</h1>
<h2>This network is enabled by ngrok.</h2>
```

```yml:docker-compose.yml
version: '3'
services:
  nginx:
    build: ./docker/nginx/
    container_name: ngrok_playground_nginx
    ports:
      - '8080:80'
    volumes:
      - ./public:/usr/share/nginx/html
```

### 動作確認
Docker環境を立ち上げて動作確認を行います。
```linux:ターミナル
docker compose up -d
```

```linux:ターミナル
open http://localhost:8080
```

ブラウザで正常に立ち上げればOKです。
![スクリーンショット 2025-02-11 15.57.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/823188/83e7687e-fa2c-0f31-0cbb-5606c028c578.png)


## 2. ngrokのセットアップ
### ngrokに新規登録をする
ngrok公式サイトの[TOPページ](https://ngrok.com/)上の右上のSign upボタンから新規登録に進みます。
![](https://storage.googleapis.com/zenn-user-upload/e6da806f4eba-20250211.png)

登録方法はいくつかあるようなので、任意の方法で登録します。
![](https://storage.googleapis.com/zenn-user-upload/054b655aa0bd-20250211.png)

登録完了したら自動的にWelcomeページ（セットアップページ）に遷移されます。
![](https://storage.googleapis.com/zenn-user-upload/72372ae3f8fe-20250211.png)

### ローカルマシンにngrokをインストール
まずはngrokをインストールします。
（私の場合はmacOSなのでHomebrewを用いてインストールします。他OSの場合は[公式サイト](https://ngrok.com/downloads/mac-os)を参考にインストールしてください。）

```linux:ターミナル
brew install ngrok
```

下記のように表示されていればOKです。
```linux:ターミナル
〜〜　中略　〜〜
🍺  ngrok was successfully installed!
```

バージョン確認
```linux:ターミナル
ngrok --version
```

### ngrokの認証トークンを設定する
サイドバーの`Your Authtoken`をクリックし、表示された認証トークンをコピーします。
![](https://storage.googleapis.com/zenn-user-upload/9951e324a7d2-20250211.png)

ターミナルに戻り、コピーした認証トークンを設定します。
```linux:ターミナル
ngrok config add-authtoken <コピーした認証トークン>
```
下記の通り表示されればOKです。（設定ファイルの場所は環境によって差異があります。）
```linux:ターミナル
Authtoken saved to configuration file: xxxxxxxx/ngrok/ngrok.yml
```

## 3. ngrokを起動して、ローカル環境をHTTPSとして外部公開する
### ngrokを起動
```linux:ターミナル
ngrok http http://localhost:8080
```
下記のように表示されればOK！
```linux:ターミナル
Session Status                online                                           
Account                       xxxxxxxxxxxxxxxx (Plan: Free)                                                                                                                                                          
Version                       3.19.1                                                                                                                                                                                        
Region                        Japan (jp)                                                                                                                                                                                    
Latency                       19ms                                                                                                                                                                                          
Web Interface                 http://127.0.0.1:4040                                                                                                                                                                         
Forwarding                    https://1de4-221-191-11-245.ngrok-free.app -> http://localhost:8080                                                                                                                           
                                                                                                                                                                                                                            
Connections                   ttl     opn     rt1     rt5     p50     p90                                                                                                                                                   
                              0       0       0.00    0.00    0.00    0.00     
```

`Forwarding`部分の`https://1de4-221-191-11-245.ngrok-free.app`が外部公開用
URLとなります。

### 動作確認
先ほどのターミナル上ではngrokが起動されていますので、別タブで下記コマンドを実行します。

```linux:ターミナル
open https://1de4-221-191-11-245.ngrok-free.app
```
最初は下記画像のようなページが初期表示されますが、Visit Siteボタンを押下します。
![](https://storage.googleapis.com/zenn-user-upload/5e7db5b36a9d-20250211.png)

ローカル環境を立ち上げた時と同じ画面が表示されればOKです。
![](https://storage.googleapis.com/zenn-user-upload/2c39befe6b20-20250211.png)

以上です。

## 補足
無料版を利用する場合は、ngrokを起動/停止した後にもう一度起動するとURLは動的に変わるのでご注意ください。

## 参考
https://ngrok.com/