プロジェクト構成の記事を完成
This commit is contained in:
parent
f820552b09
commit
c27f651f89
|
|
@ -232,8 +232,372 @@ pnpm create storybook@latest
|
|||
|
||||
あとは画面の指示に従うだけ
|
||||
|
||||
Tailwindcssの設定もしておく
|
||||
|
||||
https://pystyle.info/react-vite-tailwind-storybook/
|
||||
|
||||
### Storycap
|
||||
|
||||
ビジュアルリグレッションテストを簡単に行えるよう、コンポーネントのスクショを自動で取れるようにしておく
|
||||
|
||||
AIにUIコンポーネントを触らせるときにちょっとだけ安心できる
|
||||
|
||||
Storycapとあるが正確には改良版のStorycap-testrunというもの
|
||||
|
||||
```bash
|
||||
pnpm add -D @storycap-testrun/browser
|
||||
```
|
||||
|
||||
vitest.setup.tsに以下を追記
|
||||
```typescript:vitest.setup.ts
|
||||
import { page } from "vitest/browser";
|
||||
import { screenshot } from "@storycap-testrun/browser";
|
||||
|
||||
|
||||
afterEach(async (context) => {
|
||||
await screenshot(page, context);
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
vitest.config.tsのプラグインに以下を追記
|
||||
```typescript:vitest.config.ts
|
||||
import storycap from "@storycap-testrun/browser/vitest-plugin";
|
||||
|
||||
storycap({
|
||||
output: {
|
||||
file: (context) => `${context.id}.png`,
|
||||
},
|
||||
}),
|
||||
```
|
||||
|
||||
`.gitignore`に`__screenshots__`と書いておくと良い
|
||||
|
||||
## Git/GitHubとCI/CD
|
||||
|
||||
基本的にGit Flowをちょっと省略したブランチ戦略を取る
|
||||
`release`ブランチを省略(リリース作業は自動化、それ以外はdevelopでするので)
|
||||
`hotfix`ブランチも省略
|
||||
|
||||
### Gitの設定
|
||||
|
||||
やっていなければリポジトリの初期化 masterとmainに注意(n敗)
|
||||
```bash
|
||||
git init .
|
||||
```
|
||||
|
||||
`.gitignore`の設定
|
||||
|
||||
https://github.com/github/gitignore
|
||||
|
||||
こういうところから持ってくる
|
||||
|
||||
### コミット前に自動修正
|
||||
|
||||
lefthookとbiomeを組み合わせる
|
||||
|
||||
```bash
|
||||
pnpm add -D -w lefthook
|
||||
```
|
||||
|
||||
lefthook.yamlを作成する
|
||||
```yaml:lefthook.yaml
|
||||
pre-commit:
|
||||
commands:
|
||||
check:
|
||||
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
|
||||
run: npx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
|
||||
stage_fixed: true
|
||||
|
||||
pre-push:
|
||||
commands:
|
||||
check:
|
||||
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
|
||||
run: npx @biomejs/biome check --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {push_files}
|
||||
```
|
||||
|
||||
適用
|
||||
|
||||
```bash
|
||||
pnpm lefthook install
|
||||
```
|
||||
|
||||
### GitHub
|
||||
|
||||
とりあえずリポジトリを作る。masterとmainに注意 上でやった`.gitignore`はここでやってもいい
|
||||
Renovateとかを有効化しておく
|
||||
|
||||
設定していく
|
||||
|
||||
- オートマージを許可
|
||||
- デフォルトブランチをdevelopに
|
||||
- プルリクエストブランチの更新を常に提案する
|
||||
- ヘッドブランチを自動的に削除する
|
||||
- Dependabot Alertsを有効にする
|
||||
- ブランチプロテクションルールを作成する CIの構築をしてからの方が楽
|
||||
- Masterブランチは直Push禁止
|
||||
- CI全Passが必須
|
||||
- バイパス禁止
|
||||
- Developブランチは直Push許可
|
||||
- CI全Passが必要だがバイパスを許可
|
||||
- レビューが必要なら最少Approve数を設定
|
||||
- チーム開発ならWebhookを設定
|
||||
- Issue追加・PR追加・リリースあたりを通知してスレッド運用が良さげ 正直SlackのGitHub Appが一番いい
|
||||
- Discord https://mekurun.com/tips/discord-github/
|
||||
|
||||
### Renovate
|
||||
|
||||
依存ライブラリのバージョン管理は自動化する
|
||||
|
||||
- minorとpatchの自動マージを有効化
|
||||
- platformAutomergeを有効化
|
||||
- rebaseWhenをconflictedかneverに
|
||||
- lockFileMaintenanceをtrueに 正直いらんかも
|
||||
|
||||
|
||||
```json:renovate.json
|
||||
{
|
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||
"extends": ["config:recommended"],
|
||||
"packageRules": [
|
||||
{ "matchUpdateTypes": ["minor", "patch"], "automerge": true }
|
||||
],
|
||||
"platformAutomerge": true,
|
||||
"rebaseWhen": "conflicted",
|
||||
"lockFileMaintenance": {
|
||||
"enabled": true,
|
||||
"recreateWhen": "always",
|
||||
"rebaseStalePrs": true,
|
||||
"branchTopic": "lock-file-maintenance",
|
||||
"commitMessageAction": "Lock file maintenance",
|
||||
"commitMessageTopic": null,
|
||||
"commitMessageExtra": null,
|
||||
"schedule": ["before 4am on monday"],
|
||||
"groupName": null,
|
||||
"prBodyDefinitions": {
|
||||
"Change": "All locks refreshed"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Vitest
|
||||
|
||||
package.json内に存在している不要なtestスクリプトは削除しておく
|
||||
|
||||
ルートのpackage.jsonに
|
||||
```json
|
||||
"test:all": "pnpm -r --reporter-hide-prefix test"
|
||||
```
|
||||
を追記しておく
|
||||
|
||||
-rオプションで子プロジェクトでも再起的に実行
|
||||
--reporter-hide-prefixオプションで後述するテストレポートの邪魔を防げる
|
||||
|
||||
簡単にテストレポートを手に入れる手段としてGitHubのアノテーションを使う
|
||||
|
||||
https://vitest.dev/guide/reporters.html#github-actions-reporter
|
||||
|
||||
|
||||
### VRT(ビジュアルリグレッションテスト)
|
||||
|
||||
AIにUIを触らせるならあったらすごく便利です
|
||||
|
||||
`reg-viz/reg-actions@v3`を使います。
|
||||
|
||||
playwrightとのインストールが必要な割に実行する必要があるタイミングが多く、コストが重め
|
||||
|
||||
PRのコメントに差分を投稿してくれるけど、PRのマージ先のコミットで必ずVRTが実行されている必要があるため、マージコミットにもVRTのアクションを実行する必要がある(この仕様にめちゃくちゃハマった)
|
||||
|
||||
残っている最新のスクショ結果ではなく、最新のコミットのスクショを探すという点に注意
|
||||
|
||||
簡単に書くのが凄く難しいので今動いているActionをそのまま書いておきます
|
||||
|
||||
`@travel-scheduler/ui`の部分をUIコンポーネントのパッケージ名に変えると動くと思います。
|
||||
|
||||
```yaml
|
||||
name: Visual Regression Test
|
||||
on:
|
||||
push:
|
||||
branches: [develop, main]
|
||||
pull_request:
|
||||
branches: [develop, main]
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
actions: write
|
||||
pull-requests: write
|
||||
|
||||
jobs:
|
||||
test:
|
||||
timeout-minutes: 10
|
||||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
shard: [1/3, 2/3, 3/3]
|
||||
steps:
|
||||
- uses: actions/checkout@v6
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
|
||||
- uses: actions/setup-node@v6
|
||||
with:
|
||||
node-version: 22
|
||||
cache: "pnpm"
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: Cache Playwright binaries
|
||||
uses: actions/cache@v5
|
||||
id: playwright-cache
|
||||
with:
|
||||
path: ~/.cache/ms-playwright
|
||||
key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
|
||||
|
||||
- name: Install Playwright Browsers
|
||||
if: steps.playwright-cache.outputs.cache-hit != 'true'
|
||||
run: pnpm -F @travel-scheduler/ui exec playwright install chromium
|
||||
|
||||
- name: Install Playwright system dependencies
|
||||
run: pnpm -F @travel-scheduler/ui exec playwright install-deps chromium
|
||||
|
||||
- name: Run storycap tests (shard ${{ matrix.shard }})
|
||||
run: pnpm -F @travel-scheduler/ui exec vitest run --project=storybook --shard=${{ matrix.shard }}
|
||||
|
||||
- name: Upload screenshots
|
||||
uses: actions/upload-artifact@v6
|
||||
if: always()
|
||||
with:
|
||||
name: screenshots-${{ strategy.job-index }}
|
||||
path: packages/ui/__screenshots__
|
||||
retention-days: 1
|
||||
|
||||
compare:
|
||||
needs: test
|
||||
if: always()
|
||||
timeout-minutes: 5
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v6
|
||||
|
||||
- name: Download all screenshot artifacts
|
||||
uses: actions/download-artifact@v7
|
||||
with:
|
||||
pattern: screenshots-*
|
||||
path: downloaded-screenshots
|
||||
|
||||
- name: Merge screenshots
|
||||
run: |
|
||||
mkdir -p packages/ui/__screenshots__
|
||||
for dir in downloaded-screenshots/screenshots-*; do
|
||||
if [ -d "$dir" ]; then
|
||||
cp -r "$dir"/* packages/ui/__screenshots__/ 2>/dev/null || true
|
||||
fi
|
||||
done
|
||||
echo "Merged screenshots:"
|
||||
ls -la packages/ui/__screenshots__/
|
||||
|
||||
- name: Upload merged screenshots
|
||||
uses: actions/upload-artifact@v6
|
||||
with:
|
||||
name: storycap-report
|
||||
path: packages/ui/__screenshots__
|
||||
retention-days: 30
|
||||
|
||||
- name: Run visual regression comparison
|
||||
uses: reg-viz/reg-actions@v3
|
||||
with:
|
||||
github-token: "${{ secrets.GITHUB_TOKEN }}"
|
||||
image-directory-path: "./packages/ui/__screenshots__"
|
||||
```
|
||||
|
||||
### Changesetsによるバージョン管理
|
||||
|
||||
自分は調べながら初めて使ったけど、とても便利そう
|
||||
|
||||
インストール
|
||||
```bash
|
||||
pnpm add -wD @changesets/cli
|
||||
```
|
||||
|
||||
初期化
|
||||
```bash
|
||||
npx changesets init
|
||||
```
|
||||
|
||||
変更を追記(GitHub Appで自動化可能)
|
||||
```bash
|
||||
npx changesets
|
||||
```
|
||||
|
||||
追記した変更をまとめてリリース(GitHub Actionで自動化可能)
|
||||
```bash
|
||||
npx changesets version
|
||||
```
|
||||
|
||||
変更の追記の確認をしてくれるBot
|
||||
|
||||
https://github.com/apps/changeset-bot
|
||||
|
||||
masterにpushがあったら自動でリリース(changesets version)を行うAction
|
||||
|
||||
```yaml
|
||||
name: Release
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
|
||||
concurrency: ${{ github.workflow }}-${{ github.ref }}
|
||||
|
||||
jobs:
|
||||
release:
|
||||
name: Release
|
||||
permissions:
|
||||
pull-requests: write
|
||||
contents: write
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout Repo
|
||||
uses: actions/checkout@v3
|
||||
- uses: pnpm/action-setup@v4
|
||||
with:
|
||||
run_install: false
|
||||
- name: Setup Node.js 20
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 22
|
||||
|
||||
- name: Install Dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: Create Release Pull Request
|
||||
uses: changesets/action@v1
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
```
|
||||
|
||||
### npm versionによるバージョン管理
|
||||
|
||||
npmではやったことないけど、Gradleでは近い方法でバージョン管理をしていた 全パッケージが同じバージョン番号を持つプロジェクトやモノレポじゃないプロジェクトではGitに全部を合わせることができるので楽
|
||||
|
||||
https://qiita.com/minamo173/items/8b8b27bc6ecd17ad925e
|
||||
|
||||
masterブランチにtagがpushされたときにfrom-gitで発動させる
|
||||
|
||||
### GitHub Copilotによるレビューを行う
|
||||
|
||||
自動でレビューさせるかはともかく設定する
|
||||
|
||||
https://github.com/settings/copilot/features
|
||||
|
||||
で有効化できる
|
||||
|
||||
`.github/copilot-instructions.md`に日本語で頼む的な指示を書いておきましょう。
|
||||
|
||||
---
|
||||
|
||||
AI関連のことも書こうかと思ったけどだいぶ長い記事になったので一旦ここまで
|
||||
Loading…
Reference in New Issue