LIFF CLIとngrokを使ったLIFF/LINEミニアプリのお手軽実機確認

"LINEミニアプリ Tech Meetup #2" で発表した内容です

https://classmethod.connpass.com/event/356983/

Transcript

1. LIFF CLIとngrokを使った LIFF/LINEミニアプリの お⼿軽実機確認 クラスメソッド株式会社 リテールアプリ共創部 マッハチーム morimorikochan
2. 名前 morimorikochan 所属 クラスメソッド    リテールアプリ共創部    マッハチーム🚀 趣味 ゲーム X @marooon88 ⾃⼰紹介
3. ⽬次 1. 実機確認がわりと⼿間 2. LIFF CLI の紹介 3. ngrok の紹介 4. 設定⽅法 5. ngrokのみを⽤いた代替⽅法 6. まとめ
4. 開発中のLIFF/LINEミニアプリをスマホで実機確認するのはわりと⼿ 間 理想: ⼿元のコードを直したら、リアルタイムに実機に反映されて欲 しい 現実: コードを毎回デプロイして待ったり、LINE Developerコンソー ルでLIFFのURLを毎回書き換えたり、結構⾯倒😫 実機確認がわりと⼿間
5. LIFF CLI + ngrok による⼀時的な外部公開 LIFF CLIとngrokを使って、ローカルPCで動作する開発⽤のLIFFアプ リを⼀時的に外部公開することができます💡 利⽤イメージ 1. ローカルPCでLIFF CLI + ngrokでプロキシを起動 2. スマホでLIFF/LINEミニアプリにアクセス 3. スマホからngrokを経由してローカルPCで動作するLIFFアプリに アクセス
6. • “ngrok is a globally distributed **reverse proxy** that secures, protects and accelerates your applications and network services, no matter where you run them. You can think of ngrok as the front door to your applications” • ローカルで動作しているサーバーを簡単に外部からアクセスでき るようにするツール • わりと昔からあるサービス ◦ 少なくとも6,7年前にはあった ◦ ハッカソンで審査時のデモ⽤に使われてたイメージ ngrokとは
7. LIFF CLIとは • “LIFFアプリの開発を円滑にするCLIツール” • 各種機能を提供 ◦ LIFFアプリを作成、更新、参照、削除する ◦ LIFFアプリの開発環境を作成する ◦ LIFFアプリをLIFF Inspectorでデバッグする ◦ ローカル開発サーバーをHTTPSで起動する • npmで提供されている ◦ インストール後、チャネルの設定をすることで各種機能が実⾏可能 https://developers.line.biz/ja/docs/liff/liff-cli/
8. LIFF CLI serve とは • “ローカル開発サーバーをHTTPSで起動する”コマンド • --proxy-type ngrok オプションを指定すると ◦ 指定したポートがngrokで公開され、URLが発⾏される ◦ LIFFアプリのURLにngrokのURLが設定される https://developers.line.biz/ja/docs/liff/liff-cli/#serve-proxy-type
9. 1. ngrokでアカウントを作成 • https://ngrok.com/ • 無料のプランで⼗分 2. authtokenをコピー • ログイン後に表⽰される • “brew install”は不要 設定⽅法（ngrok）
10. 1. LIFF CLIをインストール 2. 操作するチャンネルを設定 $ liff-cli channel add 2007821742 ? Channel Secret?: ******************************** Channel 2007821742 is now added. $ liff-cli channel use 2007821742 Channel 2007821742 is now selected. 設定⽅法（LIFF CLI） $ npm install -g @line/liff-cli
11. ”vite”を使っている場合、ネットワーク越しにアクセスできるように vite.config.ts を修正 設定⽅法（開発⽤サーバー） export default defineConfig({ plugins: [react()], server: { allowedHosts: true, // これを追加 }, }); ⚠他のツールを使っている場合でも類似の修正が必要のはずです⚠
12. 設定⽅法（起動） NGROK_AUTHTOKEN={先ほどコピーしたauthtoken} liff-cli serve \ --liff-id {LIFFのID} \ --url {ローカルで動作してるサーバーの URL、例: http://localhost:5173}/ \ --proxy-type ngrok Successfully updated endpoint url for LIFF ID: 2007821742-yR2alRWN. → LIFF URL: https://liff.line.me/2007821742-yR2alRWN → Proxy server: https://5ff420827fd2.ngrok-free.app/ スマホで開く
13. 動いた！viteのホットリロードも有効になってる！ これで実機確認の⼿間を減らすことができました🤩 動いた！
14. LINEミニアプリではこの⽅法が利⽤できません LIFF CLI実⾏時のエラーメッセージ↓ 残念なお知らせ
15. 実はngrok単体でも簡単にLINEミニアプリの実機確認ができます。 従来 ngrokは実⾏するたびにドメインが変化する →LIFF/LINEミニアプリのURLの書き換えが都度必要 今 無料プランで1つだけドメインを固定することができる →LIFF/LINEミニアプリのURLの書き換え不要 参考: Ngrokで無料プランでドメインを固定できるようになっていた(2023/08/16 以降できたらしい) ngrokのみを使った代替案
16. ngrokのみを使った代替案 これをLIFF/LINEミニアプリのURLに設定
17. $ brew install ngrok $ ngrok config add-authtoken {先ほどコピーしたauthtoken} $ ngrok http \ {ローカルで動作してるサーバーの URL、例: http://localhost:5173} \ --url={先ほどコピーしたドメイン、例 : capable-secondly-owl.ngrok-free.app} ngrokのみを使った代替案
18. まとめ LIFFアプリ LINEミニアプリ LIFF CLI + ngrok パターン 󰢐できた 󰢃できない ngrok + ドメイン固定パターン 󰢐できた 󰢐できた LIFFアプリ / LINEミニアプリ どちらでも簡単に動作確認できた
19. ありがとうございました 🫠おわり