初心者による初心者のためのngrok（エングロック）　-ローカル起動したFastAPIサーバーを公開化してみる-

# ngrok（エングロック）を使ってみた背景

プログラミングを始めて半年程度の初心者ですが、ローカルで立ち上げているサーバを公開できる **ngrok** の技術を使い、FastAPIのバックエンドを、Azureへ既にデプロイ済のフロントエンド（Next.js）やデータベース（MySQL）と接続し、アプリ作成にチャレンジしました。
なぜバックエンドのみAzureへデプロイしなかったかというと、バックエンドに実装したPytorchのライブラリやファイルが重く、デプロイできなかったためです。
Dockerのスキルや知識がまだ無かったのでクラウド環境へのデプロイではなく、ngrok経由の公開によって、MVPを一時的に稼働できる状態にしました。
私のような初心者にとっても、便利なツールと思いましたので、記事として使用方法をまとめてみました。



# ngrokとは何？

ngrok（エングロック）は、開発者やプログラマーが自分のパソコン（ローカル環境）で動かしているWebアプリやサーバーを、インターネット経由で外部に一時的に公開できるツールです。
https://ngrok.com/

### ngrokの基本的な仕組み

ngrokは「トンネリング」という仕組みを使い、自分のパソコンとngrokのサーバーの間に安全な通信路（トンネル）を作ります。
これにより、ngrokが発行するURL（例：[https://xxxxxx.ngrok.io](https://xxxxxx.ngrok.io/)）を使って、外部からローカルで立ち上げたアプリにアクセスできます。

### ngrokの主な用途

- ローカルで作ったアプリをクライアントやチームメンバーに見せたいとき
- スマートフォンや外部のPCから自分の開発中アプリをテストしたいとき

### ngrokの特徴

- **簡単な設定で使える**
    
    インストールしてコマンドを1つ実行するだけですぐに外部公開できます。
    
- **HTTPSにも対応**
    
    ngrokが自動でSSL証明書を用意してくれるので、「https」通信も簡単です。
    
- **様々なプロトコルに対応**
    
    HTTP/HTTPSだけでなく、TCPなどにも対応しています。
    

### イメージしやすい例

> 自分のPCで動かしているWebアプリを、友達やクライアントに“今すぐ”見せたい。でもサーバーを用意したり、難しいネットワーク設定はしたくない…
> 
> 
そんなとき、ngrokを使えばすぐに外部公開できます。 

### 注意点

- ngrokで発行されるURLは一時的なものです。ngrokを終了するとURLも使えなくなります。
- セキュリティ上、公開したくない情報が外部に出ないよう注意が必要です。
- 無料プランでは一部制限（同時接続数やURLの固定化不可など）があります。

## ngrokの起動手順
### 前提
月額25ドルの有料のサブスクを購入し、カスタムドメインと静的URLの機能を使えるようにした状態で、以下の手順を試しました。
基本料金以外に、追加使用するサービス（複数トンネルの立ち上げなど）によって別料金発生するケースありますので、公式サイトの料金情報を事前に確認した上で使用した方が良いと思います。
https://ngrok.com/pricing


**私がMacユーザーのため、Macの環境下での手順になっています。**
**公式サイトにOSごとのセットアップ手順が記載されています**

### 1. Homebrewでngrokをインストール

ターミナルで以下のコマンドを実行し、Homebrewがインストール済みか確認します。
インストールされていない場合は、公式サイト（[brew.sh](http://brew.sh/)）を参照してインストール必要。

```bash
brew --version

```

### 2. ngrokのインストール

以下のコマンドを実行してngrokをインストールします。

```bash
brew install ngrok

```

### 3. ngrokトークンの設定

ngrok公式サイトでアカウント作成後（githubアカウントで作成可）認証トークンを取得。
![image (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073116/bc2d204b-aadf-4898-8d05-33c5d6f92fff.png)


その後、以下のコマンドでトークンを登録します。

```bash
ngrok config add-authtoken <your_auth_token>

```

### 4. ドメインを発行して、New Domainからドメインを作成する

メニューバー内の`Domains`にを選択してして、右側の`New Domain`のボタンから固定ドメインを作成します。
![image (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073116/692f3437-9810-4398-8f8a-6aa1f40ed833.png)


以下のように、`jp.ngrok.io`としてドメインを指定しないとエラーになったので、以下のように設定したらうまくいきました。
![image (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073116/d525fdf9-a43b-4c37-8fc6-d95a4d8726f8.png)


### 5. ngrok.ymlにドメインを設定

自分のPC内に発行キーをコピーして配置された`ngrok.yml`ファイルを編集します。

ymlファイルを開くコマンドは以下の通りです。

```bash
nano "/Users/<your_user_name>/Library/Application Support/ngrok/ngrok.yml"

```

FastAPIサーバーを起動しているポート番号（例：8000）を指定します。

パスワードはトンネリングされたローカルサーバーを開くときのBasic認証で使用します。
（ただ、パネルディスカッションなどイベントで別のフロントエンドと繋いだりするときはパスワード設定しない方が良いかもしれません。私は最初Next.jsのフロントエンドと繋がらず、パスワード設定を取り除いたら上手く行きました）

subdomainは`jp.ngrok.io`より前の部分を記述します。

Basic認証用のパスワードを設定する場合は以下の形式で記述する必要があります。
ymlファイル内ではインデントが重要なので、慎重に入力します。

```yaml
version: "2"
authtoken: <YOUR_AUTH_TOKEN> # あなたの認証トークンを入力してください
tunnels:
  fastapi:
    proto: http
    addr: 8000 # FastAPIサーバーが動いているポート番号
    domain: <SUBDOMAIN> # 取得したカスタムドメイン jp.ngrok.ioより前の部分をここに記載
    basic_auth:
      - "user:password" # Basic認証（ユーザー名:パスワード）

```

### 6. ngrokの起動

ターミナルを開いて、FastAPIのローカルサーバーを起動しておきます。

ymlファイル内でポート8000番を指定しているので、8000番のポートで開く必要があります。
![image (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073116/3f4068f4-5840-44de-b9f7-80dbd0bfad15.png)



上記の後、新しく別ターミナルを開いて、下記コマンドでngrokを起動します。



```bash
ngrok start fastapi --config "/Users/<your_user_name>/Library/Application Support/ngrok/ngrok.yml"

```
すると、黒い画面がターミナル内で立ち上がります。
![image (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073116/de1aafb6-f969-43d0-ae84-e1d8bb154080.png)



### 7. 公開化されたFastAPIのエンドポイントにアクセスしてみる

ngrokのアカウント内のメニューバーの中にある`Endpoints`にアクセスすると、固定化したドメインを含むURLが確認できます。この表示になっている場合、公開化が成功していると考えて問題ないと思います。
![スクリーンショット 2025-04-28 14.09.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073116/d8b0bc82-d1d8-47aa-a42e-317eda6a7ae1.png)


クリックするとローカルサーバーで起動すると同じ画面（FastAPIのエンドポイントのサマリー）が出ます。
無事公開されてそうです。

![image (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073116/d1d9a94a-71c4-43e9-8166-2f3fe18655ef.png)




`/docs`にアクセスすると、FastAPIのSwagger UIが自動生成されますが、これも無事公開されてそうです。URLを確認すると、ngrokのアカウントで設定した固定ドメインが活かされていることがわかります。
![スクリーンショット 2025-04-28 14.29.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073116/ff8f06b4-c21f-4514-8a47-c1467e60e0bb.png)


### 8. Traffic Inspectorで通信確認

ngrokのアカウント内のTraffic Inspectorで通信履歴を確認できます。

これが便利で、フロントからのリクエストに対するレスポンス内容確認がタイムリーに行えますので、エラーハンドリングが容易です。
![image (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073116/1bfe1a58-ee46-41ef-a8bf-606babe66a2a.png)




## おわりに
サクッとアプリを公開化できるngrokは、チーム内での共有という観点から、利便性が高いと感じています。
また、バックエンドとフロントエンドで別々のフレームワークを使っている時にすぐに接続テストが可能なので、そのようなシーンでも活用できると思います。

## 参考にさせていただいた記事
ngrokの内容やインストール手順は、以下の記事を参考にさせていただきました。
https://zenn.dev/manase/articles/03df0e18c93755