광고 수익을 창출할 웹사이트 만들어보기 4-1(중간점검)

어느 기술을 사용했고 구현프로세스는 어떻게 되는지 정리하는겸 작성하는 글이다.

내가 보기위해 작성한 글이다.

---

만능그림봇 프로젝트 사용 기술 (수정 및 보완)

사용 기술

1. Flask: 백엔드 프레임워크로 사용, RESTful API 구현.
2. Gunicorn: Flask 애플리케이션의 배포를 위한 WSGI 서버.
3. Nginx: 리버스 프록시 설정 및 HTTPS 인증서 적용.
4. Certbot: Let's Encrypt 인증서를 통해 HTTPS 설정.
5. OpenAI API: ChatGPT 및 DALL·E를 사용하여 프롬프트 번역 및 이미지 생성.
6. Stable Diffusion: 이미지 생성 모델을 테스트했으나 최종적으로 OpenAI DALL·E로 대체.
7. Flask-CORS: CORS 설정을 통해 프론트엔드와 백엔드 간 통신 허용.
8. .env 파일: 민감한 정보(API 키, 환경 변수) 관리를 위한 환경 변수 파일.
9. Python-dotenv: .env 파일을 Flask 애플리케이션에서 로드.
10. Vercel: React 기반 프론트엔드 배포 플랫폼.
11. AWS EC2: Flask 서버 호스팅.
12. DNS 설정: 가비아에서 도메인을 구입하고 EC2 서버에 연결.
13. React.js: 프론트엔드 구현에 사용, 사용자 인터페이스(UI) 작성.
14. CSS: React 컴포넌트 스타일링.
15. Git 및 GitHub: 버전 관리와 협업을 위한 사용.
16. 로그 관리: Gunicorn의 로그를 날짜별로 관리.
17. Postman: API 테스트를 위한 도구로 사용.

---

Emoji-gen 구현 순서 (자세히 보완)

1. 기본 프로젝트 설정

1. Flask로 기본 REST API 서버 구현.
2. /generate 엔드포인트 작성:
   • 사용자로부터 받은 프롬프트를 번역.
   • 번역된 프롬프트로 OpenAI DALL·E API에 이미지 생성 요청.
   • 생성된 이미지 URL 반환.
3. 초기에는 Stable Diffusion을 사용하려 했으나, 설치 및 사용의 복잡성으로 OpenAI API로 대체.
4. API 키와 같은 민감한 정보를 .env 파일로 관리.

---

2. React 프론트엔드

1. React로 사용자 인터페이스(UI) 작성:
   • 한글 프롬프트를 입력받는 폼 구성.
   • 결과로 받은 이미지 URL을 표시하는 화면 구현.
   • 결과 이미지 KaKao 공유하기 기능 구현.
2. CSS로 스타일링:
   • 사용자 친화적인 디자인으로 UI 개선.
   • 반응형 레이아웃 적용.
3. Vercel에 배포:
   • React 애플리케이션을 Vercel 플랫폼에 배포.
   • 환경 변수(CORS_ORIGIN 등)를 Vercel 대시보드에서 설정.

---

3. Vercel과 Flask 간 통신

1. Flask 서버에서 CORS 설정:
   • flask-cors 라이브러리를 사용.
   • /generate 엔드포인트만 허용하도록 환경 변수 기반 CORS 설정.
2. Vercel 프론트엔드에서 Flask 서버와 통신:
   • 환경 변수로 Flask 서버 URL을 설정.
   • Axios 또는 fetch를 사용해 /generate 엔드포인트 호출.

---

4. AWS EC2 서버 설정

1. Amazon Linux 2 기반 EC2 인스턴스 생성.
2. Flask 서버를 EC2에 배포하고 0.0.0.0:5000으로 노출.
3. EC2 보안 그룹에서 HTTP/HTTPS 포트(80, 443) 열기.

---

5. 도메인 연결 및 HTTPS 설정

1. 가비아에서 도메인 구입(예: imoji-gen.site).
2. DNS에서 A 레코드로 EC2 퍼블릭 IP 연결.
3. Certbot으로 Let's Encrypt 인증서 발급.
4. Nginx 설정 파일에서 HTTPS 리디렉션 구현.

---

6. Gunicorn을 통한 배포

1. Gunicorn 설치 및 설정:
   • gunicorn app:app 명령으로 Flask 앱 실행.
   • 백그라운드 실행을 위한 Bash 스크립트 작성.
2. Gunicorn 로그 관리:
   • 날짜별로 로깅 설정.
   • Flask 앱의 오류 및 요청 로그를 기록.

---

7. 구현 로직 설명

1. 사용자가 프론트엔드에서 프롬프트 입력:
   • React UI를 통해 사용자로부터 프롬프트 입력.
2. CORS를 통해 Flask 서버에 요청:
   • 입력된 프롬프트를 Flask 서버의 /generate로 POST 요청.
3. 프롬프트 번역:
   • ChatGPT API를 사용해 한글 프롬프트를 영어로 번역.
4. 이미지 생성 요청:
   • 번역된 프롬프트를 기반으로 OpenAI DALL·E API를 호출해 이미지 생성.
5. React UI로 이미지 표시:
   • 생성된 이미지 URL을 React로 반환해 사용자에게 표시.

---

8. Git 및 GitHub

1. Git으로 코드 버전 관리.
2. 주요 변경사항 커밋:
   • 예) "fix: 환경 변수 적용 및 CORS 설정 개선"
   • 예) "feat: OpenAI API를 통한 프롬프트 번역 및 이미지 생성 구현"
3. GitHub에 소스 코드 저장.

---

Stable Diffusion 관련 내용

1. 로컬에서 Stable Diffusion 설치 및 테스트.
2. 프롬프트를 입력받아 이미지를 생성하려 했으나 PC사양 상 설치 및 사용이 불가하여 OpenAI API로 대체.
3. Stable Diffusion은 학습 목적으로만 사용.

---

결과

• 현재 이미지 생성 및 카카오톡 공유하기 서비스를 사용할 수 있음.
• HTTPS 기반의 보안 통신 적용.
• 한글 입력 → 영어 번역 → 이미지 생성 과정을 사용자에게 제공.