자세히 보기(여기를 눌러주세요)
| 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 |
|---|---|
 |
 |
| 상단에 마이페이지 버튼이 없습니다 메모, 스티커, 사진을 생성만 할 수 있습니다 | 마이페이지에서 생성된 롤링페이퍼의 목록을 배경사진, 제목, 생성일자와 함께 보여줍니다. |
| 분야 | 사용 기술 |
|---|---|
| Fronted |      |
| Backend |         |
| DevOps |     |
| Monitoring |      |
| etc |        |
Grafana + Prometheus, ELK
| Django | Node exporter |
|---|---|
 |
 |
| cAdvisor | ELK |
|---|---|
 |
 |
| 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를 통해 분석합니다. |
$ git clone --recursive https://github.com/SVTeamK-ROLLIT/docker.git
$ cd fronted
$ yarn
- 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}
$docker compose -f docker-compose.prod.yaml -f docker-compose.elk.yaml up --build
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 |
