Make your World를 통해 여러분이 원하는 새로운 이야기를 소설로 만들어보세요!
by Team-A (ChaG.P.T) (2023.06 ~ 2023.08)
http://www.techeer-team-a.store/
클릭하시면 영상을 볼 수 있습니다.
준비물
- OpenAI secret key (발급받으러 가기(비용이 발생할 수 있음))
- AWS S3 Bucket (만들러 가기(비용이 발생할 수 있음))
- Docker를 시스템에 설치합니다.
- 아래의 shell 명령문을 똑같이 따라 칩니다.
$ git clone https://github.com/2023SVBootcamp-Team-A/project.git- docker-compose.yml 파일과 .env 파일을 알맞은 위치에 작성합니다.
- .docker-compose.yml
version: "3"
services:
frontend:
container_name: frontend
build:
context: ./frontend
dockerfile: Dockerfile.dev
ports:
- 5173:5173
stdin_open: true
volumes:
- ./frontend/:/frontend
- /frontend/node_modules
tty: true
environment:
- NODE_ENV=development
- CHOKIDAR_USEPOLLING=true
db:
image: postgres
environment:
- POSTGRES_USER=myuser
- POSTGRES_PASSWORD=mypassword
- POSTGRES_DB=mydatabase
pgadmin:
image: dpage/pgadmin4
environment:
- [email protected]
- PGADMIN_DEFAULT_PASSWORD=password
ports:
- "8080:80"
web:
build:
context: ./backend
dockerfile: Dockerfile
volumes:
- ./backend:/backend/
ports:
- "8000:8000"
depends_on:
- db
container_name: backend
environment:
- DJANGO_DEBUG=True
- /.env (docker-compose.yml 파일과 같은 디렉토리)
DEBUG=True
GF_USER=team-a
GF_PASSWORD=team-a
- /backend/config/.env
OPENAI_SECRET_KEY=(여기에 OpenAI secret key 입력)
DEBUG=True
DB_ENGINE=django.db.backends.postgresql
DB_NAME=mydatabase
DB_USER=myuser
DB_PASSWORD=mypassword
DB_HOST=db
DB_PORT=5432
AWS_ACCESS_KEY_ID=(여기에 AWS access key id 입력)
AWS_SECRET_ACCESS_KEY=(여기에 AWS secret access key 입력)
AWS_STORAGE_BUCKET_NAME=(여기에 AWS S3 Bucket name 입력)
AWS_S3_REGION_NAME=(여기에 AWS region name 입력)
AWS_S3_ENDPOINT_URL=(여기에 AWS S3 endpoint URL 입력)
AWS_S3_DOWNLOAD_URL=(여기에 AWS S3 download URL 입력)
SECRET_KEY=django-insecure-
CORS_ORIGIN_WHITELIST=http://127.0.0.1:5173,http://13.125.48.224:5173,http://frontend:5173,http://13.125.48.224,http://www.techeer-team-a.store,http://www.techeer-team-a.store:5173,http://localhost:5173
ALLOWED_HOSTS=backend,13.125.48.224,www.techeer-team-a.store,techeer-team-a.store,localhost,127.0.0.1
- 아래의 shell 명령문을 똑같이 따라 칩니다.
$ cd project
$ docker compose up -d --build- Docker Desktop에서 Docker Container들이 잘 실행되고 있는지 확인합니다.
- Docker Desktop에서 backend container를 선택한 다음, django secret key를 확인합니다. (확인 방법)
- 확인한 django secret key를 .env 파일에 추가합니다.
- /backend/config/.env
OPENAI_SECRET_KEY=(여기에 OpenAI secret key 입력)
DEBUG=True
DB_ENGINE=django.db.backends.postgresql
DB_NAME=mydatabase
DB_USER=myuser
DB_PASSWORD=mypassword
DB_HOST=db
DB_PORT=5432
AWS_ACCESS_KEY_ID=(여기에 AWS access key id 입력)
AWS_SECRET_ACCESS_KEY=(여기에 AWS secret access key 입력)
AWS_STORAGE_BUCKET_NAME=(여기에 AWS S3 Bucket name 입력)
AWS_S3_REGION_NAME=(여기에 AWS region name 입력)
AWS_S3_ENDPOINT_URL=(여기에 AWS S3 endpoint URL 입력)
AWS_S3_DOWNLOAD_URL=(여기에 AWS S3 download URL 입력)
SECRET_KEY=django-insecure-(여기에 django secret key 입력)
CORS_ORIGIN_WHITELIST=http://127.0.0.1:5173,http://13.125.48.224:5173,http://frontend:5173,http://13.125.48.224,http://www.techeer-team-a.store,http://www.techeer-team-a.store:5173,http://localhost:5173
ALLOWED_HOSTS=backend,13.125.48.224,www.techeer-team-a.store,techeer-team-a.store,localhost,127.0.0.1
- 아래의 shell 명령문을 똑같이 따라 칩니다.
$ docker compose up -d --build- Docker Desktop에서 Docker Container들이 잘 실행되고 있는지 한 번 더 확인합니다.
- 그 상태에서 'localhost:5173'에 접속하면 사용할 수 있습니다. 재밌는 시간 되길 바랍니다!
만들 소설의 장르, 공간적 배경, 시대적 배경, 등장인물, 줄거리를 원하는 대로 선택하는 기능을 제공합니다.
기본 제공되는 선택지 외에도 사용자가 원하는 장르, 공간, 시대를 자유롭게 추가할 수 있습니다.
진행과 선택을 반복하는 방식으로 사용자가 원하는 스토리의 소설을 만듭니다. 제공되는 선택지 중 하나를 선택해서 계속 진행하거나, 원하는 시점에 진행을 종료하고 결과 페이지로 이동할 수 있습니다.
사용자 본인 뿐만이 아닌, 모든 사용자가 작성한 전체 소설 목록 또한 책장 형태의 UI로 확인할 수 있습니다. 페이지네이션을 적용하여 페이지별로 둘러볼 수 있으며, 마찬가지로 책 모양을 클릭하면 해당 소설의 완성된 내용을 확인할 수 있습니다.
| Area | Tech Stack |
|---|---|
| Frontend |        |
| Backend |      |
| AI |   |
| DevOps |      |
| Monitoring |       |
| etc |         |
React 프레임워크를 사용함으로서 SPA(Single Page Application) 형식의 페이지를 만들었으며, 로딩 지연 없이 변화된 콘텐츠만을 표시하는 방법으로로 사용자 경험을 향상시켰습니다.
또한 정적 타입 언어인 TypeScript를 사용함으로서 컴파일 단계에서 에러를 빠르게 확인하고, 오류를 검색하는 시간을 줄이는 이점을 확보할 수 있었습니다.
또한 번들러로 ESModule 기반의 Vite를 사용하여 전체를 번들링하지 않고도 서버를 실행함으로서 개발 서버의 실행 속도를 향상시켰습니다.
Tailwind CSS를 사용함으로서 HTML 상에서 클래스명을 설정하는 것만으로 미리 정의된 스타일을 적용할 수 있습니다.
덕분에 네이밍 규칙을 통일하고 구조를 문서화하는 시간과 반응형 레이아웃 설정에 들이는 노력을 덜 수 있었으며, 일부 컴포넌트의 경우 별도의 CSS 파일 없이 스타일링을 적용할 수 있었습니다.
프론트엔드 에러 모니터링 및 트래킹 툴인 Sentry를 사용하여 에러를 추적할 수 있게 하였습니다.
에러의 종류, 발생 위치 등에 대한 정보를 제공하므로 원인을 찾는 데 들이는 시간을 덜 수 있으며, 에러 발생 즉시 메일 알림을 받아 빠르게 확인할 수 있습니다.
Grafana + Prometheus, ELK
| Django | Node exporter |
|---|---|
 |
 |
| cAdvisor | ELK |
|---|---|
 |
 |
- Django에서 Prometheus를 통해 request,response에 대한 정보를 수집을 한 후 Grafana를 통해 시각화 하였습니다.
- Slack과 Grafana를 연동하여 설정한 CPU 사용량 범위를 벗어날 경우 Slack에 경고 알림이 오도록 구현하였습니다.
- CAdvisor를 활용해 각 컨테이너의 cpu, memory사용량등을 알수 있게 하였고, 컨테이너별 네트워크 사용량을 알 수 있게하였습니다.
- node exporter를 통해 서버의 메모리, cpu 사용량, network traffic 등을 알 수 있게 하였습니다.
- ELK 스택을 활용하여 nginx log를 모니터링하고, 시간대, 사이트별 응답코드, 응답코드 비율등을 모니터링 할 수 있게 설계하였습니다.
Github Actions를 통해 CI/CD 파이프라인을 구축하여 코드 변경사항을 서버에 원할하게 반영할 수 있게 하였습니다.
| Name | 김연진 | 강석규 | 김하은 |
|---|---|---|---|
| Profile |  |
 |
 |
| Role | Team Leader Frontend, DevOps |
Frontend, DevOps |
Frontend |
| GitHub | @homebdy | @AlgeMoya | @HaeunKim01 |
| Name | 이승욱 | 이택 | 임형찬 | 채영진 |
|---|---|---|---|---|
| Profile |  |
 |
 |
 |
| Role | Backend, DevOps |
Backend | Frontend | Backend |
| GitHub | @josephuk77 | @LeeTaek2T | @V2LLAIN | @youngjin516 |