Merge commit 'acd09448dbc3fc5bce719a94da1d1d996c1dab02'

osdoonhyun · May 17, 2024 · 6cd111f · 6cd111f
2 parents 002a3b1 + acd0944
commit 6cd111f
Show file tree

Hide file tree

Showing 171 changed files with 42,414 additions and 2,939 deletions.
diff --git a/.github/workflows/code-update.yml b/.github/workflows/code-update.yml
@@ -0,0 +1,26 @@
+name: EC2 Update
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: ssh to ec2
+        uses: appleboy/ssh-action@master
+        with:
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          host: ${{ secrets.EC2_HOST }}
+          username: ${{ secrets.EC2_USERNAME }}
+          password: ${{ secrets.EC2_PASSWORD}}
+          script: | # 인스턴스 코드 업데이트
+            cd Sel-Q
+            git pull https://osdoonhyun:${{ secrets.GIT_TOKEN }}@github.com/osdoonhyun/SEL-Q.git
diff --git a/.github/workflows/docker-ci-cd.yml b/.github/workflows/docker-ci-cd.yml
@@ -0,0 +1,69 @@
+name: CI/CD Docker
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_PASSWORD }}
+
+      # Nginx
+      - name: Build and push Nginx
+        uses: docker/build-push-action@v2
+        with:
+          context: ./nginx
+          push: true
+          tags: osdoonhyun/sel-q:nginx-latest
+
+      # Client
+      - name: Build and push Client
+        uses: docker/build-push-action@v2
+        with:
+          context: ./selq-client
+          push: true
+          tags: osdoonhyun/sel-q:client-latest
+
+      # Server
+      - name: Build and push Server
+        uses: docker/build-push-action@v2
+        with:
+          context: ./selq-server
+          push: true
+          tags: osdoonhyun/sel-q:server-latest
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: ssh connect & production
+        uses: appleboy/ssh-action@master
+        with:
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          host: ${{ secrets.EC2_HOST }}
+          username: ${{ secrets.EC2_USERNAME }}
+          password: ${{ secrets.EC2_PASSWORD}}
+          port: ${{ secrets.EC2_SSH_PORT }}
+          script: | # 이미지 최신화, 서비스 업데이트
+            cd Sel-Q
+            docker compose down
+            docker system prune -a --volumes -f
+            docker compose pull -q
+            docker compose up --force-recreate --build -d --quiet-pull 2>log.out
+            cat log.out
diff --git a/README.md b/README.md
@@ -0,0 +1,77 @@
+<div align="center">
+
+### [Sel-Q, 셀큐 바로가기](https://selq.store)
+임시계정(ID: admin@<hi>naver.com / PW: 1234!Admin)<br>
+
+<img alt="logo" src="https://github.com/osdoonhyun/selQ-client/assets/87527736/bf29e34d-7d4b-4ae8-9392-76298db0496a" width="484px;" style="background-color: #f0f0f0; padding-top:10px;">
+
+
+</div>
+
+<br><br>
+
+## [프론트 레포로 이동 ➡️](https://github.com/osdoonhyun/selQ-client)
+
+프론트 기술 스택, 아키텍쳐, 폴더 구조, 기능 및 페이지 소개, 컨벤션 설명 보러가기!
+
+<br><br>
+
+## 🛠️ 기술 스택
+
+### 프론트엔드
+
+<img alt="fronted" src="https://github.com/osdoonhyun/selQ-client/assets/87527736/15c50c71-0163-42c6-9714-277b463912f4" width="55%"  style="background-color: #f0f0f0; padding-top:10px;">
+
+### 백엔드
+
+<img alt="backend" src="https://github.com/osdoonhyun/selQ-client/assets/87527736/fd183d33-aaed-4448-96c5-2f7a4232ef0f" width="55%"  style="background-color: #f0f0f0; padding-top:10px;">
+
+### 인프라
+
+<img alt="infra" src="https://github.com/osdoonhyun/selQ-client/assets/87527736/653f3602-fc64-4ad2-8f03-e14762c8c120" width="55%"  style="background-color: #f0f0f0; padding-top:10px;">
+
+<br><br>
+
+## 🏛️ 인프라 구성도
+
+<img alt="selq-deployment" src="https://github.com/osdoonhyun/selQ-client/assets/87527736/3e61d826-2e23-4667-9876-51828883e3e6" width="75%"  style="background-color: #f0f0f0; padding-top:10px;">
+
+<br><br>
+
+## 📚 버전 설명
+> v0부터 v2까지 주도적으로 개발하였습니다.
+
+### v1
+
+> 프로젝트의 전반적인 구조와 기능을 완성하는 것과 효율적이고 확장 가능한 구조를 목표로 두었습니다.
+
+- **백엔드 서버 재구성**
+  - 기존의 Strapi CMS를 제거하고 별도의 백엔드 서버를 도입했습니다.
+  - 이로써 보다 유연하고 확장 가능한 구조를 구축하였습니다.
+- **디자인부터 개발∙배포**
+  - 프로젝트의 디자인 단계부터 개발 및 배포까지의 전 과정을 경험하였습니다.
+  - 프로젝트를 체계적으로 관리하기 위해 사용자 기능, API 정의서, 요구사항 정의서를 정리하며 진행하였습니다.
+- **프로젝트 배포**
+  - Client, Server 그리고 Nginx를 각각의 도커 컨테이너로 구성하였습니다.
+  - Docker Compose를 사용하여 각 서비스 간의 의존성을 관리함으로써 배포 과정을 단순화하고 안정성을 유지했습니다.
+<br>
+
+### v2
+
+> 프로젝트를 배포 운영하며 기능을 확장하고 개선하는 데 초점을 맞췄습니다.
+
+- **피드백 정리와 분석** 
+  - 사용자들로부터 받은 피드백을 체계적으로 정리하고, 우선순위를 결정하기 위해 분석했습니다.
+  - 이를 통해 사용자들의 요구사항과 우려사항을 명확히 파악했습니다.
+- **기능 추가** 
+  - 우선순위가 높은 피드백을 바탕으로 새로운 기능을 추가했습니다.
+  - 사용자들이 요청한 기능을 구현하여 서비스의 기능성을 향상시켰습니다.
+- **버그 수정**
+  - 배포 당시 발견하지 못했던 버그를 발견하고 수정함으로써 사용자들의 불편을 해소했습니다.
+  - 안정적인 서비스를 제공하기 위해 노력했습니다.
+- **CI/CD 구축**
+  - GitHub Actions를 통해 CI/CD 파이프라인을 구축하여 개발 및 배포 과정을 자동화하였습니다.
+  - 개발자 경험 향상을 통해 생산성을 높일 수 있었습니다.
+- **시각화**
+  - 프론트의 아키텍처, 인프라 구성, 토큰 만료 시나리오 등을 시각화하여 정리하였습니다.
+  - 프로젝트의 전체적인 이해도를 높이고 시각화된 정보를 통해 의사소통이 용이해졌습니다.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,175 +1,36 @@
-# version: '3'
-
-# services:
-#   react-app:
-#     stdin_open: true
-#     tty: true
-#     build:
-#       context: ./selq-client
-#       dockerfile: Dockerfile
-#     ports:
-#       - '9000:3000'
-
-#     volumes:
-#       - ./selq-client/src:/selq-client/app/src:ro
-#     env_file:
-#       - ./selq-client/.env
-#     networks:
-#       - selq_networks
-
-#   nginx:
-#     depends_on:
-#       - react-app
-#     build:
-#       context: nginx
-#     container_name: nginx
-#     restart: always
-#     tty: true
-#     ports:
-#       - '80:80'
-#     networks:
-#       - selq_networks
-
-# networks:
-#   selq_networks:
-#     driver: bridge
-
-#   # 1:1은 depends on network는 다대다
-# networks:
-# selq_networks:
-# driver: bridge
-
 version: '3'
 
 services:
   nginx:
     image: nginx:latest
     container_name: nginx
     volumes:
-      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
-      - ./cert/cert.pem:/etc/nginx/cert/cert.pem
-      - ./cert/key.pem:/etc/nginx/cert/key.pem
+      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
     ports:
       - 80:80
-      - 443:443
-    command: /bin/sh -c "nginx -g 'daemon off;'"
+      # - 8000:8000
     depends_on:
       - react-app-1
       - react-app-backend
-    networks:
-      - selq-network
 
   react-app-1:
-    build:
-      context: selq-client
-      dockerfile: Dockerfile
+    build: selq-client # image: selq-client:latest
     container_name: react-app-1
-    networks:
-      - selq-network
-    ports:
-      - 3000:3000
-    depends_on:
-      - react-app-backend
-
-  # react-app-2:
-  #   build:
-  #     context: selq-client
-  #     # context: .
-  #     dockerfile: Dockerfile
-  #   container_name: react-app-2
-  #   networks:
-  #     - selq-network
-  #   # volumes:
-  #   #   - ./react:/usr/src/app
-  #   #   - /usr/src/app/node_modules
-  #   ports:
-  #     - '3001:3000'
-  #   # depends_on:
-  #   #   - react-app-backend
-
-  # react-app-3:
-  #   build:
-  #     context: selq-client
-  #     # context: .
-  #     dockerfile: Dockerfile
-  #   container_name: react-app-3
-  #   networks:
-  #     - selq-network
-  #   # volumes:
-  #   #   - ./react:/usr/src/app
-  #   #   - /usr/src/app/node_modules
-  #   ports:
-  #     - '3002:3000'
-  #   # depends_on:
-  #   #   - react-app-backend
-
-  # react-app-4:
-  #   build:
-  #     context: selq-client
-  #     # context: .
-  #     dockerfile: Dockerfile
-  #   container_name: react-app-4
-  #   networks:
-  #     - selq-network
-  #   # volumes:
-  #   #   - ./react:/usr/src/app
-  #   #   - /usr/src/app/node_modules
-  #   ports:
-  #     - '3003:3000'
-  #   # depends_on:
-  #   #   - react-app-backend
+    env_file:
+      - ./selq-client/.env
+    expose:
+      - 3000
+    # ports:
+    #   - 3000:3000
 
   react-app-backend:
-    build:
-      context: selq-server
-      dockerfile: Dockerfile
-      target: development
-
+    build: selq-server
     volumes:
       - ./selq-server:/usr/src/app
     env_file:
       - ./selq-server/.env
     command: npm run start:dev
-    ports:
-      #      - ${BACKEND_PORT}:${BACKEND_PORT}
-      # - 443:443
-      - 8000:8000
-    networks:
-      - selq-network
-
-  # react-app-backend:
-  #   build:
-  #     context: .
-  #     dockerfile: Dockerfile
-  #   container_name: react-app-backend
-  #   networks:
-  #     - selq-network
-  #   volumes:
-  #     - ./react:/usr/src/app
-  #     - /usr/src/app/node_modules
-  #   ports:
-  #     - '8000:8000'
-
-  # nginx:
-  #   build:
-  #     context: nginx
-  #   container_name: nginx
-  #   restart: always
-  #   ports:
-  #     - '80:80'
-  #     # - '443:443'
-  #   networks:
-  #     - selq-network
-  #   depends_on:
-  #     - react-app-1
-  #     - react-app-2
-  #     - react-app-3
-  #     - react-app-4
-  # - react-app-backend
-  # volumes:
-  #   - ./cert/cert.pem:/etc/nginx/cert/cert.pem
-  #   - ./cert/key.pem:/etc/nginx/cert/key.pem
-
-networks:
-  selq-network:
-    driver: bridge
+    expose:
+      - 8000
+    # ports:
+    #   - 8000:8000