LIFFアプリをローカルで開発するには？HTTPS対応のヒント

こんにちは！テクニカルサポートを担当している岡です。

LIFFアプリを開発するとき、ローカル環境での動作確認に困ったことはありませんか？

一般的なWebアプリケーションの開発では、ローカル開発サーバーを起動し、http://localhost:3000などのURLにアクセスして動作を確認します。

一方、LIFFアプリでは、LINE Developersコンソールに登録するエンドポイントURLはHTTPS形式でないといけません。

この記事では、ローカル開発サーバーを利用しながら、HTTPS経由でLIFFアプリの動作を確認する方法の一例を紹介します。

ローカル開発でHTTPSが必要になる理由

LIFFアプリは、一般的なWebアプリケーションと同じように、開発にローカルサーバーを利用できます。

たとえば、Viteなどの開発ツールを使うと、http://localhost:5173のようなURLでアプリケーションを起動できます。

しかし、このURLには2つの課題があります。

まず、このURLはHTTP形式であるため、HTTPSを要求するLIFFエンドポイントURLには登録することができません。

また、localhostはアクセスしている端末自身を指します。このため、開発用PCで起動したサーバーに、他のデバイスからこのURLを用いてアクセスすることはできません。

この2つの課題を解決する方法のひとつが、トンネリングサービスの利用です。

トンネリングサービスでHTTPS接続を実現する

トンネリングサービスを利用すると、ローカル環境で起動しているWebサーバーに、インターネット経由でアクセスできるようになります。

トンネリングサービスには、ngrokやCloudflare Tunnelなどがあります。

これらのサービスを使うと、ローカル開発サーバーを直接HTTPS化せずに、HTTPS形式の公開URLを経由して開発したアプリケーションにアクセスできます。

構成の一例は次の通りです。

具体的には、トンネリングサービスが発行したHTTPSのURLを、LINE DevelopersコンソールでLIFFアプリのエンドポイントURLに設定します。

これにより、スマートフォンのLINEアプリなどから、ローカル環境で開発中のLIFFアプリにアクセスできます。

なお、トンネリングサービスの設定や利用プランによっては、再接続するたびに公開URLが変更される場合があります。この場合は、LIFFエンドポイントURLもその都度更新する必要があります。

開発用のLIFFアプリを用意する

ローカル開発を進める際には、本番用とは別に開発用のLIFFアプリを用意しておくと便利です。

開発用のLIFFアプリには、トンネリングサービスで発行したHTTPSのURLを設定します。一方、本番用のLIFFアプリには、実際にユーザーへ提供するWebサーバーのURLを設定しておきます。

このように環境を分ければ、開発中にエンドポイントURLを変更しても、本番用のLIFFアプリには影響しません。

なお、開発用と本番用ではLIFF IDが異なるため、アプリケーション側でも環境に応じて適切なLIFF IDを使用する必要があります。

トンネリングサービスを利用する際の注意点

トンネリングサービスを利用すると、ローカル開発サーバーがインターネット全体からアクセス可能になる場合があります。

開発環境に機密情報を配置しないことや、必要に応じてアクセス制限を設定することなど、セキュリティにも注意しましょう。

また、開発が終了したら、不要になったトンネル接続を停止してください。

まとめ

LIFFアプリのローカル開発では、エンドポイントURLのHTTPS要件と、他のデバイスからのアクセス方法を考慮する必要があります。

今回紹介したトンネリングサービスを利用する方法は、これらの課題を解決する選択肢のひとつです。

ここでは紹介しませんでしたが、他にもローカル開発サーバーを直接HTTPS化する方法があるほか、LIFF CLIでローカル開発サーバーをHTTPSで起動したり、外部に公開したりする方法があります。

開発環境に応じて適切な方法を選び、LIFFアプリの開発に役立ててみてください。