手帳

LINEミニアプリを Docker で構築した話
  • 2025-02-28
  • IT系

クライアントの会社内で業務サポートに使うLINEミニアプリを作ってほしいという依頼があったので、そのアプリをDockerで構築してみました。

LINEアカウントの準備やチャンネル、LIFFの作成については、以下の記事を参考にしてください：

LINEミニアプリの基本的な仕組み

LINEミニアプリとは、Webアプリケーションとして開発したサイトをLINEプラットフォーム上で動作させる仕組みです。仕様を満たしたWebサイトをLIFFとして登録すると、LINEアプリ内からそのWebサイトにアクセスできるようになります。LINEはLIFF IDに紐づいたURLへユーザーを誘導する役割を担います。

つまり、LIFF APIの仕様を満たしたWebサイトであれば、どのような機能でも実装可能なのです。

実装環境

今回は、自分で管理しているVPS上にサーバーを設置し、Dockerを使って環境を構築しました。

LINEが提供している公式スターターキット「line-liff-v2-starter」リポジトリを利用します。このスターターキットは、Next.js、Nuxt.js、VanillaJSなど様々な方法で実装できるようになっています。今回はDockerでnginxを立ち上げ、VanillaJSでビルドしたdistディレクトリをnginxの公開ディレクトリにマウントする方法を選びました。

私のサーバー環境は、VPS上にDockerでnginxのリバースプロキシを設定し、複数のサイトを管理しています。今回のLINEミニアプリはその1つとして追加します。

実装手順

まず、スターターキットをクローンします：

mkdir hogehoge.com
cd hogehoge.com
git clone https://github.com/line/line-liff-v2-starter.git

次に、Docker Composeの設定ファイル（docker-compose.yml）を作成します：

services:
  line-app:
    image: node:22-alpine
    working_dir: /app/line-liff-v2-starter/src/vanilla
    volumes:
      - ./:/app
      - ./.env:/app/line-liff-v2-starter/src/vanilla/.env 
    container_name: liff-app
    command: sh -c "yarn install && export NODE_OPTIONS=--openssl-legacy-provider && yarn build"
    networks:
      - proxy-net

  line-nginx:
    build:
      context: ./docker/nginx
    expose:
      - "80"
    volumes:
      - ./line-liff-v2-starter/src/vanilla/dist:/var/www/html:ro  
      - ./docker/nginx/conf.d:/etc/nginx/conf.d
      - ./docker/nginx/logs:/var/log/nginx
      - ./docker/nginx/temp:/tmp/nginx
    environment:
      - VIRTUAL_HOST=line.hogehoge.com  
      - LETSENCRYPT_HOST=line.hogehoge.com 
    networks:
      - proxy-net

networks:
  proxy-net:
    external: true

line-appコンテナのコマンドで export NODE_OPTIONS=--openssl-legacy-provider というオプションを設定していますが、これはNode.jsの新しいバージョンでも古いOpenSSL APIを使えるようにするためのものです。このオプションを設定しない場合は、Node.js v16系など古いバージョンを使用する必要があります。

LIFF IDの設定

最後に、LIFFの初期化時にLIFF IDを設定します。dist/index.jsファイルを編集します：

document.addEventListener('DOMContentLoaded', () => {
    const liffId = "xxxxxxxxxxx";  // あなたの実際のLIFF IDに置き換え
    liff.init({
        liffId: liffId
    }).then(() => {
        alert("LIFF initialized successfully");
        
    });
});

これでLINEミニアプリの基本的な実装は完了です。あとはDocker Composeでコンテナを起動し、実際のLINEアプリから動作確認を行いましょう。