Chapter 07

【事前準備：補足】ngrokを使ったローカル開発環境の構築

tokku5552
tokku5552
2022.11.26に更新
このチャプターの目次
  1. ngrokとは
  2. ngrokを使用する理由
    1. 構築手順
  3. 補足

ngrokとは

ngrok(エングロック)とは、ローカルPC上で稼働しているローカルサーバー(localhost:8080のようなサーバー)を一時的に外部公開(疑似デプロイ)できるサービスです。
アカウント登録が必要ですが、無料で1環境まで外部公開することができます。

ngrokを使用する理由

  • 開発環境でもログイン機能が使用でき、ユーザー情報が取得できるようになる。
  • いちいち本番環境にデプロイして動作確認するといった手間が無くなる。

純粋なWebアプリの挙動確認だけなら、Flutterでデバッグ起動を行うだけで簡単に確認できます。
ただ、アクセストークンを必要とするようなLINEログインした状態が必須のアプリでは確認が行なえません。
LINEログインのリダイレクト先がローカルサーバーだと到達できないためです。(localhost:8080 宛にレスポンスしても届かない、レスポンスできない。)


LINE Developers より引用

構築手順

※ハンズオンで作成した最終成果物だけを動かしたい。という方は本手順は実施不要です。
ローカルで色々とさわって動かしたい。最初から順に動作確認しながら作成したい。という方はngrokを導入した方が開発が楽になります。(サンプルプロジェクトの場合は更に本チャプターの最後に記載している補足も合わせて実施する必要があります。)

  1. ngrokのアカウント登録を行います。(無料)

  1. 実行ファイルをダウンロードしてインストールします。(macでhomebrewをインストール済みならbrew install ngrokでも可)

  2. AuthTokenをconfigファイルに設定します。

ngrok config add-authtoken <AuthToken>
  1. アプリ(FlutterWebアプリ)をポート指定で実行します。
flutter run -d web-server --web-port <ポート番号>
  1. ngrokを実行します。
ngrok http <ポート番号>

# 例)
ngrok http 8080

以下のようにランダムなURLが生成されます。

  1. 生成されたURLを「LINE Developers コンソール」の 「<user名> / <チャネル名> / LIFF / LIFFアプリ詳細 / エンドポイントURL」 に設定します。

  1. LINE DevelopersコンソールのLiff URLにアクセスしてアプリを起動します。

補足

サンプルプロジェクトでは、外部ブラウザ/LINE内ブラウザで開いた場合は動作しないようになっています。
ngrokを使ってローカルデバッグを行いたい場合は、これを対策する必要があります。
web/flutter_liff.jsのinit.thenの中や別のメソッドとして以下のようなlogin処理を挟むようにしてください。

// Liffブラウザでなく、ログイン済みでない場合
if(!liff.isInClient() && !liff.isLoggedIn()){
  // LINEログインを行う
  liff.login();
}

https://developers.line.biz/ja/reference/liff/#login