🕳

アカウントが必要になったngrokの利用準備手順

に公開
LINE
npm
ngrok
tech

はじめに

ngrokを利用することで、ローカルで実行しているサーバーを外部に公開できます。

以前は設定なしで利用できていましたが、少し前にアカウント登録が必要になりました。
本資料では、アカウント登録＆設定手順とトンネリングのやり方を解説します。

アカウント登録＆設定手順

アカウント登録する

ngrokのWebサイトでアカウント登録を行い、Authトークンを取得します。

  1. ngrok へアクセス
  2. 右上のSign upを押す
    • Image from Gyazo
  3. メールアドレス、パスワード等入力し、アカウント作成
    • GitHubやGoogleアカウントから作成してもかまいません
    • Image from Gyazo

Authトークンを取得する

ログインします。
ログイン後、左側メニューのYour Authtokenをクリックし、トークンをコピーします。

Image from Gyazo

Authトークンを設定する

ターミナルを立ち上げて、下記のコマンドを実行する

npx ngrok authtoken 前手順で取得したトークン

Image from Gyazo

これで設定は完了です。ngrokでトンネリングしてみましょう。

トンネリングする

ターミナルで以下のコマンドを実行します

npx ngrok http 3000

3000は使用しているポート番号に置き換えてください

実行すると、URLがいくつか表示されるのでhttpsから始まるものをコピーして利用しましょう。

Image from Gyazo

LINE Botを作るときは、上記でコピーしたURLをLINE DevelopersコンソールのWebhook URLに設定して利用しましょう。
その他にも、Webサーバーを一時的に外部公開したいときなどに利用できます。

手順は以上で終わりです。お疲れさまでした。

注意点

authトークンは公開しないようにしましょう

誤ってauthトークンを公開してしまったときの対応手順
  1. もし公開してしまったら、ダッシュボードのYour Authtoken内の一番下にリセットボタンがあるので、作りなおす
    Image from Gyazo
  2. Windowsだと C:\Users\[ユーザー名]\.ngrok2 にある ngrok.yml ファイルを削除
    Image from Gyazo
    Macは /Users/[ユーザー名]/.ngrok2
    Image from Gyazo
  3. 再びnpx ngrok authtoken [新しいauthトークン]の実行

Discussion