📝 Introduction

ROLL IT!
큰 종이 한편에 당신의 마음을 전달해보세요

URL: www.rollit5.link

Medium: Medium

---

📹 Demo

자세히 보기(여기를 눌러주세요)

Main	Register & Login
시작화면 페이지 입니다.	이메일과 비밀번호 닉네임을 통해 회원가입을 진행하고 로그인할 수 있습니다.

Make Rolling	Add Memo
제목을 입력하고 다섯가지 테마중에 하나를 선택해 롤링페이퍼를 생성합니다.	여러가지 옵션을 통해 메모지를 생성하고 위치와 함께 저장합니다.

Cancel Memo	Add Memo
메모지를 생성하고 위치를 저장하기 전 취소할 수 있습니다. (메모, 스티커, 사진 동일한 기능을 가지고 있습니다.)	스티커를 선택하고 위치를 저장할 수 있습니다.

Add Photo	Add Photo (with filter)
사진을 선택하고 위치와 크기 각도를 저장합니다.	필터를 입힌 사진을 선택하고 위치와 크기 각도를 저장합니다.

Rolling Paper (Admin)	Delete Component
상단에 마이페이지 버튼이 있고 생성된 메모, 스티커, 사진을 삭제할 수 있습니다.	관리자로 접속했을시 Component를 삭제할 수 있습니다.

Rolling Paper (Guest)	Mypage
상단에 마이페이지 버튼이 없습니다 메모, 스티커, 사진을 생성만 할 수 있습니다	마이페이지에서 생성된 롤링페이퍼의 목록을 배경사진, 제목, 생성일자와 함께 보여줍니다.

카카오톡 공유하기

---

카카오톡 공유하기 버튼을 통해
외부로 링크를 공유할 수 있습니다.

---

💻 System Architechture

---

💡 Tech stack

분야	사용 기술
Fronted
Backend
DevOps
Monitoring
etc

---

💽 ERD

• https://www.erdcloud.com/d/ZQmQaTRBR39Hu2MJu

---

📚 API

swagger

---

📈 Monitoring

Grafana + Prometheus, ELK

Django	Node exporter

cAdvisor	ELK

🎯 Detailed Info

NAME	Port	Description
Nginx	80	가벼움과 높은 성능을 목표로 하는 웹서버로 서버로서의 역활과 프록시로서의 역할을 수행합니다
React(on Nginx)	80	사용자들이 메모, 사진, 스티커를 저장하고서버로부터 사용자들이 저장한 메모, 사진, 스티커를 가져와 보여주는 역할을 합니다
Django + Gunicorn	8080	Rollit의 서버, 모든 내용의 중심에 위치하며, Database와의 소통을 담당합니다.
Mysql	3307	Database
RabbitMQ	5672	요청에 대한 처리 시간이 길 때 사용합니다. openCV로 사진을 변환하는 과정이 길어 사용했습니다.
Celery	-	비동기 작업을 위해 사용합니다. 분산 메시지 전달을 기반으로 동작하는 비동기 작업 큐 입니다.
Grafana	3001	Django, cAdvisor, Prometheus, NodeExporter를 통해 전달받은 시간별 메트릭 데이터를 시각화 하여 대시보드로 제공해 줍니다
cAdvisor	8081	사용중인 도커 컨테이너의 리소스 사용량을 측정하여 시계열 메트릭을 데이터화합니다.
Prometheus	9090	Django의 메트릭 데이터와 cAdvisor, NodeExporter의 시계열 메트릭 데이터를 수집하여 시스템 모니터링을 합니다
Node Exporter	9100	서버의 cpu, 메모리, 디스크, 네트워크 사용량등 호스트 과련 메트릭 데이터를 수집하여 api로 노출시킵니다.
Filebeat	-	Nginx의 로그파일을 Filebeat로 수집합니다.
Logstash	5044, 9600, 50000	Filebeat가 수집한 로그를 Logstash에 전달합니다.
Elasticsearch	9200, 9300	Logstash로부터 전달 받은 로그를 Elasticsearch에 저장합니다.
Kibana	5061	Elasticsearch에 저장된 로그를 Kibana를 통해 분석합니다.

---

🚀 How to Start

$ git clone --recursive https://github.com/SVTeamK-ROLLIT/docker.git
$ cd fronted
$ yarn 

env setting

• backend/backend/.env

SECRET_KEY={DJANGO_SECERT_KEY}
DEBUG=TRUE
DATABASE_URL={DATABASE_URL}

AWS_ACCESS_KEY_ID={AWS_ACCESS_KEY_ID}
AWS_SECRET_ACCESS_KEY={AWS_SECRET_ACCESS_KEY}
AWS_REGION={AWS_REGION}
BUCKET_NAME={BUCKET_NAME}

EMAIL_ADDR={EMAIL_ADDR}
EMAIL_PASSWORD={EMAIL_PASSWORD}

• backend/db/db.env

MYSQL_DATABASE={DATABASE_NAME}
MYSQL_ROOT_USER={DATABASE_USER}
MYSQL_ROOT_PASSWORD={DATABASE_PASSWORD}

• frontend/.env

REACT_APP_BACKEND_URL={BACKEND_URL}

Run Docker

$docker compose -f docker-compose.prod.yaml -f docker-compose.elk.yaml up --build

---

👨‍👩‍👧‍👧 Team: It's 5K

5명의 K팀이 모였다는 뜻입니다.

Name	정윤호	김민석	김상원	라예진	이준희
Profile
role	Team Leader Frontend, Backend, DevOps	Frontend, UI/UX , DevOps	Backend , DevOps	Bakcend , DevOps	Frontend, UI/UX
GitHub	@yunhobb	@minseok1015	@Doncham	@Haaein	@junvhui

---