はじめに
こんにちは。加藤です。 本番ビルドしたアプリを本番環境に毎回デプロイするのは時間がかかります。 本番ビルドしたアプリを開発時のようにlocalhostに起動し、インターネットからアクセスできればコード修正 -> 公開 -> 実機確認の一連のサイクルの速度を高められるはずです。 serveとngrokを使って実現出来たので記録に残しておきます。 LIFFアプリ用のチャネルやLIFFアプリはLINE Developersコンソール上で作成済みであるとします。
Create LIFF Appで作成したアプリで試してみる
LIFFアプリとして今回はLINE社から提供されているCreate LIFF App（以下、CLA） を使ってアプリを作成してみます。
CLAはLIFFアプリの開発環境をコマンド1つで構築できるCLIツールです。npx @line/create-liff-app を実行し、質問に答えていくことでサクっとアプリケーションのベースが作成できます。
※詳しくは公式ドキュメントをご覧ください。
今回は質問に以下のように答えてアプリケーションを作成しました。
- Enter your project name：my-create-liff-app
- Which template do you want to use? (Use arrow keys)：react
- JavaScript or TypeScript? (Use arrow keys)：TypeScript
- Please enter your LIFF ID：開発しているアプリのLIFF IDを入力
- Which package manager do you want to use? (Use arrow keys)：yarn
使用したツールのバージョンは以下の通りです。
- Create LIFF App 1.1.0
- Node.js 18.17.1
- Yarn 1.22.19
アプリを本番ビルド
CLAによる構築が終わったら本番ビルドします。
本番ビルドはyarn build で行いました。
ビルドが終わると、プロジェクト直下に dist フォルダが作成され、jsファイルやcssファイルが出力されます。
localhostに本番ビルドアプリを起動
本番ビルドが終わったらlocalhostにアプリを起動します。serveを使えば簡単に実現できます。
npm install --global serve を実行してserveをインストールしてください。serve dist を実行することでdistフォルダの中の本番ファイルをlocalhostに起動(URL: http://localhost:3000）できます。
- ※ distの部分は本番ビルドした際の出力フォルダ名です。
- ※ React Router等を使用してURLを変えてページ遷移を実現している場合は-s オプションを使って全てのNot Foundリクエストを
index.htmlに書き換えるようにするとLIFFアプリの右上からページをリフレッシュしてもNot Foundが発生しなくなります。
ngrokを使ってhttps化 + インターネットに公開
LIFFアプリのエンドポイントURLに設定するURLはhttps かつ、当たり前ですがインターネットからアクセス出来る必要があります。 ngrok を使えば両方を簡単に実現できます。 サインアップしてサイトの手順通りにコマンドラインツールをセットアップします。 ngrokは今年、Static domains for all ngrok users をアナウンスしました。無料ユーザーでも静的ドメインを1つ払い出して使うことができます。これまで無料ユーザーの場合はngrokをするたびに毎回URLが変わってしまっていたため多少面倒でしたが、静的ドメインを使うことでURLを固定できます。 Cloud Edge > Domains の 「New Domain」をクリックして静的ドメインを作成します。
静的ドメインが作成できたら、
ngrok http --domain=<static domain> <port number> コマンドを実行することで
https化（URL払出し） + インターネット公開されます。
今回ポート番号は3000だったので
ngrok http --domain=<static domain> 3000 を実行しました。
※static domainの部分はご自身の静的ドメインを入力してください。
LIFFアプリのエンドポイントURLにngrokで払い出したhttps URLを設定
ここまで来ればLIFFアプリのエンドポイントにngrokで払い出したhttpsのURLを設定するだけです。 URLを設定したら LIFF URLにスマホからアクセスしてみましょう。
アクセスできました！
おわりに
serveとngrokを使ってlocalhostに起動した本番ビルドLIFFアプリにインターネットからアクセスする方法をご紹介しました。 1度やり方を覚えてしまえば意外と簡単ですね！
18
