AWS AmplifyプルリクエストWebプレビューをLINEミニアプリでもやってみた

npm create @line/liff-app liff-mock-amplify
cd liff-mock-amplify

.
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── favicon.ico
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
└── vite.config.ts

npm i @line/liff-mock

import { ExtendedInit, LiffMockApi } from "@line/liff-mock";

declare module "@line/liff" {
  interface Liff {
    init: ExtendedInit;
    $mock: LiffMockApi;
  }
}

import { liff } from "@line/liff";

export const liffInit = async () => {
  await liff
    .init({
      liffId: import.meta.env.VITE_LIFF_ID || "",
      withLoginOnExternalBrowser: true,
    })
};

// LIFF Mock
import { liff } from "@line/liff";
import LiffMockPlugin from "@line/liff-mock";

// モックデータ
import { getProfile } from "./mocks";

export const liffInit = async () => {
  try {
    // モックプラグインを設定
    liff.use(new LiffMockPlugin());

    // LIFFを初期化（モックを有効化）
    await liff.init({
      liffId: import.meta.env.VITE_LIFF_ID || "mock-liff-id",
      mock: true,
    });

    // ブラウザ環境ではログイン処理が必要
    if (!liff.isInClient()) {
      liff.login();
    }

    // モックデータを設定
    liff.$mock.set({
      getProfile,
    });

    console.debug("LIFF initialization completed (mock)");
  } catch (error) {
    console.error("LIFF mock initialization failed:", error);
    throw error;
  }
};

{
  "imports": {
    "#src/lib/liff-init": {
      "pull_request_preview": "./src/lib/liff-init/index.mock.ts",
      "default": "./src/lib/liff-init/index.ts"
    },
    "#*": [
      "./*",
      "./*.ts",
      "./*.tsx"
    ]
  }
}

import { useEffect, useState } from "react";
import "./App.css";

import { liffInit } from "#src/lib/liff-init";

function App() {
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  useEffect(() => {
    liffInit()
      .then(() => {
        setMessage("LIFF init succeeded.");
      })
      .catch((e: Error) => {
        setMessage("LIFF init failed.");
        setError(`${e}`);
      });
  }, []);
  return (
    <div className="App">
      <h1>create-liff-app</h1>
      {message && <p>{message}</p>}
      {error && (
        <p>
          <code>{error}</code>
        </p>
      )}
      <a
        href="https://developers.line.biz/ja/docs/liff/"
        target="_blank"
        rel="noreferrer"
      >
        LIFF Documentation
      </a>
    </div>
  );
}

export default App;

{
  "scripts": {
    "dev": "vite",
    "build:mock": "tsc && vite build --mode=mock",
    "build": "tsc && vite build"
  },
}

import { defineConfig, defaultClientConditions } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(({ mode }) => {
  // プルリクエストプレビューの場合はモックを使用する
  const shouldUseMock = mode === 'mock'

  const conditions = shouldUseMock ? [
    ...defaultClientConditions,
    "mock"
  ] : undefined;

  return {
    plugins: [react()],
    resolve: {
      conditions
    },
  }
});

version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'npm ci --cache .npm --prefer-offline'
        build:
            commands:
                - |
                  case "${AWS_BRANCH}" in
                      pr-*)
                          echo "Building pull request preview in development mode..."
                          npm run build:mock
                          ;;
                      *)
                          echo "Building production..."
                          npm run build
                          ;;
                  esac
    artifacts:
        baseDirectory: dist
        files:
            - '**/*'
    cache:
        paths:
            - '.npm/**/*'