Merge branch 'development' into feature/convertTerraform

boostcampwm-2024 · Dec 3, 2024 · 5200a74 · 5200a74
2 parents 3bc9914 + edbf44d
commit 5200a74
Show file tree

Hide file tree

Showing 182 changed files with 5,655 additions and 1,798 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -6,4 +6,10 @@ apps/server/.gitignore
 apps/client/Dockerfile
 apps/client/node_modules
 apps/client/test
-apps/server/mocks
+apps/client/mocks
+
+apps/hub/Dockerfile
+apps/hub/node_modules
+apps/hub/.env
+
+node_modules
diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
@@ -32,6 +32,16 @@ jobs:
                       cloud-canvas.kr.ncr.ntruss.com/front:dev
                       cloud-canvas.kr.ncr.ntruss.com/front:${{ github.sha }}
 
+            - name: Docker front-hub image build and push
+              uses: docker/build-push-action@v3
+              with:
+                  context: .
+                  file: ./apps/hub/Dockerfile
+                  push: true
+                  tags: |
+                      cloud-canvas.kr.ncr.ntruss.com/front-hub:dev
+                      cloud-canvas.kr.ncr.ntruss.com/front-hub:${{ github.sha }}
+
             - name: Docker back image build and push
               uses: docker/build-push-action@v3
               with:

diff --git a/.github/workflows/pr-build-test.yml b/.github/workflows/pr-build-test.yml
@@ -25,7 +25,7 @@ jobs:
                   cache: true
 
             - name: Install dependencies with pnpm
-              run: pnpm install
+              run: pnpm install --no-frozen-lockfile
 
             - name: Build the project
               run: pnpm build
diff --git a/README.md b/README.md
@@ -1,60 +1,176 @@
-# Cloud Canvas
-
-<h1 align="center">
-  <img src="https://github.com/user-attachments/assets/10ca29c8-f363-431e-8e80-4ac5e869745b" alt="Cloud Canvas" width="300" height="300"/>
-</h1>
+<p align="middle" >
+<img width="" alt="cicd" src="https://github.com/user-attachments/assets/a01828bf-7603-4262-9761-6a44b361c2bd">
+</p>
 
 <h2 align="center">🎨 Cloud Canvas 🎨</h2>
+<p align="middle">쉽고 빠르게, 누구나 클라우드를 설계하는 즐거운 경험을!(배너로 대체 예정)</p>
+
+<div align=center>
+  <a href="https://hits.seeyoufarm.com">
+    <img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fboostcampwm-2024%2Fweb37-cloud-canvas&count_bg=%2390EE90&title_bg=%2332CD32&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false"/>
+  </a>
+</div>
+
+## Cloud Canvas ✨
+
+Cloud Canvas는 클라우드 인프라를 **그래픽 인터페이스**로 손쉽게 설계하고, 이를 **Terraform 코드**로 자동 변환할 수 있는 혁신적인 도구입니다. 국내 클라우드 플랫폼을 지원하며, 사용자가 **직관적으로** 인프라를 설계하고 **빠르게 배포**할 수 있도록 돕습니다.
+
+## 🌟 **주요 기능**
+
+-   **🎨 직관적인 UI/UX**  
+    클릭 몇 번으로 누구나 쉽게 클라우드 인프라 설계!
+
+-   **💻 Terraform 코드 변환**  
+    설계한 인프라를 자동으로 Terraform 코드로 변환하여 다운로드 가능!
+
+-   **🤝 협업 및 재활용**  
+    **인프라 허브**를 통해 다른 사용자들과 설계도를 공유하고 수정하며 효율적으로 협업!
+
+## 기능 시연
+
+### GUI를 통한 인프라 설계
+
+시나리오
+
+1. 허브 페이지에서 헤더에 있는 새 캔버스 버튼을 눌러 캔버스 페이지로 이동한다.
+2. 간단한 인프라를 설계한다.
+
+### 테라폼 코드 변환
+
+시나리오
+
+1. 캔버스 페이지에 완성된 인프라 아키텍처가 존재한다.
+2. 캔버스 페이지 우상단에 있는 convertor 버튼을 누르면 현재 설계된 인프라를 바탕으로 변환된 테라폼 코드가 나온다.
+3. 테라폼 코드를 통해 배포된 인프라를 확인한다.
+
+### 인프라 아키텍처 허브 업로드(프라이빗)
+
+시나리오
 
-## 📌 프로젝트 배경
+1. 인프라 아키텍처를 완성했다고 가정하고 캔버스 페이지에서 저장 버튼을 누른다.(/canvas)
+2. 저장이 완료되면, 새로고침 되며 발급받은 프라이빗 아키텍처를 parameter 붙여 private architecture 캔버스 페이지로 이동한다.(/canvas/private-architecutes/{id})
+3. 해당 아키텍처가 캔버스에 다시 불러와진 것을 확인하면 허브 페이지로 이동한다.(/로 이동)
+4. 허브 페이지에서 마이페이지로 이동하고 프라이빗 아키텍처 목록에서 새로운 목록이 추가된 것을 확인하고 클릭한다.
+5. 새로 추가된 프라이빗 아키텍처 목록을 클릭하면 다시 캔버스 페이지로 이동한다.
 
-클라우드 인프라 구축 과정에서 개발자들은 다음과 같은 어려움을 겪고 있습니다
+### 인프라 아키텍처 허브 업로드(퍼블릭)
 
--   **반복적인 수작업**: 클라우드 콘솔에서 각 리소스마다 별도의 페이지에 접속하여 생성하는 과정을 반복해야 합니다.
--   **플랫폼 적응 시간**: 클라우드 업체별로 상이한 인터페이스로 인해, 새로운 플랫폼 사용 시 추가적인 학습 시간이 필요합니다.
+시나리오
 
-이러한 인프라 관리 작업들로 인해 핵심 개발 업무에 집중하기 어려워집니다.
+1. 인프라 아키텍처를 완성했다고 가정하고 캔버스 페이지에서 저장 버튼을 누른다.(/canvas)
+2. 저장이 완료되면, 새로고침 되며 발급받은 프라이빗 아키텍처를 parameter 붙여 private architecture 캔버스 페이지로 이동한다.(/canvas/private-architecutes/{id})
+3. 해당 아키텍처가 캔버스에 다시 불러와진 것을 확인하면 허브 페이지로 이동한다.(/로 이동)
+4. 허브 페이지에서 마이페이지로 이동하고 프라이빗 아키텍처 목록에서 새로운 목록이 추가된 것을 확인하고 클릭한다.
+5. 새로 추가된 프라이빗 아키텍처 목록을 클릭하면 다시 캔버스 페이지로 이동한다.
 
-최근에는 위의 문제들을 해결하기 위한 도구들이 제공되고 있지만, 다음과 같은 한계점을 가지고 있습니다.
+### 인프라 아키텍처 허브 임포트
 
--   **Terraform 등 IaC 도구**: 높은 러닝 커브와 Terraform을 활용하여 프로젝트를 관리하는 방법을 학습하는 데 개발자들이 시간을 투자하여야 합니다.
--   **AWS CloudFormation Design, CloudCraft 등 GUI 인프라 설계 도구**: AWS CloudFormation Design은 AWS 전용으로 제공하는 기능이며, CloudCraft는 외국의 클라우드 업체만을 대상으로 하기에 국내 클라우드 업체를 사용하는 개발자들이 해당 도구들을 사용할 수 없습니다.
+시나리오
 
-따라서 저희 Cloud-Canvas 팀은 국내 클라우드 업체도 지원하는 GUI 기반의 인프라 통합 관리 시스템에 필요성을 느끼게 되었습니다.
+1. 허브 페이지에서 아무 인프라 아키텍처 목록을 클릭한다.
+2. 퍼블릭 인프라 아키텍처 상세 페이지로 이동하고 임포트 버튼을 클릭한다.
+3. 임포트가 완료되면 캔버스 페이지로 리다이렉트 하고 임포트 되어 해당 아키텍처가 캔버스로 그려진 것을 확인한다.
+4. 마이페이지로 들어가서, 임포트한 퍼블릭 인프라 아키텍처가 임포트 목록에 추가된 것을 확인한다.
 
-## 📌 프로젝트 소개
+<div align="center">
 
-Cloud-Canvas는 이러한 문제점을 해결하기 위한 GUI 기반 인프라 관리 도구입니다.
+## 🚀 기술 스택
 
-## 📌 프로젝트 기대 효과
+### 💻 Common
 
--   기존 AWS 사용자들의 국내 클라우드 생태계 유입 촉진
--   국내 클라우드 서비스 활성화
--   한국 클라우드 산업의 경쟁력 강화
+<p>
+    <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black" alt="JavaScript"/>
+    <img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript"/>
+    <img src="https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=black" alt="Prettier"/>
+    <img src="https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white" alt="ESLint"/>
+    <img src="https://img.shields.io/badge/PNPM-F69220?style=for-the-badge&logo=pnpm&logoColor=white" alt="PNPM"/>
+    <img src="https://img.shields.io/badge/TSUP-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TSUP"/>
+</p>
 
-## 📌 프로젝트 목표
+### 🖥️ Frontend
 
--   직관적인 UX/UI를 통한 인프라 설계 기능 제공
--   실시간 모니터링을 통한 효율적인 인프라 관리 기능 제공
--   국내외 클라우드 업체 통합 관리 기능 제공
--   NPM 모듈을 통해 제공함으로써, 자바스크립트 개발자들에게 친화적인 도구를 제작
--   Infra Hub를 통해 사용자가 자신이 설계한 인프라를 전 세계 사람들과 공유할 수 있도록 함
+<p>
+    <img src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white" alt="Next.js"/>
+    <img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black" alt="React"/>
+    <img src="https://img.shields.io/badge/Tailwind%20CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white" alt="Tailwind CSS"/>
+    <img src="https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white" alt="Vite"/>
+    <img src="https://img.shields.io/badge/TanStack%20Query-FF4154?style=for-the-badge&logo=reactquery&logoColor=white" alt="TanStack Query"/>
+</p>
 
-## 📌 아키텍쳐
+### 🔧 Backend
 
-### 전반적인 인프라
+<p>
+    <img src="https://img.shields.io/badge/NestJS-E0234E?style=for-the-badge&logo=nestjs&logoColor=white" alt="NestJS"/>
+    <img src="https://img.shields.io/badge/MySQL-4479A1?style=for-the-badge&logo=mysql&logoColor=white" alt="MySQL"/>
+    <img src="https://img.shields.io/badge/Redis-DC382D?style=for-the-badge&logo=redis&logoColor=white" alt="Redis"/>
+    <img src="https://img.shields.io/badge/Prisma-2D3748?style=for-the-badge&logo=prisma&logoColor=white" alt="Prisma"/>
+    <img src="https://img.shields.io/badge/Vitest-6E9F18?style=for-the-badge&logo=vitest&logoColor=white" alt="Vitest"/>
+</p>
 
-![image](https://github.com/user-attachments/assets/5901b688-0d3d-4698-ad22-a4d4bb7aa8fd)
+### 🌐 Infrastructure
 
-### CI/CD
+<p>
+    <img src="https://img.shields.io/badge/Turborepo-000000?style=for-the-badge&logo=turborepo&logoColor=white" alt="Turborepo"/>
+    <img src="https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white" alt="Docker"/>
+    <img src="https://img.shields.io/badge/Docker_Compose-2496ED?style=for-the-badge&logo=docker&logoColor=white" alt="Docker Compose"/>
+    <img src="https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&logo=githubactions&logoColor=white" alt="GitHub Actions"/>
+    <img src="https://img.shields.io/badge/Naver_Cloud-03C75A?style=for-the-badge&logo=naver&logoColor=white" alt="Naver Cloud"/>
+    <img src="https://img.shields.io/badge/Nginx-009639?style=for-the-badge&logo=nginx&logoColor=white" alt="Nginx"/>
+</p>
 
-<img width="1024" alt="cicd" src="https://github.com/user-attachments/assets/286d7d2d-bb6a-4315-bcff-4a6ea7569077">
+### 🔍 DevOps & Monitoring
 
-# 팀
+<p>
+    <img src="https://img.shields.io/badge/Terraform-7B42BC?style=for-the-badge&logo=terraform&logoColor=white" alt="Terraform"/>
+    <img src="https://img.shields.io/badge/Terraform%20Cloud-7B42BC?style=for-the-badge&logo=terraform&logoColor=white" alt="Terraform Cloud"/>
+    <img src="https://img.shields.io/badge/Elasticsearch-005571?style=for-the-badge&logo=elasticsearch&logoColor=white" alt="Elasticsearch"/>
+    <img src="https://img.shields.io/badge/FluentD-0E83C8?style=for-the-badge&logo=fluentd&logoColor=white" alt="FluentD"/>
+    <img src="https://img.shields.io/badge/Kibana-005571?style=for-the-badge&logo=kibana&logoColor=white" alt="Kibana"/>
+    <img src="https://img.shields.io/badge/Grafana-F46800?style=for-the-badge&logo=grafana&logoColor=white" alt="Grafana"/>
+    <img src="https://img.shields.io/badge/Prometheus-E6522C?style=for-the-badge&logo=prometheus&logoColor=white" alt="Prometheus"/>
+</p>
 
-|                           김범준                           |                          고동민                           |                          최재영                           |                          서건혁                           |
+### 💬 Communication Tools
+
+<p>
+    <img src="https://img.shields.io/badge/Slack-4A154B?style=for-the-badge&logo=slack&logoColor=white" alt="Slack"/>
+    <img src="https://img.shields.io/badge/Zoom-2D8CFF?style=for-the-badge&logo=zoom&logoColor=white" alt="Zoom"/>
+    <img src="https://img.shields.io/badge/Gather_Town-6E5494?style=for-the-badge&logo=googlemeet&logoColor=white" alt="Gather Town"/>
+    <img src="https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white" alt="Figma"/>
+</p>
+
+</div>
+
+---
+
+## **아키텍처** 🌐
+
+### **인프라 설계**
+
+![image](https://github.com/user-attachments/assets/e8bd555e-ae84-4989-a520-800a61b3da54)
+
+![image](https://github.com/user-attachments/assets/b18b1048-5fe8-43ee-a33f-8fbe2b38e873)
+
+### **애플리케이션 설계**
+
+![image](https://github.com/user-attachments/assets/04145d8b-61b0-401a-8943-7494a0f9aed5)
+
+## 우리의 Next!
+
+## 🌈 **함께하세요!**
+
+> **Cloud Canvas로 클라우드 설계의 새로운 가능성을 경험해보세요!**  
+> 프로젝트의 진행 상황과 더 많은 정보를 원하신다면 [GitHub Wiki](https://github.com/boostcampwm-2024/web37-cloud-canvas/wiki)에서 확인하세요. 😊
+
+## **팀 소개** 👩‍💻
+
+> 다양한 배경과 경험을 가진 네 명의 팀원이 Cloud Canvas를 만들고 있습니다.
+
+|                         **김범준**                         |                        **고동민**                         |                        **최재영**                         |                        **서건혁**                         |
 | :--------------------------------------------------------: | :-------------------------------------------------------: | :-------------------------------------------------------: | :-------------------------------------------------------: |
-|                             FE                             |                            BE                             |                            BE                             |                            BE                             |
+|                           **FE**                           |                          **BE**                           |                          **BE**                           |                          **BE**                           |
 |             [p1n9](https://github.com/p1n9d3v)             |           [Gdm0714](https://github.com/Gdm0714)           |           [paulcjy](https://github.com/paulcjy)           |       [SeoGeonhyuk](https://github.com/SeoGeonhyuk)       |
 | ![](https://avatars.githubusercontent.com/u/152015839?v=4) | ![](https://avatars.githubusercontent.com/u/50660440?v=4) | ![](https://avatars.githubusercontent.com/u/86853786?v=4) | ![](https://avatars.githubusercontent.com/u/60954160?v=4) |
 |                            커피                            |                            빵                             |                           고기                            |                           국수                            |
+
+---
diff --git a/apps/client/.env.development b/apps/client/.env.development
@@ -0,0 +1,2 @@
+VITE_API_URL=http://localhost:3000
+VITE_MODE=dev
diff --git a/apps/client/.env.production b/apps/client/.env.production
@@ -0,0 +1,2 @@
+VITE_API_URL=https://api.cloudcanvas.kro.kr
+VITE_MODE=prod
diff --git a/apps/client/Dockerfile b/apps/client/Dockerfile
@@ -1,19 +1,35 @@
-FROM node:20 AS development
-WORKDIR /development
-COPY ./pnpm-lock.yaml ./apps/client/package.json  .
-RUN npm install -g pnpm && pnpm install
+# FROM node:20 AS development
+# WORKDIR /development
+# COPY ./pnpm-lock.yaml ./apps/client/package.json  .
+# RUN npm install -g pnpm && pnpm install
+
+# FROM node:20 AS build
+# WORKDIR /build
+# RUN mkdir -p /build/apps/client
+# RUN mkdir -p /build/config
+# COPY --from=development /development/node_modules/ /build/apps/client/node_modules
+# COPY --from=development /development/pnpm-lock.yaml /build/apps/client/
+# RUN npm install -g pnpm typescript
+# COPY ./config/ /build/config/
+# COPY ./apps/client/ /build/apps/client/
+# WORKDIR /build/apps/client
+# RUN npm run build && rm -rf node_modules && pnpm install --frozen-lockfile --prod
+
+# FROM nginx:alpine AS production
+# COPY --from=build /build/apps/client/dist /usr/share/nginx/html
+# COPY ./apps/nginx/nginx.conf /etc/nginx/conf.d/default.conf
+
+# ENV PORT=5000
+# EXPOSE 5000
+# CMD ["nginx", "-g", "daemon off;"]
 
 FROM node:20 AS build
+
 WORKDIR /build
-RUN mkdir -p /build/apps/client
-RUN mkdir -p /build/config
-COPY --from=development /development/node_modules/ /build/apps/client/node_modules
-COPY --from=development /development/pnpm-lock.yaml /build/apps/client/
-RUN npm install -g pnpm typescript
-COPY ./config/ /build/config/
-COPY ./apps/client/ /build/apps/client/
-WORKDIR /build/apps/client
-RUN npm run build && rm -rf node_modules && pnpm install --frozen-lockfile --prod
+
+COPY . .
+
+RUN npm install -g pnpm && pnpm install && pnpm build
 
 FROM nginx:alpine AS production
 COPY --from=build /build/apps/client/dist /usr/share/nginx/html
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		VITE_API_URL=http://localhost:3000
		VITE_MODE=dev
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		VITE_API_URL=https://api.cloudcanvas.kro.kr
		VITE_MODE=prod