プログラミング

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

-プログラミング
-

はじめに

ローカル環境で書いたコードを外部から呼びたいことって結構あるケースですよね。
私もローカルで書いたコードを外部のサービスから呼んで動作確認を行いたく、ngrokを導入してみました。
備忘録を兼ねてインストールから使い方まで手順を残していきます。
Macでの手順ですが、Windowsでも概ね同じだと思うので適宜読み替えてください。

ngrokとは

ngrok(エングロック)と読むらしいです。
簡単に言うと、ローカルで立ち上げたサーバ(localhost)を外部に公開できるツールです。
http、https双方でlocalhostに外部からアクセスできるようになります。
さらにありがたいことに会員登録だけで無料使えます。素晴らしい!!

公式サイトはこちら
ngrok.com

会員登録

ngrokを使うには会員登録が必要です。
最初に登録を行っていきます。

アカウント登録

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

トップページから新規登録に進む場合は右上の「SIGN UP」から登録ページへ進んでください。
f:id:sya_mu-neco:20190804011612p:plain:w500

セットアップ

アカウント登録後、ログインをするとdashboardにセットアップあるので基本は手順通りにセットアップすればOKです。
1手順ずつ進めていきます。
f:id:sya_mu-neco:20190804012122p:plain:w500

ダウンロード & 解凍

①にある「Download ngrok」の「Download for Mac OS X」をクリックして、ダウンロードします。
f:id:sya_mu-neco:20190804012332p:plain:w500

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

ngrokにPathを通す

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

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

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

vi ~/.bash_profile

f:id:sya_mu-neco:20190804013834p:plain:w500

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

export PATH=$PATH:{Path}

今回の例だと

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

f:id:sya_mu-neco:20190804014338p:plain:w500
※環境によってキャプチャとは異なります。

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

source ~/.bash_profile

f:id:sya_mu-neco:20190804014834p:plain:w500

アカウントを接続する

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

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

ngrok authtoken xxx

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

cd {dir}
./ngrok authtoken xxx

今回の例だと

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

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

f:id:sya_mu-neco:20190804020037p:plain:w500

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

localhstを外部公開する

ここから実際に外部公開していきます。
今回はlocalhost:8080で動いているサーバを外部公開していきます。
ローカル環境にサーバを立てる部分は割愛します。
localhost:8080でサーバが動いていることを前提に進めていきます。

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

f:id:sya_mu-neco:20190804022147p:plain:w500

ngokで外部公開する

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

ngrok http 8080

f:id:sya_mu-neco:20190804022514p:plain:w500

ターミナルが切り替わり、ngrokの情報が表示されます
Forwardingの矢印左側が外部からアクセスするURLになります
f:id:sya_mu-neco:20190804022903p:plain:w500

この例だと、

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

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

上記のURLにアクセスすると、localhostと同じ内容が表示されていることが確認できます。
f:id:sya_mu-neco:20190804023517p:plain:w500

管理画面の使い方

ngrokでは管理画面を利用してアクセスの内容を確認することも可能です。
Web Interfaceに書かれているURLへアクセスします。
管理画面が開き、リクエストの内容を確認できます。
f:id:sya_mu-neco:20190804024240p:plain:w500

まとめ

実際に導入してみると、なんで今まで使ってこなかったんだろうと反省するぐらい便利です!
セットアップも簡単で、コマンド一つで利用できるので手軽に導入できるのもいいです。
興味があれば試してみてください。

-プログラミング
-