ngrok でラクラクウェブ開発！

１．ngrokとは

「ngrok」とは、簡単に言いますと自分のローカル環境の状態を外部に公開できるものになります。
例えば、react や vue 等での npm run dev やDocker等で開発環境を立ち上げるかと思いますが、それを公開することができるので取引先や開発者などに確認してもらったりすることが簡単にできます。

２．ユーザー登録

まずは「公式サイト」にアクセスしてユーザー登録をします。googleやgithubがあればすぐできます。

３．インストール

公式サイトにログイン後に表示されるzipファイルをダウンロードし、解凍して任意の場所に保存します。
保存をしたら「ngrok.exe」まだのパスを通しておいてください。

４．使用方法

公式サイトのマイページで「Connect」という項目があり、それをコピーしてローカルPCのコマンドラインで実行します。

ngrok config add-authtoken **********************************

***** は生成された半角英数字です。

その後、npm run dev 等でテスト環境を起動し、その環境のポート番号を指定してコマンドを打ちます。

 ngrok http 3000

※ 3000 はポート番号で、それぞれ環境によって合わせてください。

実行すると、ターミナル上でURLが表示されるので、それが公開するURLとなります。

https://de94-2400-2400-c42-3a00-1d8d-1f94-777f-8888.ngrok-free.app/