update : 워크플로우, 도커 프론트 설정

.github/workflows/deploy-dev.yml

@@ -1,120 +1,75 @@
-name: Deploy to Dev
+name: Deploy Frontend to Dev
 
-# 워크플로우 트리거 설정
 on:
   workflow_dispatch:
   push:
     branches:
-      - feature/cicd # 푸시될 때 워크플로우 실행
+      - feature/frontcicd
   pull_request:
     branches:
-      - feature/cicd # 해당 브랜치로 PR이 닫힐 때 워크플로우 실행
+      - feature/frontcicd
     types:
       - closed
 
 jobs:
-  deploy:
-    runs-on: ubuntu-latest # 워크플로우가 실행될 환경 설정 (최신 Ubuntu 버전)
+  build-and-deploy:
+    runs-on: ubuntu-latest
 
     steps:
-      # 리포지토리를 체크아웃하여 코드베이스를 가져옴
-      - name: Checkout
+      # 리포지토리의 코드를 체크아웃합니다.
+      - name: Checkout code
         uses: actions/checkout@v3
-        # 코드베이스를 GitHub Actions runner에 체크아웃하여 빌드와 테스트가 가능하도록 함
 
-      # JDK 17을 설정하여 자바 환경을 구성
-      - name: Set up JDK 17
-        uses: actions/setup-java@v2
+      # Node.js를 설정합니다.
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
         with:
-          java-version: '17' # 사용할 자바 버전 설정
-          distribution: 'adopt' # 자바 배포판 설정 (AdoptOpenJDK)
+          node-version: '20.16.0'
 
-      # Gradle 실행 파일에 실행 권한 부여
-      - name: Grant execute permission for gradlew
-        run: chmod +x ./gradlew # gradlew 파일에 실행 권한을 부여하여 실행 가능하도록 함
+      # 의존성을 설치합니다.
+      - name: Install dependencies
+        run: npm install
+        working-directory: ./frontend
 
-      # 유닛 테스트를 실행하여 코드의 품질을 확인
-      - name: Run unit tests
-        run: ./gradlew clean test # Gradle을 사용하여 클린 빌드 후 테스트를 실행
+      # React 애플리케이션을 빌드합니다.
+      - name: Build React app
+        run: npm run build
+        working-directory: ./frontend
 
-      # 테스트가 통과된 경우 Jar 파일을 빌드
-      - name: Build Jar
-        run: ./gradlew bootJar # 애플리케이션을 패키징하여 실행 가능한 Jar 파일 생성
+      # Docker 이미지를 빌드합니다.
+      - name: Build Frontend Docker image
+        run: docker build -t frontend-app -f Dockerfile.frontend .
 
-      # 빌드가 완료된 후 JAR 파일이 존재하는지 확인
-      - name: Verify Jar File
-        run: test -f build/libs/itsmine-0.0.1-SNAPSHOT.jar && echo "JAR file exists" || echo "JAR file does not exist"
-        # 빌드된 JAR 파일이 존재하는지 확인하고 결과를 출력
-
-      # Docker 이미지를 빌드하여 애플리케이션 컨테이너 이미지 생성
-      - name: Build Docker image
-        run: docker build -t itsmine . # Docker 이미지를 빌드하고 태그를 'itsmine'으로 설정
-
-      # Amazon ECR에 로그인하여 Docker 이미지를 푸시할 수 있도록 설정
+      # Amazon ECR에 로그인합니다.
       - name: Log in to Amazon ECR
         env:
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} # AWS 액세스 키 ID
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} # AWS 시크릿 액세스 키
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
         run: |
           aws ecr get-login-password --region ${{ secrets.AWS_REGION }} | docker login --username AWS --password-stdin ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.${{ secrets.AWS_REGION }}.amazonaws.com
-          # AWS ECR에 Docker 로그인
 
-      # 빌드된 Docker 이미지에 고유 태그를 설정하여 ECR에 푸시할 수 있도록 준비
-      - name: Tag Docker image
-        id: tag_image
+      # Docker 이미지를 태그하고 푸시합니다.
+      - name: Tag and Push Frontend Docker image
+        id: frontend_tag_image
         run: |
           TIMESTAMP=$(date +%Y%m%d%H%M%S)
-          IMAGE_TAG=${{ github.sha }}-$TIMESTAMP
-          docker tag itsmine:latest ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.${{ secrets.AWS_REGION }}.amazonaws.com/itsmine-repository:$IMAGE_TAG
-          echo "::set-output name=IMAGE_TAG::$IMAGE_TAG"
-        # Docker 이미지에 현재 커밋 SHA와 타임스탬프를 태그로 설정하여 고유하게 만듦
-
-      # Docker 이미지를 Amazon ECR에 푸시
-      - name: Push Docker image to ECR
-        run: docker push ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.${{ secrets.AWS_REGION }}.amazonaws.com/itsmine-repository:${{ steps.tag_image.outputs.IMAGE_TAG }}
-        # 태그된 Docker 이미지를 ECR에 푸시
+          FRONTEND_IMAGE_TAG=${{ github.sha }}-frontend-$TIMESTAMP
+          docker tag frontend-app:latest ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.${{ secrets.AWS_REGION }}.amazonaws.com/frontend-repository:$FRONTEND_IMAGE_TAG
+          echo "::set-output name=FRONTEND_IMAGE_TAG::$FRONTEND_IMAGE_TAG"
+          docker push ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.${{ secrets.AWS_REGION }}.amazonaws.com/frontend-repository:$FRONTEND_IMAGE_TAG
 
-      # EC2 인스턴스에 SSH로 접속하여 Docker 컨테이너를 배포
-      - name: SSH into EC2 and deploy Docker container
+      # Amazon EC2 인스턴스에 SSH로 접속하여 Docker 컨테이너를 배포합니다.
+      - name: SSH into EC2 and deploy Frontend Docker container
         uses: appleboy/[email protected]
         with:
-          host: ${{ secrets.SSH_HOST }} # EC2 인스턴스의 호스트 주소
-          username: ec2-user # SSH 사용자 이름
-          key: ${{ secrets.SSH_KEY }} # SSH 키
-          port: 22 # SSH 포트
-          script_stop: true # 스크립트 실패 시 작업 중지
+          host: ${{ secrets.SSH_HOST }}
+          username: ec2-user
+          key: ${{ secrets.SSH_KEY }}
+          port: 22
+          script_stop: true
           script: |
             aws ecr get-login-password --region ${{ secrets.AWS_REGION }} | docker login --username AWS --password-stdin ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.${{ secrets.AWS_REGION }}.amazonaws.com
-            docker pull ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.${{ secrets.AWS_REGION }}.amazonaws.com/itsmine-repository:${{ steps.tag_image.outputs.IMAGE_TAG }}
-            docker stop itsmine || true
-            docker rm itsmine || true
-            docker run -d --name itsmine -p ${{ secrets.SERVER_PORT }}:${{ secrets.SERVER_PORT }} \
-              -e SERVER_PORT=${{ secrets.SERVER_PORT }} \
-              -e DB_URL=${{ secrets.DB_URL }} \
-              -e DB_USER=${{ secrets.DB_USER }} \
-              -e DB_PASSWORD=${{ secrets.DB_PASSWORD }} \
-              -e JWT_KEY=${{ secrets.JWT_KEY }} \
-              -e ADMIN_TOKEN=${{ secrets.ADMIN_TOKEN }} \
-              -e AWS_ACCESS_KEY_ID=${{ secrets.AWS_ACCESS_KEY_ID }} \
-              -e AWS_SECRET_ACCESS_KEY=${{ secrets.AWS_SECRET_ACCESS_KEY }} \
-              -e AWS_REGION=${{ secrets.AWS_REGION }} \
-              -e AWS_ACCOUNT_ID=${{ secrets.AWS_ACCOUNT_ID }} \
-              -e RABBITMQ_BROKER=${{ secrets.RABBITMQ_BROKER }} \
-              -e RABBITMQ_PORT=${{ secrets.RABBITMQ_PORT }} \
-              -e RABBITMQ_USERNAME=${{ secrets.RABBITMQ_USERNAME }} \
-              -e RABBITMQ_PASSWORD=${{ secrets.RABBITMQ_PASSWORD }} \
-              -e RABBITMQ_VIRTUAL_HOST=${{ secrets.RABBITMQ_VIRTUAL_HOST }} \
-              -e REDIS_DOMAIN=${{ secrets.REDIS_DOMAIN }} \
-              -e REDIS_PORT=${{ secrets.REDIS_PORT }} \
-              -e ACTIVEMQ_BROKER=${{ secrets.ACTIVEMQ_BROKER }} \
-              -e ACTIVEMQ_USER=${{ secrets.ACTIVEMQ_USER }} \
-              -e ACTIVEMQ_PASSWORD=${{ secrets.ACTIVEMQ_PASSWORD }} \
-              -e CLOUD_AWS_S3_BUCKET=${{ secrets.CLOUD_AWS_S3_BUCKET }} \
-              -e CLOUD_AWS_S3_DOMAIN=${{ secrets.CLOUD_AWS_S3_DOMAIN }} \
-              -e CLOUD_AWS_REGION_STATIC=${{ secrets.CLOUD_AWS_REGION_STATIC }} \
-              -e CLOUD_AWS_CREDENTIALS_ACCESSKEY=${{ secrets.CLOUD_AWS_CREDENTIALS_ACCESSKEY }} \
-              -e CLOUD_AWS_CREDENTIALS_SECRETKEY=${{ secrets.CLOUD_AWS_CREDENTIALS_SECRETKEY }} \
-              -e CLOUD_AWS_DYNAMODB_ACCESSKEY=${{ secrets.CLOUD_AWS_DYNAMODB_ACCESSKEY }} \
-              -e CLOUD_AWS_DYNAMODB_SECRETKEY=${{ secrets.CLOUD_AWS_DYNAMODB_SECRETKEY }} \
-              -e ACTIVEMQ_QNAME=${{ secrets.ACTIVEMQ_QNAME }} \
-              ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.${{ secrets.AWS_REGION }}.amazonaws.com/itsmine-repository:${{ steps.tag_image.outputs.IMAGE_TAG }}
+            docker pull ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.${{ secrets.AWS_REGION }}.amazonaws.com/frontend-repository:${{ steps.frontend_tag_image.outputs.FRONTEND_IMAGE_TAG }}
+            docker stop frontend-app || true
+            docker rm frontend-app || true
+            docker run -d --name frontend-app -p 3000:80 ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.${{ secrets.AWS_REGION }}.amazonaws.com/frontend-repository:${{ steps.frontend_tag_image.outputs.FRONTEND_IMAGE_TAG }}

Dockerfile

@@ -0,0 +1,23 @@
+# 프론트엔드 빌드 단계
+FROM node:20.16.0 AS build
+
+WORKDIR /app
+
+# 의존성 설치
+COPY frontend/package.json frontend/package-lock.json ./
+RUN npm install
+
+# 애플리케이션 소스 복사 및 빌드
+COPY frontend ./
+RUN npm run build
+
+# Nginx 단계
+FROM nginx:alpine
+
+# 빌드된 파일을 Nginx의 html 디렉토리로 복사
+COPY --from=build /app/build /usr/share/nginx/html
+
+# 포트 80 노출
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]