Docker環境でLIFF Inspectorを使いLIFFアプリをデバッグできるようにする

LINEログインを使う 未分類
2023.03.24

2022年4月25日にリリースされたLIFF Inspectorを使って、ローカル環境（Docker環境）でLIFFアプリをデバッグする方法をまとめます。

前提環境

・OS：Windows
・WSL（Ubuntu）上でDocker環境構築
・ngrokが使える
・LIFFアプリは登録済み

LIFF Inspectorって？

LIFFアプリをデバッグするためのプラグイン。LIFFアプリを実行している端末とは別PC上でChrome DevToolsを使いLIFFアプリのデバッグが出来るようになります。

詳しい仕様は、公式を参照（日本語版もあります）

始め方

ここからの流れは、コチラのブログを参考に記載しています。

LIFF Inspectorは、２つのコンポーネントを使います

①LIFF Inspector Server・・・LIFFアプリとChrome DevToolsの通信を仲介するサーバー
②LIFF Inspector Plugin・・・コードに組み込みます

LIFF Inspector Serverを起動する

$ npx @line/liff-inspector

このコマンドを入力すると、

Debugger listening on ws://[Inspector Server Address]:9222

といった形でInspector ServerのURLが返ってきます。これでサーバーの立ち上げは完了です。

LIFF Inspector PluginをLIFFアプリに組み込む

$ npm install @line/liff-inspector

これで、プラグインを組み込み、下記のコードを追記します。

import liff from '@line/liff'
import LIFFInspectorPlugin from '@line/liff-inspector'

liff.use(new LIFFInspectorPlugin())

このコードは、liff.initする前に必ず追記しておく。
LIFF Inspector Pluginは、liff.initが動作する前に、LIFF Insector Serverに接続を試み、接続が成功した後、liff.initが完了次第、Chrome DevToolsでのデバッグが可能になります。

ローカルをngrokでHTTPSで公開する

LIFFアプリのエンドポイントに登録するにはHTTPSで公開する必要があるので、ngrokを使用する。
公開するのは、フロント、サーバー、LIFF Inspector Serverの３つです。

ngrokのconfigファイルを書き換える

configファイルは、~/.config/ngrok/ngrok.ymlにある（この場所は、ngrokを使う環境によって違います）。
公開するそれぞれのportをconfigファイルに追記する（赤字）

version: "2"
authtoken: [token]
tunnels:
  api:
     addr: 8080
     proto: http
  front:
     addr: https://localhost:[dockerで設定しているport]
     proto: http
  liff-inspector:
     addr: http://[Inspectorサーバーを起動した際に主力されたURLのws://以下]
     proto: http
ngrokでポートを公開する

以下のコマンドを実行し、3つのポートをHTTPSで公開する

$ ngrok start api front liff-inspector

LIFFアプリのエンドポイントURLを設定する

ngrokで公開されたURLを使って、LIFFアプリのエンドポイントに登録するURLを作成します

登録するURL

[frontの公開URL]/?li.origin=wss://[liff Inspector Serverの公開URL]
例）https://xxxx-113-106-200-100.jp.ngrok.io/?li.origin=wss://aaaa-113-106-200-100.jp.ngrok.io

※実際のLIFFアプリのURLに適宜修正してください

Chrome DevToolsでデバッグする

ここまで準備できたら、LIFFアプリを使用する端末で動かします。
正しく接続できると、LIFF Inspectorサーバーのログに下記のようなログが出力されます

connection from client, id: 1234567890-xxxxxxxx
DevTools URL: devtools://devtools/bundled/inspector.html?wss=xxxx-xx-xxx-xxx-xxx.jp.ngrok.io/?hi_id=1234567890-xxxxxxxx

これが表示されたら、DevTools URLに続く太文字で示した箇所のURLをコピーし、Chrome系のブラウザのアドレスバーに入力し、DevToolsでデバッグします。

以上が、LIFF Inspectorを使ったLIFFアプリのデバッグ方法でした。
間違った情報等あれば、指摘お願いしますm(__)m
仕方ないのですが、ngrokの無料版の場合、公開URLは固定されないので、エンドポイントに登録するURLを毎回変更する必要があります。

コメント

タイトルとURLをコピーしました