![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2023/08/010_ngrok_site-1024x703.png)
- サイトを制作していると、自分のパソコン上で開発しているサイトをクライアントに直接見てもらえたら便利だと思えることがあります。
- 通常は、確認サイトを用意して、開発した内容を確認サイトに反映、確認サイトをクライアントに確認いただく流れになると思います。
- ngrok(エングロック)というサービスを利用すると、自分のパソコン上で動作しているサイトをインターネット経由で安全にクライアントに確認いただくことが出来ます。
目次
ngrokとは
- 公式サイトでの説明
- ngrok は、インターネット上でアプリケーションとサービスをホストし、保護するための最速の方法です。
- ngrok は、アプリをインターネット上に公開する最も速い方法です。
ngrokの仕組みは、公式サイトのインタラクティブな説明を見ると分かりやすいです。
ngrokへのサインアップ、ダウンロード
ngrokへのサインアップをした後、ログインします。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2023/08/020_ngrok_download-1024x696.png)
- Windows版のアプリをダウンロードして、解凍します。
- 認証用のトークンの設定をしておきます。
事前に外部に共有するためのサーバを起動
検証用にPythonで、ポート8000を使って、サーバを起動しておきます。
$ python3 -m http.server 8000
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2023/08/4e62169cede85a8aa6f7e802a5e7940e-1024x607.png)
ローカルホストでの表示を確認します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2023/08/22d207f064202fd03ae64c984051bd38-1024x801.png)
ngrokの起動
ダウンロードした ngrok.exe を起動します。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2023/08/e8969bc3bdbc24534b80ccb1a54a4dea-1024x577.png)
ローカルホストのポート8000で起動しているサーバに接続
> ngrok http 8000
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2023/08/441f6c301bc0c7d6fff2304a4829fa4c-1024x576.png)
- https://●●●●●●●●●●●●.ngrok-free.app というURLが発行されます。
- 上記のURLへのアクセスが、http://localhost:8000 に接続されています。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2023/08/a9b8a871ff0ef9b2f696d2b0e143371b-1024x576.png)
ngrok経由でのサイト表示確認
上記のURLにアクセスをして、ngrok経由のローカルホストへのアクセスを確認
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2023/08/3c56ff50afbe9a51fe8ca5eb33b79878-1024x722.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2023/08/2686abf6199422fcea117ecd56b4251d-1024x791.png)
ローカルホストのサーバにアクセスが記録されています。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2023/08/6c64d38b3105eb77720c44d11e6f1bca-1024x607.png)