Skip to content

Feature/#883

Feature/#883 #15

name: frontend-pull-request
on:
pull_request:
types: [opened, synchronize]
branches: [main, fe-dev]
paths:
- "client/**"
jobs:
test:
runs-on: ubuntu-latest
defaults:
run:
shell: bash
working-directory: ./client
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: "20.15.1"
- name: Install dependencies
run: npm install
- name: Run lint
run: npm run lint
- name: Run test
run: npm run test
- name: Cypress test
run: npm run dev &
env:
CI: true
- name: Wait for the server to start
run: sleep 3
- name: Run Cypress tests
run: npm run cypress-run
feature-deploy:
runs-on: ubuntu-latest
defaults:
run:
shell: bash
working-directory: ./client
# pull request base ref가 fe-dev일 때만 feature-deploy 작업 수행
if: github.base_ref == 'fe-dev'
steps:
# 1. Git 리포지토리 체크아웃
- name: Checkout code
uses: actions/checkout@v4
# 2. Node js 20.15.1 버전으로 셋팅
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: "20.15.1"
# 3. feature 브랜치 이름 추출 (feature/#123 -> feature123)
- name: Extract and format branch name
run: |
echo "BRANCH_NAME=$(echo '${{ github.head_ref }}' | sed 's#[/#]##g')" >> $GITHUB_ENV
# 4. 의존성이 캐시에 있는지 확인
- name: Cache dependencies
id: cache
uses: actions/cache@v3
with:
path: "**/node_modules"
key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}-v1
restore-keys: |
${{ runner.os }}-npm-
# 5. 의존성 설치
- name: Install dependencies
if: steps.cache.outputs.cache-hit != 'true'
run: npm install
# 6. Dev 환경으로 빌드
- name: Build dev environment
run: npm run build-dev-feature
env:
API_BASE_URL: ${{ secrets.API_BASE_URL }}
AMPLITUDE_KEY: ${{ secrets.AMPLITUDE_KEY }}
KAKAO_JAVASCRIPT_KEY: ${{ secrets.KAKAO_JAVASCRIPT_KEY }}
IMAGE_URL: ${{ secrets.IMAGE_URL }}
KAKAO_REDIRECT_URI: ${{ secrets.KAKAO_REDIRECT_URI }}
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
BRANCH_NAME: ${{ env.BRANCH_NAME }}
# 7. AWS 인증 설정
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v3
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ secrets.AWS_REGION }}
# 8. S3에 업로드
- name: Deploy to S3
env:
BRANCH_NAME: ${{ env.BRANCH_NAME }}
run: |
aws s3 sync ./dist s3://${{ secrets.S3_BUCKET_NAME }}/dev/${BRANCH_NAME}/ \
--delete
# 9. CloudFront 캐시 무효화
- name: Invalidate CloudFront Cache
env:
BRANCH_NAME: ${{ env.BRANCH_NAME }}
run: |
aws cloudfront create-invalidation \
--distribution-id ${{ secrets.DEV_CLOUDFRONT_DISTRIBUTION_ID }} \
--paths "/${BRANCH_NAME}/*"
# 10. 배포 주소 PR에 코멘트 작성
- name: Comment on PR
env:
BRANCH_NAME: ${{ env.BRANCH_NAME }}
uses: thollander/actions-comment-pull-request@v2
with:
message: "🚀 **Deploy Link**: ${{ secrets.DEV_BASE_URL }}/${{ env.BRANCH_NAME }}"
chromatic:
name: Run Chromatic
runs-on: ubuntu-latest
defaults:
run:
shell: bash
working-directory: ./client
steps:
- name: Checkout code
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: "20.15.1"
- name: Cache dependencies
id: cache
uses: actions/cache@v3
with:
path: "**/node_modules"
key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}-v1
restore-keys: |
${{ runner.os }}-npm-
- name: Install dependencies
if: steps.cache.outputs.cache-hit != 'true'
run: npm install
- name: Run Chromatic
uses: chromaui/action@latest
id: publish_chromatic
with:
workingDir: client
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
- name: Comment on PR
uses: thollander/actions-comment-pull-request@v2
with:
message: "🚀 **storybook**: ${{ steps.publish_chromatic.outputs.storybookUrl }}"