Skip to content

๐Ÿ“ฆ chore: Chromatic ์„ค์น˜ ๋ฐ CI/CD ์›Œํฌํ”Œ๋กœ ์ž‘์„ฑ #5

๐Ÿ“ฆ chore: Chromatic ์„ค์น˜ ๋ฐ CI/CD ์›Œํฌํ”Œ๋กœ ์ž‘์„ฑ

๐Ÿ“ฆ chore: Chromatic ์„ค์น˜ ๋ฐ CI/CD ์›Œํฌํ”Œ๋กœ ์ž‘์„ฑ #5

Workflow file for this run

name: Preview
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
pull_request:
branches: ['main']
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Node.js ์„ค์น˜
uses: actions/setup-node@v4
with:
node-version: 20.x
cache: 'npm'
- name: ์˜์กด์„ฑ ์บ์‹ฑ
uses: actions/cache@v3
id: npm-cache
with:
path: '**/node_modules'
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
- name: ์˜์กด์„ฑ ์„ค์น˜
if: steps.npm-cache.outputs.cache-hit != 'true'
run: npm ci
- name: React ๋นŒ๋“œ
run: npm run build --if-present
chromatic-preview:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Node.js ์„ค์น˜
uses: actions/setup-node@v4
with:
node-version: 20
- name: ์˜์กด์„ฑ ์บ์‹ฑ
uses: actions/cache@v3
id: npm-cache
with:
path: '**/node_modules'
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
- name: ์˜์กด์„ฑ ์„ค์น˜
if: steps.npm-cache.outputs.cache-hit != 'true'
run: npm ci
- name: Chromatic์— ๋ฐฐํฌ
id: chromatic
uses: chromaui/action@latest
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
token: ${{ secrets.GITHUB_TOKEN }}
onlyChanged: true
autoAcceptChanges: true
outputs:
storybook_url: ${{ steps.chromatic.outputs.storybookUrl }}
vercel-preview:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Vercel CLI ์„ค์น˜
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
- run: sleep 30
- name: vercel-preview-url
uses: zentered/vercel-preview-url@v1.1.9
id: vercel_preview_url
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
with:
vercel_project_id: ${{ env.VERCEL_PROJECT_ID }}
outputs:
vercel_url: ${{ steps.vercel_preview_url.outputs.preview_url }}
github-bot:
runs-on: ubuntu-latest
needs: [chromatic-preview, vercel-preview]
steps:
- name: PR ์ฝ”๋ฉ˜ํŠธ๋กœ Preview URL ๋‚จ๊ธฐ๊ธฐ
uses: thollander/actions-comment-pull-request@v2
with:
message: |
๐Ÿš€ Storybook Preview ๋ณด๋Ÿฌ๊ฐ€๊ธฐ: ${{ needs.chromatic-preview.outputs.storybook_url }}
๐Ÿš€ React Preview ๋ณด๋Ÿฌ๊ฐ€๊ธฐ: https://${{ needs.vercel-preview.outputs.vercel_url }}