AWSでLINE LIFF Inspector環境を構築してみた

はじめに

2022/04にLINE LIFFの開発を効率的にするLIFF Inspectorがリリースされました。
公式ドキュメントに記載がある通り、ngrokを使用すれば比較的楽にLIFF Inspectorを利用することができますが、例えば業務の都合上、ツールの利用に制限があるなど、そういった場合を考慮して、今回は、AWS上にLIFF Inspectorサーバーを構築し、実際に動かすことができたので、ご紹介したいと思います。

基本的な使い方や、詳しい仕様などは、公式ドキュメントを参照いただければと思います。

LIFF Inspector

LIFF Inspectorの構成は以下の通りです。

LIFF Inspector は LIFF(LNE Frontend Framework)専用の公式 DevTools です。LIFF Inspector は ChromeDevTools Protocol に準拠し、最新の ChromeDevTools と連携しています。
中略
LIFF Inspector は２つのコンポーネントから構成されています。

• LIFF Inspector Server
• LIFF Inspector Plugin
  LIFF Inspector Server は LIFF アプリと ChromeDevTools の通信を中継するサーバーです。 LIFF Inspector Plugin は LIFF Plugin です。 LIFF Plugin は LIFF SDK v2.19.0 以降から利用可能です。

上記、記載がある通り、LIFFアプリとChromeDevToolsをつなぐサーバを構築する必要があります。
また、

重要: LIFF Inspector Server は SSL/TLS で暗号化される必要があります
LIFF Inspector Server はデフォルト設定ではローカルサーバ ws://localhost:9222 を立ち上げます。そしてデバッグ対象の LIFF アプリは HTTPS (https://liff.line.me/xxx-yyy) でホストされています。 これは LIFF Inspector Plugin が https:// から ws:// へ接続を試みることを意味し、mixed content となりこの接続はブロックされてしまいます。
Mixed content の問題を解消するために、LIFF Inspector Server は HTTPS (wss://) でホストされる必要があります。

と記載があり、websocket通信が可能なSSL/TLSサーバを用意して上げる必要がありそうです。

構成

以上から、以下の様な構成を考えました。

LIFFアプリ及び、LIFF InspectorサーバをECS Fargateで構築し、LIFF Inspectorサーバはnginxを立てました。
LIFFアプリはAPIGatewayからのアクセス、LIFF InspectorサーバはALBからアクセスするようにしました。ALBには証明書を紐付けています。
基本的に、既存のAWSリソースを流用した形での構成にしたため、こちらの構成ではなく、EC2やAppRunnerといった構成でも十分可能かと思います。
ただし、LIFF Inspector Pluginからの通信(websocket)を受け付ける際に、APIGateway（HTTP API、REST API）では受け付けられないため、ALBやAPIGateway(WebSocket API)にする必要はあります。

LIFF Inspectorサーバ（nginxコンテナ）

ALBから受け付けたリクエストは80番ポートでコンテナにforwardします。また、LIFF Inspectorは9222ポートで受け付けているので、80→9222にproxyする必要があります。加えて、HTTPで受け付けたリクエストをwebsocketにアップグレードする必要があります。

以上から、NGINX as a WebSocket Proxyの記載を参考に、nginx.confを書き換えます。

nginx.conf

http {
    map $http_upgrade $connection_upgrade { 
    default upgrade;
    ''      close;
    }
    
    server {
        listen 80;
        server_name 0.0.0.0;

        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade; 
        proxy_set_header Connection $connection_upgrade;
        
        location / {
                proxy_pass http://localhost:9222;
        }

        location = /healthcheck.html {
            empty_gif;
            access_log off;
            break;
        }
    }

    include /etc/nginx/conf.d/*.conf;
}

また、Dockerコンテナが立ち上がった際、nginxの起動及びLIFF Inspectorサーバの待受をする必要があるため、bashを作成します。

startup.sh

#!/bin/bash
service nginx start -d
npx -y @line/liff-inspector

最終的なLIFF InspectorサーバのDockerfileは以下の様になりました。

FROM nginx:1.21.6

RUN apt update && \
    apt install nodejs npm vim procps -y

RUN npm install -g n
RUN n stable
RUN apt purge nodejs npm -y

COPY ./nginx.conf ./etc/nginx/nginx.conf
COPY ./startup.sh ./startup.sh

RUN chmod 744 /startup.sh

EXPOSE 80

CMD ["/startup.sh"]

さいごに

簡単ではありますが、AWSを使って、LIFF Inspector環境の構築を紹介させていただきました。少しでも参考になればと思います。
LIFF Inspecorは実機からデバッグが可能になるなど、開発効率を上げるための良い仕組みだと思っています。現状では、Devtoolsから要素の変更やスタイルの変更などがまだできませんが、今後のアップデートによって、さらに便利になることが期待されます。