ngrok の導入手順・使い方 - fjordllc/bootcamp GitHub Wiki

ngrok とは

ローカル環境を一時的に外部へ公開できるサービスです

OGPなど外部からのアクセスが必要な機能を開発環境下でも確認できるようになります

導入手順

下記の流れで説明を記載しています

  1. インストール
  2. アクセストークンの設定
  3. 動作確認

1. インストール

1-1. OS毎のインストール

各OS毎のインストール方法は以下のようになります

最新情報が更新されている可能性もあるので、上手くいかない場合は 公式サイト を確認して下さい

  • For MacOS, use HomeBrew:
brew install ngrok/ngrok/ngrok
  • For Linux, use Apt:
curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | \
  sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && \
  echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | \
  sudo tee /etc/apt/sources.list.d/ngrok.list && \
  sudo apt update && sudo apt install ngrok
  • For Windows, use Chocolatey:
choco install ngrok

1-2. インストール成功の確認

コマンドでバージョン情報が表示できればインストール成功です

$ ngrok -v
grok version 3.2.2

2. アクセストークンの設定

2-1. アカウント登録

ngrok を利用するにはアクセストークンが必要ですので、公式のアカウント登録ページ からアカウント登録を行って下さい


2-2. アクセストークンの取得

Your Authtoken にアクセスして、アクセストークンをコピーして下さい

2-3. アクセストークンの設定

ターミナルを起動し、ホームで以下のコマンドを実行してアクセストークンの設定ファイル生成してください

$ cd ~
$ ngrok config add-authtoken [取得した個人トークンをペースト]
Authtoken saved to configuration file: /home/ymmtd0x0b/.config/ngrok/ngrok.yml]

3. 動作確認

3-1. ngrok を起動

ターミナル上で ngrok を起動して外部アクセス用の URL を確認します( Forwading の行。※このURLは ngrok を起動する度に変わるので注意！！ )

$ ngrok http 3000

ngrok                                                        (Ctrl+C to quit)
                                                                                        
Announcing ngrok-rs: The ngrok agent as a Rust crate: https://ngrok.com/rust            
                                                                                        
Session Status                online                                                    
Account                       [email protected] (Plan: Free)                          
Version                       3.2.2                                                     
Region                        Japan (jp)                                                
Latency                       71ms                                                      
Web Interface                 http://127.0.0.1:4040                                     
Forwarding                    https://d345-69-6-76-165.ngrok-free.app -> http://localhos
                                                                                        
Connections                   ttl     opn     rt1     rt5     p50     p90

※起動コマンドの 3000 は Rails のデフォルトポート番号の 3000 です。ポート番号が異なる(変更する)場合は適宜合わせて下さい

3-2. アクセス許可の設定

ngrok から開発環境にアクセスできるように許可を与えます

ngrok 起動画面の Forwarding と表示されている部分のドメイン名( ⬆の場合は https://d345-69-6-76-165.ngrok-free.app )を環境設定に組み込みます

# config/environments/development.rb
Rails.application.configure do
  #...略
  config.hosts << "d345-69-6-76-165.ngrok-free.app"
end

3-3. ローカル環境の立ち上げ

通常通り、開発環境を立ち上げます

ngrok とは別にターミナルを起動すると都合が良いのでオススメです( VSCode上なら Ctr + Shift + 0 で簡単に増やせます )

$ bin/rails s

3-4. 外部からアクセスできる事を確認

ブラウザを立ち上げてアドレスバーに ngrok が生成した外部アクセス用の URL を入力して Enter を押して下さい ( この例ではhttps://d345-69-6-76-165.ngrok-free.app)

下の画面になるので、Visit Siteボタンをクリックしてください


開発環境の画面が表示されれば、設定完了です🎉🎉🎉


その他

導入・設定後の使い方

下記手順で外部からアクセスと確認が可能です

  1. ngrok http [ポート番号]で ngrok を起動
  2. config/environments/development.rb でドメインのアクセス設定を更新
  3. bin/rails s を実行
  4. ブラウザからアクセス

エラーの対処

下図のエラーが表示される場合は、アカウント登録していないかアクセストークンの設定が上手くいっていない可能性が考えられるので確認してみて下さい

⚠️ **GitHub.com Fallback** ⚠️