ngrokのインストール方法、URLの固定方法を説明する。
本授業におけるngrokの使用
本授業ではクライアントサイドにあたるLINEbotから、サーバーサイドにあたるローカル環境のJavaアプリケーションへのアクセスを確立し、LineMessagingAPIを利用したWebhook検証を目的に使用する。
以下のURLからngrokのアカウントをサインアップしてください。
-> https://dashboard.ngrok.com/login
URLに飛ぶと、画像のような画面になるため、「Sign up for free!」をクリック。
次の画面に移動し、必要事項を入力して「Sign up」をクリックすることで、サインアップが完了する。
※メールアドレスは任意ではあるが、学校のアカウントを使用することをおすすめします。
入力が完了すると、画像のような画面が出るが「Skip」をクリック。
次の画面の「got it」をクリック。
突如アンケートのようなものがでるが、何も変更させずに「continue」をクリック。
正常にサインアップが完了すると、画像のようなダッシュボード画面が表示される。
サインアップが完了したときに表示される画面を操作する。
ngrokのインストールはspring-boot側で行うため、インストール方法は割愛する。
１．メニューバーの「Your AuthTokens」をクリックする。
２．画像のように、トークンについての情報が表示される。もし画像のような情報が表示されていなければ、新たにトークンを作成するとよい。
３．様々な情報が書かれているが、上方の「Your Authtoken」があなたのトークンである。
４．図の赤枠②内の目のアイコンは、トークンの表示切替を行うためのアイコンである。トークンをコピーして貼り付けられるようにする。
５．コピーしたIDは今後使用するため、記録しておく。
１．メニューバーの「Domains」をクリックすると、画像のような画面になる。
２．「+ Create Domain」をクリックし、ドメインを作成する。
３．ドメインがされたら、ドメインの詳細情報が書かてれいる部分をクリックすると、右側に別のタブが表示される。
４．「Domain」がコピーできるようになっているため、コピーする。
５．コピーしたものは今後使用するため、記録しておくように。
メニューバー下方の「Usage」から、ngrokの使用状況や制限について確認することができる。
特に注意すべきポイントは以下に記述するが、ngrokの利用前に必ず熟読するように。
-> https://ngrok.com/docs/guides/licensing/
① Data Transfer Out(データ送信量)：最大1GB / 月
② Requwsts(リクエスト数)：2万回 / 月
他の項目についても使用制限があります。使用制限を超えないように注意してください。万が一使用制限を超えてしまった場合は、「java-prog-qa@techitose.org」宛に連絡をしてください。またはSA・TA・先生に問い合わせてください。
ここから先は、ウィルス対策ソフトなどが原因で、課題1がうまく動かない場合の対処法を説明する。
サインアップが完了したときに表示される画面を操作する。
１．メニューバーの「Setup & Installation」をクリック。
２．「1 Connect」の中に「Installation」がある。そのなかの「Download」をクリック。すると、ファイルがダウンロードできるようになっている。
３．「Download for Windows(64-Bit)」をクリックすることで、ファイルのダウンロードが開始される(数分で完了)。「ngrok-v3-stable-windows-amd64」のような名前のzipファイルがダウンロードされていることを確認する。
ダウンロードされたzipファイルを解凍し、ファイル内にある「ngrok.exe」をクリックし起動させる。
正常起動できると、macOSはターミナル、Windowsはコマンドプロンプトのような画面が表示される。
ngrokが起動できたら、以下の画像の赤枠のコマンドをコピーし、コピーしたコマンドをngrokでペーストする。
実行すると、
Authtoken saved to configuration file: 保存先
のようなメッセージが表示されることを確認する。
ngrokで、以下のコマンドを入力する。
Windows
ngrok http 8080
または
./ngrok http 8080
macOS
./ngrok http 8080
実行すると、以下の画像のようになることを確認する。 Fowardingの欄のhttps://xxxx-xxx-xx-xx-xx.ngrok-free.app の xxxx-xxx-xx-xx-xx の部分は人によってそれぞれ異なる。
ngrokで、以下のようにコマンドを入力する。(********* は自分のドメイン名にあわせて入力する)
Windows
ngrok http --domain=*********.ngrok-free.app 8080
macOS
./ngrok http --domain=*********.ngrok-free.app 8080
実行すると、以下の画像のようになることを確認する。
課題のファイルの中の、application.properties の ngrok.enabled を false にして進めてください。
ngrok.enabled=false
また、LineBotを起動するまえに、以下のコマンドでngrokを起動しておくのを忘れないでください。
Windows
ngrok http --domain=*********.ngrok-free.app 8080
macOS
./ngrok http --domain=*********.ngrok-free.app 8080