GitHubPagesに開発ドキュメントをデプロイする総集編

## 概要
GitHubPagesに開発で作成したドキュメントを入れていく。

[開発ドキュメント](https://hibohiboo.github.io/odyssage/ja/introduction/)

[BDDレポート出力時点のソースコード]()

## 基本となるページ
[ソースコード](https://github.com/hibohiboo/Yakumi/tree/f229cd610e0b87ff40ac9ac6888ac0337b3de7cd)
[前回](https://qiita.com/hibohiboo/items/3537b832ff4e408aa6fd)はBetaだったが、現在はBetaがとれている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/7122c25d-a148-79de-419c-669eb2adaa0e.png)

[staticを選んでyamlを作成](https://github.com/hibohiboo/Yakumi/commit/e19f43436a59bb645f5c9c3fee1c35a65918690d
)。

developブランチでページを公開したいのでenvironmentsからルールを追加。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/7a868176-b528-d1fe-5bc6-8ba666091f36.png)

```diff:.github/workflows/static.yml
on:
  push:
    branches:
      - develop
  workflow_dispatch:
permissions:
  contents: read
  pages: write
  id-token: write
concurrency:
  group: "pages"
  cancel-in-progress: false
jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
-          path: '.'
+          path: './docs/public'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

```


[yamlのpathを直してpush](https://github.com/hibohiboo/Yakumi/commit/ff7dfbaebed2d94b768fd8b91e1f6d70ba0f7adc)。パイプラインが動いてページが表示されることを確認した。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/8b0ba89f-8943-37b0-30a4-1f9ed89ee186.png)

## コンポーネントカタログの追加

```diff:.github/workflows/static.yml
name: Deploy 開発ドキュメント Pages
on:
  push:
    branches:
      - develop
  workflow_dispatch:
permissions:
  contents: read
  pages: write
  id-token: write
concurrency:
  group: "pages"
  cancel-in-progress: false
jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5

+     - name: Install dependencies ui
+       run: npm install
+       working-directory: packages/ui
+     - name: Build Sample Storybook
+       run: npm run build-storybook
+       working-directory: packages/ui

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: './docs/public'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
```

```diff:packages/ui/package.json
{
  "name": "@yakumi/ui",
  "type": "module",
  "scripts": {
    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o ../../docs/public/yakumi-components"
  },
  "dependencies": {
    "dompurify": "^3.1.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^8.1.1",
    "@storybook/addon-interactions": "^8.1.1",
    "@storybook/addon-links": "^8.1.1",
    "@storybook/addon-mdx-gfm": "^8.1.1",
    "@storybook/addon-onboarding": "^8.1.1",
    "@storybook/blocks": "^8.1.1",
    "@storybook/react": "^8.1.1",
    "@storybook/react-vite": "^8.1.1",
    "@storybook/testing-library": "^0.2.2",
    "@types/dompurify": "^3.0.5",
    "@types/sanitize-html": "^2.11.0",
    "@vitejs/plugin-react-swc": "^3.6.0",
    "storybook": "^8.1.1",
    "@yakumi/tsconfig": "*"
  }
}
```

[参考：mswが必要な場合](https://qiita.com/hibohiboo/items/9635105f6d2e909c6115)

## ユニットテストのレポート追加
下記を追加。

```yaml
      # jest reports 準備
      - name: App Unit Test Prepare
        run: npm install
        working-directory: app
      # jest reports 作成
      - name: App Unit Test
        run: npm run test
        working-directory: app
```

```diff:app/jest.config.json
{
  "testEnvironment": "jest-environment-jsdom",
  "roots": ["<rootDir>/tests"],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "tests/**/?(*.)+(spec|test).+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  "moduleDirectories": [
    "node_modules",
    "<rootDir>/"
  ],
  "moduleNameMapper": {
    "\\.(css|less|scss)$": "identity-obj-proxy",
    "^@yakumi-app/(.*)$": "<rootDir>/src/$1",
    "^@yakumi-components/(.*)$": "<rootDir>/../packages/ui/src/$1",
    "\\.(gif|ttf|eot|svg)$": "<rootDir>/tests/jest.fileMock.js"
  },
  "globals": {
    "VITE_DEFINE_BASE_PATH": "app"
  },
+  "reporters": [
+    "default",
+    [
+      "jest-html-reporters",
+      {
+        "publicPath": "../docs/public/jest-reports-app",
+        "filename": "index.html"
+      }
+    ]
+  ]
+  "collectCoverage": true,
+  "coverageDirectory": "../docs/public/jest-reports-app/coverage",
}
```

[コミット](https://github.com/hibohiboo/Yakumi/commit/868895e3b7b206c1bb85b71148fdd6383d079b41)

## OpenAPI追加

```yaml
      - name: OpenAPI Schema Modules
        run: npm  install
        working-directory: api
      # OpenAPI Document 作成
      - name: OPEN API Schema Build
        run: npm run openapi-build
        working-directory: api
```

```diff:api/package.json
{
  "name": "api",
  "scripts": {
    "prebuild": "cd ../packages/prisma && npm run build",
    "build": "tsc && tsc-alias",
    "openapi": "redocly preview-docs",
+    "openapi-build": "redocly build-docs core@v1 --disableGoogleFont -o ../docs/public/openapi/index.html"
  },
  "dependencies": {
    "@azure/functions": "^4.5.0",
    "@azure/storage-blob": "^12.18.0",
    "date-fns": "^3.6.0",
    "mssql": "^10.0.2"
  },
  "devDependencies": {
+    "@redocly/cli": "^1.12.2",
    "@types/mssql": "^9.1.5",
    "@types/node": "^20.x",
    "rimraf": "^5.0.7",
    "tsc-alias": "^1.8.10",
    "typescript": "^5.4.5"
  }
}
```

## ESLintルールインスペクター追加
[参考](https://qiita.com/hibohiboo/items/29b5c0949cb75e272ee1)

```yaml
      # config-inspector 準備
      - name: Install dependencies  ESLint 
        run: npm i
        working-directory: packages/eslint-config-custom
      # config-inspector ビルド -> コピー
      - name: Build ESLint Config Inspector
        run: npm run build
        working-directory: packages/eslint-config-custom
```

```diff:packages/eslint-config-custom
{
  "name": "@yakumi/eslint-config-custom",
  "type": "module",
  "devDependencies": {
    "@eslint/eslintrc": "^3.1.0",
    "@eslint/js": "^9.3.0",
    "eslint": "^9.3.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-turbo": "^1.13.3",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "eslint-plugin-unused-imports": "^3.2.0",
    "typescript": "^5.4.5",
    "typescript-eslint": "^7.9.0"
  },
  "scripts": {
    "inspect": "npx @eslint/config-inspector",
+    "build": "npx @eslint/config-inspector build --base Yakumi/eslint-config-inspector &&  rm -rf ../../docs/public/eslint-config-inspector && cp -r .eslint-config-inspector ../../docs/public/eslint-config-inspector",
    "ncu": "ncu -u"
  }
}
```



## 特定のフォルダに反応するようにする

```diff:
on:
  push:
    branches:
      - develop
+    paths:
+      - .github/workflows/**
+      - docs/**
+      - packages/ui/**
+      - app/**
+      - api/**
```

## PostgresqlのDBドキュメントを作成する
[GitHub ActionsでSchemaSpyのER図を生成してGitHubPagesにデータベースのドキュメントをデプロイできるようにしたメモ](https://qiita.com/hibohiboo/items/e199e02012a771e9f416)

## E2Eテストをおこないレポートを作成する
[Github ActionsでDockerを使ってDB+HonoのAPIとReactのSPAを動かし、CucumberでE2Eテストを行いレポートをGithubPageに出力したメモ](https://qiita.com/hibohiboo/items/c9c127153a433ea9c12e)