feat: frontend CI/CD script implements

.github/workflows/frontend-ci-cd.yml

@@ -0,0 +1,95 @@
+ name: develop 브랜치에서 프론트엔드 CI/CD 파이프라인 구축
+
+on:
+  push:
+    branches:
+      - 'develop'
+    paths:
+      - 'packages/FE/**'
+  workflow_dispatch:
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 소스 코드 불러오기
+        uses: actions/checkout@v4
+
+      - name: Node.js 설정
+        uses: actions/setup-node@v3
+        with:
+          node-version: '22.9.0'
+
+      - name: FE 의존성 설치
+        run: yarn install
+
+    # e2e 테스트 추가 후 설정 예정
+    #   - name: BE e2e 테스트 실행
+    #     run: yarn test:e2e
+    #     working-directory: packages/BE
+
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    needs: build-and-test
+    if: success()
+
+    steps:
+      - name: 소스 코드 불러오기
+        uses: actions/checkout@v4
+
+      - name: docker hub login
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_CLIENT_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_CLIENT_PASSWORD }}
+
+      - name: Docker build
+        run: docker build -t ${{ secrets.DOCKER_HUB_CLIENT_USERNAME }}/you-quiz-fe:${{ github.run_number }} Dockerfile.fe
+
+      - name: Push to docker hub
+        run: docker push ${{ secrets.DOCKER_HUB_CLIENT_USERNAME }}/you-quiz-fe:${{ github.run_number }}
+
+      - name: Github Actions Public IP 가져오기
+        id: ip
+        run: |
+          PUBLIC_IP=$(curl -s https://ifconfig.me)
+          echo "::set-output name=public_ip::$PUBLIC_IP"
+
+      - name: NCP CLI 설치 및 자격 증명
+        run: |
+          cd ~
+          wget https://www.ncloud.com/api/support/download/5/65
+          unzip 65
+          mkdir ~/.ncloud
+          echo -e "[DEFAULT]\nncloud_access_key_id = ${{ secrets.NCP_ACCESS_KEY_ID }}\nncloud_secret_access_key = ${{ secrets.NCP_SECRET_ACCESS_KEY }}\nncloud_api_url = ${{ secrets.NCP_API_URL }}" >> ~/.ncloud/configure
+
+      - name: Github Actions IP를 ACG, ACL 규칙에 추가
+        run: |
+          chmod -R 777 ~/cli_linux
+          cd ~/cli_linux
+          ./ncloud vserver addAccessControlGroupInboundRule --regionCode KR --vpcNo ${{ secrets.NCP_VPC_ID }} --accessControlGroupNo ${{ secrets.NCP_AGC_ID }} --accessControlGroupRuleList "protocolTypeCode='TCP', ipBlock='${{ steps.ip.outputs.public_ip }}/32', portRange='${{ secrets.SSH_PORT }}'"
+          ./ncloud vpc addNetworkAclInboundRule --regionCode KR --networkAclNo ${{ secrets.NCP_ACL_ID }} --networkAclRuleList "priority='${{ secrets.FE_NCP_ACL_PRIORITY}}', protocolTypeCode='TCP', ipBlock='${{ steps.ip.outputs.public_ip }}/32', portRange='${{ secrets.SSH_PORT }}', ruleActionCode='ALLOW'"
+
+      - name: docker build and docker hub push
+
+      - name: NCP 서버에 SSH로 접속 후 배포
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.NCP_CLIENT_HOST}}
+          username: ${{ secrets.NCP_CLIENT_USERNAME}}
+          password: ${{ secrets.NCP_CLIENT_PASSWORD}}
+          port: ${{ secrets.NCP_SERVER_PORT}}
+          script: |
+            docker stop you-quiz-fe || true
+            docker rm you-quiz-fe || true
+
+            docker pull ${{ secrets.DOCKER_HUB_CLIENT_USERNAME }}/you-quiz-fe:${{ github.run_number }}
+            docker run -d --name you-quiz-fe -p 80:3000 ${{ secrets.DOCKER_HUB_CLIENT_USERNAME }}/you-quiz-fe:${{ github.run_number }}
+
+      - name: Github Actions IP를 ACG, ACL 규칙에서 삭제
+        run: |
+          chmod -R 777 ~/cli_linux
+          cd ~/cli_linux
+          ./ncloud vserver removeAccessControlGroupInboundRule --regionCode KR --vpcNo ${{ secrets.NCP_VPC_ID }} --accessControlGroupNo ${{ secrets.NCP_AGC_ID }} --accessControlGroupRuleList "protocolTypeCode='TCP', ipBlock='${{ steps.ip.outputs.public_ip }}/32', portRange='${{ secrets.SSH_PORT }}'"
+          ./ncloud vpc removeNetworkAclInboundRule --regionCode KR --networkAclNo ${{ secrets.NCP_ACL_ID }} --networkAclRuleList "priority='${{ secrets.FE_NCP_ACL_PRIORITY}}', protocolTypeCode='TCP', ipBlock='${{ steps.ip.outputs.public_ip }}/32', portRange='${{ secrets.SSH_PORT }}', ruleActionCode='ALLOW'"

Dockerfile.fe

@@ -0,0 +1,43 @@
+# 빌드 스테이지
+FROM node:22.9.0-alpine AS builder
+
+WORKDIR /app
+
+# 종속성 파일만 먼저 복사하여 캐시 활용
+COPY package.json yarn.lock .yarnrc.yml ./
+COPY tsconfig.json ./
+COPY .yarn ./.yarn 
+COPY packages ./packages
+
+# 종속성 설치
+RUN yarn install
+
+# FE 프로젝트 빌드
+WORKDIR /app/packages/FE
+RUN yarn build
+
+# 실행 스테이지
+FROM node:22.9.0-alpine AS runner
+
+WORKDIR /app
+
+# 필요한 파일 복사 순서 변경 및 종속성 설치 추가
+COPY --from=builder /app/package.json ./
+COPY --from=builder /app/tsconfig.json ./
+COPY --from=builder /app/yarn.lock ./
+COPY --from=builder /app/.yarnrc.yml ./
+COPY --from=builder /app/.yarn ./.yarn
+COPY --from=builder /app/packages ./packages
+
+# 종속성 설치 추가
+RUN yarn install
+
+# 환경 변수 설정
+ENV NODE_ENV production
+ENV PORT 3000
+
+# 포트 설정
+EXPOSE 3000
+
+# 실행 명령어
+CMD ["yarn", "workspace", "FE", "preview", "--host", "0.0.0.0"]