ngrokローカルサイトを外部に公開してみた

アカウント登録

以下リンクから登録画面を開き、必要な情報を入力しアカウント登録します。
GitHub、Googleアカウントを使用した登録も可能です。
dashboard.ngrok.com

トップページから新規登録に進む場合は右上の「SIGN UP」から登録ページへ進んでください。

ダウンロード ＆ 解凍

①にある「Download ngrok」の「Download for Mac OS X」をクリックして、ダウンロードします。

ダウンロードしたZipを解凍します。
手順にはコマンドで解凍するよう書かれてますが、ダブルクリックでOKです。
ファイルは任意の場所に移動しておきましょう。

ngrokにPathを通す

手順にないですが、パスに追加して「ngrok」で実行できるようにしておくと便利です。
念のため、パスの通し方も書いておきます。

私の環境では、「ngrok」を「/Users/xxx/Documents/prpgram/ngrok/ngrok」に置いています。
今後は、このパスを基準に書いていくので、皆さんの環境に合わせて読み替えてください。

ターミナルをで以下のコマンドを実行し、「bash_profile」を開きます。

vi ~/.bash_profile

「bash_profile」にngrokのパスを追加します。
ここをを書き間違えるといろいろめんどくなるので、慎重にお願いします。

export PATH=$PATH:{Path}

今回の例だと

export PATH=$PATH:/Users/xxx/Documents/prpgram/ngrok

※環境によってキャプチャとは異なります。

ターミナルをで以下のコマンドを実行し、変更を反映します。

source ~/.bash_profile

アカウントを接続する

③にあるコマンドを実行します。

パスを通している場合は、ディレクトリを意識する必要ないので、ターミナルを開いてコマンドを実行します。

ngrok authtoken xxx

パスを通していない場合は、ngrokのあるディレクトリに移動してからコマンドを実行します。

cd {dir}
./ngrok authtoken xxx

今回の例だと

cd Users/xxx/Documents/prpgram/ngrok
./ngrok authtoken xxx

xxx：アカウントごとに振られるコードなので伏せ字にしてます。

ここまででセットアップ完了です。

ローカル環境が立ち上がっていることを確認する

ngokで外部公開する

ターミナルで以下コマンドを実行して外部公開します。
「8080」の部分がローカルのポートになります。

ngrok http 8080

ターミナルが切り替わり、ngrokの情報が表示されます
Forwardingの矢印左側が外部からアクセスするURLになります

この例だと、

• http://8ccda5c6.ngrok.io
• https://8ccda5c6.ngrok.io

でlocalhost:8080が表示されます。
URLはngrok起動時に毎回ランダムに生成されます。
例なので、このリンクにアクセスしても何も表示されないです。

外部公開用のURLにアクセスする

上記のURLにアクセスすると、localhostと同じ内容が表示されていることが確認できます。