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

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

基本的な使い方や、詳しい仕様などは、[公式ドキュメント](https://github.com/line/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-inspector.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457889/6aac71db-fe62-a14f-7db3-44c845f5bf99.png)

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](https://www.nginx.com/blog/websocket-nginx/)の記載を参考に、`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は以下の様になりました。

```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から要素の変更やスタイルの変更などがまだできませんが、今後のアップデートによって、さらに便利になることが期待されます。