Storybook で Chromatic を利用した VRTテストを実施する際には、GitHub Actions などの CI/CD 基盤にのせないといけないと思っている方は少なくないと思います。
🤖
そんなあなたに朗報です。
ローカル環境でも Storybook + Chromatic を利用した VRT による差分検知までなら可能です！！
ここまではドキュメントに書いていますが…
今回は特にDockerコンテナを利用した場合について深掘ります。
そういうわけで本題に入りましょう。
Docker実行環境の準備
Dockerfile
FROM public.ecr.aws/docker/library/node:22.14.0-slim
WORKDIR /app
COPY ./src/package.json ./
COPY ./src/package-lock.json ./
RUN npm install
RUN npm run prepare
CMD npm run cleanup && npm run run:dev
docker-compose.yml
services:
frontend:
build:
dockerfile: ./Dockerfile
ports:
- 9090:9090
- 6006:6006
restart: always
volumes:
- ./src:/app
- frontend_data:/app/node_modules/
- ./src/node_modules:/frontend_data/node_modules
stdin_open: true
tty: true
environment:
ENV: "local"
PORT: "9090"
HOST: "0.0.0.0"
volumes:
frontend_data:
driver: local
driver_opts:
type: none
device: ${PWD}/node_modules
o: bind
package.json の準備
./src/package.json
{
"name": "test-storybook",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"prepare": "nuxi prepare",
"cleanup": "nuxi cleanup",
"run:dev": "rm -rf /tmp/nitro && nuxi dev",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"keywords": [],
"author": "",
"dependencies": {
"nuxt": "^3.14.1592"
},
"devDependencies": {
"@chromatic-com/storybook": "^4.0.1",
"@nuxtjs/storybook": "^8.4.1",
"@storybook-vue/nuxt": "^8.4.1",
"@storybook/addon-docs": "^9.0.15",
"@storybook/addon-interactions": "^8.6.14",
"@storybook/addon-links": "^9.0.15",
"@storybook/addon-styling-webpack": "^2.0.0",
"@storybook/builder-vite": "^9.0.15",
"@storybook/vue3": "^9.0.15",
"chromatic": "^13.1.2",
"storybook": "^9.0.15",
"typescript": "^5.8.3",
"vite": "^6.3.5",
"vite-plugin-checker": "^0.9.3",
"vue-tsc": "^2.2.10"
},
"overrides": {
"@nuxtjs/storybook": {
"storybook": "9.0.15"
},
"@storybook/addon-styling-webpack": {
"storybook": "9.0.15"
},
"@storybook-vue/nuxt": {
"storybook": "9.0.15"
},
"@storybook/builder-vite": {
"vite": "6.3.5",
"storybook": "9.0.15"
},
"@storybook/addon-interactions": {
"storybook": "9.0.15"
},
"@storybook/vue3": {
"storybook": "9.0.15",
"vite": "6.3.5"
}
},
"optionalDependencies": {
"@oxc-parser/binding-darwin-arm64": "^0.70.0",
"@oxc-parser/binding-linux-arm-gnueabihf": "^0.70.0",
"@oxc-parser/binding-linux-x64-gnu": "^0.70.0",
"@oxc-parser/binding-linux-x64-musl": "^0.70.0",
"@rollup/rollup-darwin-arm64": "^4.28.0",
"@rollup/rollup-linux-arm64-gnu": "^4.28.0",
"@rollup/rollup-linux-x64-gnu": "^4.28.0"
}
}
nuxt.config.mts の準備
./src/nuxt.config.mts
import { checker } from 'vite-plugin-checker'
export default defineNuxtConfig({
typescript: {
typeCheck: true,
strict: true,
tsConfig: {
compilerOptions: {
noUncheckedIndexedAccess: true,
noErrorTruncation: true,
},
},
},
future: {
compatibilityVersion: 4,
},
modules: [
'@nuxtjs/storybook',
],
storybook: {
enabled: true,
host: '0.0.0.0',
port: 6006,
},
vue: {
compilerOptions: {
mode: 'module',
},
...,
},
vite: {
plugins: [
checker({
vueTsc: true,
}),
],
...,
}
})
.story/main.mts の準備
.story/main.mts
import type { StorybookConfig } from '@storybook-vue/nuxt'
const config: StorybookConfig = {
stories: ['../app/components/**/*.stories.@(tsx)'],
addons: [
'@storybook/addon-styling-webpack',
'@storybook/addon-links',
'@storybook/addon-interactions',
'@storybook/addon-docs',
'@chromatic-com/storybook',
],
framework: {
name: '@storybook-vue/nuxt',
options: {},
},
docs: {
autodocs: 'tag',
},
core: {
builder: '@storybook/builder-vite',
},
}
export default config
docker compose -f ./docker-compose.yml up
あれエラーが出る….
frontend-1 | ERROR [unhandledRejection] Command failed with exit code 127: git rev-parse --abbrev-ref HEAD
frontend-1 | /bin/sh: 1: git: not found
frontend-1 |
frontend-1 | at jt (node_modules/@chromatic-com/storybook/node_modules/chromatic/dist/chunk-6IZZOM5T.js:55:57)
frontend-1 | at node_modules/@chromatic-com/storybook/node_modules/chromatic/dist/chunk-6IZZOM5T.js:56:1427
frontend-1 | at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
frontend-1 | at async zr (node_modules/@chromatic-com/storybook/node_modules/chromatic/dist/chunk-VWVWVLKU.js:366:147)
frontend-1 | at async Object.BTt [as l] (node_modules/@chromatic-com/storybook/node_modules/chromatic/dist/chunk-VWVWVLKU.js:367:349)
frontend-1 | at async Object.zvn (node_modules/@chromatic-com/storybook/node_modules/chromatic/dist/chunk-6VIOZ7VT.js:1179:4165)
frontend-1 | at async ae (node_modules/@chromatic-com/storybook/dist/preset.js:12:8051)
frontend-1 | at async node_modules/@chromatic-com/storybook/dist/preset.js:16:353
frontend-1 | at async De (node_modules/@chromatic-com/storybook/dist/preset.js:13:137)
結論を言うと、chromatic-cli が git コマンドに依存しているためです。
Docker環境で git が入っているレジストリを選ぶことってそもそも少ないのでは？？
実際に、public.ecr.aws/docker/library/node:22.14.0-slim には、git は含まれていませんでした。
仕方がないので Chromatic のために git をインストールをするためにDockerfile を書き換えましょう！！
Dockerfile
FROM public.ecr.aws/docker/library/node:22.14.0-slim
WORKDIR /app
COPY ./src/package.json ./
COPY ./src/package-lock.json ./
RUN npm install
+ RUN apt update -y && apt install -y git
RUN npm run prepare
- CMD npm run cleanup && npm run run:dev
+ CMD git init -q && \
+
+ git config --global --add safe.directory /app && \
+ git config --global user.name "test" && \
+ git config --global user.email "test" && \
+ git add . && \
+ git commit -m "Docker Local Commit for Chromatic" --allow-empty && \
+ npm run cleanup && npm run run:dev
ちなみにコミットログも必要としているようだったので、
コミットログも無理やり作ることで動作するようになりそうです。
また、ダミーgitを利用すると、.git ディレクトリが勝手に作られてしまうのでそれを阻止しましょう。
docker-compose.yml
services:
frontend:
build:
dockerfile: ./Dockerfile
ports:
- 9090:9090
- 6006:6006
restart: always
volumes:
+ - empty_volume:/app/.git
- ./src:/app
- frontend_data:/app/node_modules/
- ./src/node_modules:/frontend_data/node_modules
...
volumes:
+ empty_volume:
...
実際に実行して、localhost:6006 で下記のような表示になっていれば成功です！
実際に、Chromaticのアカウントがあればログインを実施し、Visual Regression Test によって変更を可視化することができます。
今回は、ローカルDocker環境上で Storybook + Chromatic を利用した VRT による差分検知を実施する際の問題点と解決法について書きました。
最近は生成AIで、Storybookをうまいこと書いてもらったりと便利になりましたね。
ご指摘や質問などある方はコメントにご気軽にお願いします！
Views: 0
