[feat] 프론트 CI/CD 구축하기 (#48)

* feat : 프론트 github 액션 및 도커파일 생성

* feat : 프론트 배포 도커파일 작성

* feat : 프론트 ci/cd 깃허브 액션 추가

.github/workflows/deploy.yml

@@ -91,3 +91,50 @@ jobs:
             docker rm $(docker ps -a -q)
             docker run -d -p 1935:1935 -p 80:80 --env-file ${{ secrets.ENV_PATH }} ${{ secrets.NCP_CONTAINER_REGISTRY }}/rtmp-server
             docker image prune -f
+  docker_push_front:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to NCP Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ secrets.NCP_CONTAINER_REGISTRY }}
+          username: ${{ secrets.NCP_ACCESS_KEY }}
+          password: ${{ secrets.NCP_SECRET_KEY }}
+
+      - name: Build and Push Docker Image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          file: ./client/Dockerfile  
+          push: true
+          tags: ${{ secrets.NCP_CONTAINER_REGISTRY }}/front
+          cache-from: type=registry,ref=${{ secrets.NCP_CONTAINER_REGISTRY }}/front
+          cache-to: type=inline
+  docker_pull_frontend:
+    name: Connect server ssh and pull frontend from container registry
+    needs: docker_push_frontend
+    runs-on: ubuntu-latest
+    steps:
+      - name: connect ssh
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.FRONT_HOST }}
+          username: ${{ secrets.FRONT_USERNAME }}
+          password: ${{ secrets.FRONT_PASSWORD }}
+          port: ${{ secrets.FRONT_PORT }}
+          script: |
+            docker pull ${{ secrets.NCP_CONTAINER_REGISTRY }}/front
+            docker stop $(docker ps -a -q)
+            docker rm $(docker ps -a -q)
+            docker run -d -p 80:80 ${{ secrets.NCP_CONTAINER_REGISTRY }}/front
+            docker image prune -f
+
+
+

client/Dockerfile

@@ -0,0 +1,29 @@
+# 첫 번째 단계: 빌드 환경 구축
+FROM node:lts-alpine as build-stage
+
+WORKDIR /app
+
+# 의존성 파일 복사 및 설치
+COPY package*.json ./
+RUN npm install
+
+# 소스 코드 복사
+COPY . .
+
+# 애플리케이션 빌드
+RUN npm run build
+
+# 두 번째 단계: Nginx를 사용하여 애플리케이션 서빙
+FROM nginx:stable-alpine as production-stage
+
+# 빌드된 파일을 Nginx 서버로 복사
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+
+# Nginx 설정 파일 복사 (선택 사항)
+# COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# 80 포트 노출
+EXPOSE 80
+
+# Nginx 실행
+CMD ["nginx", "-g", "daemon off;"]