Feature/#883 #15
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }}" |