概要
GitHubPagesに開発で作成したドキュメントを入れていく。
基本となるページ
前回はBetaだったが、現在はBetaがとれている。
developブランチでページを公開したいのでenvironmentsからルールを追加。
.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。パイプラインが動いてページが表示されることを確認した。
コンポーネントカタログの追加
.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
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": "*"
}
}
ユニットテストのレポート追加
下記を追加。
# 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
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",
}
OpenAPI追加
- 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
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ルールインスペクター追加
# 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
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"
}
}
特定のフォルダに反応するようにする
on:
push:
branches:
- develop
+ paths:
+ - .github/workflows/**
+ - docs/**
+ - packages/ui/**
+ - app/**
+ - api/**
PostgresqlのDBドキュメントを作成する
GitHub ActionsでSchemaSpyのER図を生成してGitHubPagesにデータベースのドキュメントをデプロイできるようにしたメモ