localhostに起動した本番ビルドLIFFアプリにインターネットからアクセスする

業務の中で、本番ビルドしたアプリかつスマホでアクセスした時のみ発生する事象があり、原因を調査する必要がありました。 serveとngrokを使ってlocalhostに起動した本番ビルドLIFFアプリへのインターネットからのアクセスを実現出来たので記録に残しておきます。

#LINE

#LIFF

加藤潤

2023.11.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは。加藤です。本番ビルドしたアプリを本番環境に毎回デプロイするのは時間がかかります。本番ビルドしたアプリを開発時のように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の部分はご自身の静的ドメインを入力してください。