GitHubPagesをGitHubAction Betaで作成したメモ

## 概要
出来上がったもの。
[GithubPage](https://hibohiboo.github.io/RinneCircle/ja/introduction/)
[StoryBook](https://hibohiboo.github.io/RinneCircle/storybook-static/index.html?path=/story/components-providers-toastprovider-toast--succeed)

[ソースコード](https://github.com/hibohiboo/RinneCircle/blob/42c7b8d43636f9108e3704fac757fdcb48f9bbc1/.github/workflows/astro.yml)

## GitHub Actionのデフォルトを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/4fb268cb-b5d9-bd53-b29e-cd34fdcedec4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/cf1bd951-3f2c-6ec6-8d9f-ae9ed40c54ea.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/4fc41918-3dd2-ca06-37d6-b3ed659ff1d7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/398b9d2c-4b1d-382d-62d8-163f62b116b9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/370df764-ce69-ae03-da86-25e9798e7aab.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/5279dca4-c445-7c23-43eb-296bbdf33e9c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/b6e06c87-43a0-d286-a4e8-fe0bc36eb92e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/09b816a5-eff6-96e7-8d63-812baaa1df05.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/54abb4b6-f387-b937-4a89-6d83c7619442.png)

## カスタマイズ
特定のフォルダが更新されたときのみ更新するようにした。

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

## Astroの設定
[Astro](https://docs.astro.build/ja/guides/deploy/github/)

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



```yaml:.github/workflows/astro.yml
env:
  BUILD_PATH: "./docs/astro" # default value when not using subfolders
```

コミットする。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/8bd005e8-338e-55c7-14dd-26329e2254f7.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/ab755157-350c-6c99-7885-2f5fd3b8ca46.png)

## ストーリーブックの追加

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

```diff:.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は[フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識](https://www.shoeisha.co.jp/book/detail/9784798178639)の[サンプルコード](https://github.com/frontend-testing-book/nextjs)からToastを移植した。
異なっている点は以下。
- viteで作成
- ComponentMetaなどdeprecatedなインターフェースをMetaのように置き換え

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

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

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

```diff: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"
  ]
}
```

```diff:.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の型を通せなくて断念した。

```diff: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](https://github.com/hibohiboo/RinneCircle/blob/42c7b8d43636f9108e3704fac757fdcb48f9bbc1/.github/workflows/astro.yml)
[astro](https://github.com/hibohiboo/RinneCircle/blob/develop/docs/astro/package.json)
[jest設定](https://github.com/hibohiboo/RinneCircle/blob/develop/packages/ui_components/jest.config.json)


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

[変更点](https://github.com/hibohiboo/RinneCircle/commit/a6da2f8a9b343f9004fe33c8d7c1f289b1ae2395)

[jest-html-reporters](https://www.npmjs.com/package/jest-html-reporters)を使い、jestの結果のレポートを出力するようにした。また、[パイプラインにも埋め込んだ](https://github.com/hibohiboo/RinneCircle/commit/414dd84dec4eba5d2f3823572f03cd4833fe43bf)。

[出力結果Reportのページ](https://hibohiboo.github.io/RinneCircle/jest-reports/jest.html)

[この段階でのソースコード](https://github.com/hibohiboo/RinneCircle/tree/c3a38d81dbd23861c2aaf40d66da4c03ba9b04f0/packages/ui_components)