DB설계까지 완료되었으니, 이제 실제 사용할 언어를 고민해야 한다.
일단 python을 자주 써서 python은 백엔드로 쓰긴 할거다.
프레임워크의 경우 flask는 이전에 만능그림봇 만들때 사용해봤으니,
EC2 서버에 django를 배포하는 방식을 도전해볼까 한다.
주요 기능은 회원가입과 로그인, EXIF 추출과 DB 연동이다.
프론트앤드는 react를 사용할것같고, Vercel 을 사용해 자동 배포할 예정이다.
머신러닝의 경우 이미지를 전달해서 이미지를 분석해 캡션을 추출 한 뒤,
openai에 API를 요청해서 결과값을 화면에 뿌려주는 역할까지 생각하고 있다.
만능그림봇과 다른 점은 일단 회원기능과 블로그나 SNS형태의 UI를 만드는 것까지 고려할 생각이다.
1. 프로젝트 구조
- 백엔드: Python Django
- 회원가입/로그인 기능
- EXIF 데이터 추출 및 데이터베이스 연동
- REST API 제공 (Django REST Framework)
- EC2에 배포
- 프론트엔드: React
- 사용자 UI 구성
- 결과 화면 출력
- Vercel로 배포
2. 주요 기능
- 회원가입 및 로그인
- Django 기본 auth 시스템 활용
- REST API를 통해 프론트엔드와 통신
- 이미지 EXIF 데이터 추출
- Python 라이브러리 활용 (Pillow 또는 exifread)
- 데이터를 Django ORM과 연결하여 저장
- 이미지 분석 및 캡션 생성
- 머신러닝 모델 또는 OpenAI API 사용
- 분석 결과를 React에서 보기 좋게 출력
- 블로그/SNS 형태의 UI
- React로 동적이고 반응형 UI 설계
- 사용자 피드, 게시물 형태의 결과 출력
3. 작업 단계
- 백엔드: Django
- Django 설치 및 프로젝트 설정
- 회원가입/로그인 API 개발
- EXIF 추출 및 데이터 저장 로직 구현
- Django REST Framework를 이용한 REST API 구축
- 프론트엔드: React
- React 앱 생성
- Django API와 연동 (Axios 또는 Fetch API 사용)
- OpenAI API를 사용해 결과 출력
- 블로그/SNS 스타일의 컴포넌트 설계
- 배포
- Django:
- EC2 서버에 Django 배포 (Gunicorn + Nginx 설정)
- React:
- Vercel에 React 배포
- Django API를 React와 연동
- Django:
4. 추가 고려 사항
- 환경 변수 관리: OpenAI API 키 및 데이터베이스 비밀번호는 .env 파일로 관리
- EC2 보안 그룹 설정: API와 React가 안전하게 통신할 수 있도록 HTTPS 설정
- React와 Django 연동: CORS 설정을 통해 서로 통신 가능하게 구성
일단 맨처음으로 프론트앤드,백앤드,머신러닝 세개의 폴더를 만들어서 관리할 예정이다.
각 서버들의 필요한 라이브러리 설치 후 기동되는지 까지 확인할것이다.
일단 첫번째로 가상환경을 만들고, 가상환경으로 진입 후 필요한 라이브러리를 설치해 준다.
pip install django
python -m django --version
설치가 잘 되었다면 버전확인 명령어 입력 시 버전확인이 가능하다.
django-admin startproject backend .
이후 위 명령어로 프로젝트 초기화를 진행하면 아래 이미지처럼 manage.py와 backend 디렉토리가 생성된다.
생성까지 완료되면 바로 django서버를 기동할 수 있는 상태가 된다.
python manage.py runserver
127.0.0.1:8000 번으로 접속하라고 친절하게 콘솔창에 출력이 된다.
접속해보면 개발환경의 로컬 jango서버를 간단하게 띄워볼 수 있다.
이 후 깃허브에 레파지토리 연동 후 푸쉬까지 진행했다.
이제 리액트 차롄데 예전에 한차례 한 적이 있으므로 스킵하겠다.
만들었긴 했는데, ML의 경우는 생각해보니 백앤드에서 함께 처리해도 나쁘지 않겠다 싶어서 일단 Back에서 같이 만들면서 테스트를 진행할 예정이다.
기본적인 세팅 및 기동, Git 에 연동까지 완료했으니 이제부터 실제 개발을 진행할예정이다.