GitHubPagesをGitHubAction Betaで作成したメモ

概要

出来上がったもの。
GithubPage
StoryBook

ソースコード

GitHub Actionのデフォルトを作成

初期設定ではmainブランチのみActionが走るので、developで動くように設定する。

カスタマイズ

特定のフォルダが更新されたときのみ更新するようにした。

.github/workflows/astro.yml

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      - develop
    paths:
      - .github/workflows/**
      - docs/** # documentsフォルダ内が更新されたときに実施

Astroの設定

Astro

• docs/astro配下にpackage.jsonなどAstro用のファイルを配置。

.github/workflows/astro.yml

env:
  BUILD_PATH: "./docs/astro" # default value when not using subfolders

コミットする。

確認

developブランチをpushすると、Actionでビルドされていることが分かる。

コミットメッセージの部分をクリックすると、ビルド経過が見られる。
ビルド完了し、デプロイされると github-pagesのリンクが確認できる。

ストーリーブックの追加

astroのpublic配下に、ビルドしたStorybookを配置する方法とした。

.github/workflows/astro.yml

+      # pnpmを使えるようにする
+      - uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 8.5.1

+      # storybook 準備
+      - name: Install dependencies
+        run: pnpm install
+        working-directory: packages/ui_components

+      # storybook ビルド -> astro の publicフォルダ内
+      - name: Build Storybook
+        run: pnpm run build-storybook
+        working-directory: packages/ui_components
+      # pnpmではpre,postは明示的に指定
+      - name: move Storybook
+        run: pnpm run postbuild-storybook
+        working-directory: packages/ui_components


      - name: Build with Astro
        run: |
          ${{ steps.detect-package-manager.outputs.runner }} astro build \
            --site "${{ steps.pages.outputs.origin }}" \
            --base "${{ steps.pages.outputs.base_path }}"
        working-directory: ${{ env.BUILD_PATH }}

Storybookはフロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識のサンプルコードからToastを移植した。
異なっている点は以下。

• viteで作成
• ComponentMetaなどdeprecatedなインターフェースをMetaのように置き換え

エイリアス設定

エイリアス設定を行う箇所が、viteの組合せだと多くて大変だった。

vite.config.ts

export default defineConfig({
  plugins: [react()],
  resolve: {
    // viteのホットリロードのために、/で始める必要がある。
+    alias: [{ find: "@", replacement: "/src" }],
  },
});

tsconfig

  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
    }
  },

jest.config.json

{
  "testEnvironment": "jest-environment-jsdom",
  "roots": [
    "<rootDir>/src"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  "moduleDirectories": [
    "node_modules",
    "<rootDir>/"
  ],
  "moduleNameMapper": {
    "\\.(css|less|scss)$": "identity-obj-proxy",
+    "^@/(.*)$": "<rootDir>/src/$1",
    "\\.(gif|ttf|eot|svg)$": "<rootDir>/tests/jest.fileMock.js"
  },
  "setupFilesAfterEnv": [
    "./tests/jest.setup.ts"
  ]
}

.storybook/main.ts

import type { StorybookConfig } from "@storybook/react-vite";
import path from "path";
import { loadConfigFromFile, mergeConfig } from "vite";

const configEnvServe = {
  mode: "development",
  command: "serve",
  ssrBuild: false,
} as const;
const storybookConfig: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
+  async viteFinal(config, { configType }) {
+    const f = await loadConfigFromFile(
+      configEnvServe,
+      path.resolve(__dirname, "../vite.config.ts"),
+    );
+    if (!f) return config;
+    const { config: userConfig } = f;
+
+    return mergeConfig(config, {
+      ...userConfig,
+      // manually specify plugins to avoid conflict
+      plugins: [],
+    });
+  },
};
export default storybookConfig;

また、参考のリポジトリではSVGのコンポーネントにroleをつけていたが、今回はtypescriptの型を通せなくて断念した。

src/components/provider/ToastProvider/Toast/index.tsx

import { useToastAction } from "@/components/providers/ToastProvider/hooks";
import { ToastStyle } from "@/components/providers/ToastProvider/ToastContext";
import { useState } from "react";
import Failed from "./assets/failed.svg";
import Succeed from "./assets/succeed.svg";
import styles from "./styles.module.css";
import { useTimeoutFn } from "@/utility/react-use";

type Props = { message: string; style: ToastStyle };

export const Toast = ({ message, style }: Props) => {
  const [isMount, setIsMount] = useState(false);
  const { hideToast } = useToastAction();
  useTimeoutFn(() => {
    setIsMount(true);
  }, 50);
  useTimeoutFn(() => {
    hideToast();
  }, 2000);
  return (
    <p
      role="alert"
      className={styles.module}
      data-style={style}
      data-mounted={isMount}
    >
      {style === "succeed" ? (
-        <Succeed role="presentation" />
+        <img src={Succeed} role="presentation" />
      ) : (
-        <Failed role="presentation" />
+        <img src={Failed} role="presentation" />
      )}
      {message}
    </p>
  );
};

この時点のGitHubAction
astro
jest設定

Jestのテストレポートの追加

変更点

jest-html-reportersを使い、jestの結果のレポートを出力するようにした。また、パイプラインにも埋め込んだ。

出力結果Reportのページ

この段階でのソースコード