22. Cloudflare로 앱 배포하기

Cloudflare 란?

• Cloudflare는 클라우드 컴퓨팅 서비스 제공 업체로, CDN(콘텐츠 전송 네트워크), DDoS 방어, DNS 관리 등 다양한 웹 인프라 서비스를 제공
• OpenAI의 Chatkit 템플릿을 Cloudflare의 Pages 서비스를 이용하여 배포 가능
• Cloudflare 가입 진행

Cloudflare 요금제

• Cloudflare는 무료 요금제를 제공하여 소규모 프로젝트나 개인 개발자에게 적합
• 단, 무료 요금제에는 일부 제한 사항이 있을 수 있으므로, 대규모 트래픽이나 고급 기능이 필요한 경우 유료 요금제 고려 필요
• Cloudflare 요금제 비교

Cloudflare에서 앱 배포하기

1. Cloudflare 대시보드 접속
2. 앱 생성
   • 컴퓨팅(Workers) > Workers 및 Pages > 응용프로그램 생성
   • Pages 선택 > 기존 Git 리포지토리 가져오기
   • Github 계정 연결 > 리포지토리 선택 (openai-chatkit-starter-app)
   • 구성 설정
     • 프로젝트 이름: 본인이 원하는 이름으로 구성 > <프로젝트 이름>.pages.dev 형태로 앱이 배포됨
     • 프로덕션 분기: main
     • 프레임워크 미리 설정: Next.js
       • 빌드 명령: npx @cloudflare/next-on-pages@1
       • 빌드 출력 디렉터리: .vercel/output/static
     • 환경 변수
       • OPENAI_API_KEY: OpenAI API Key 입력
       • NEXT_PUBLIC_CHATKIT_WORKFLOW_ID: Agent-Builder에서 생성한 워크플로우 ID 입력
       • NODE_VERSION: 22
   • 배포 시작
3. 호환성 플래그 수정
   • 배포한 앱 선택 > 설정 > 런타임 > 호환성 플래그 편집
   • nodejs_compat 추가 및 저장
4. 재배포 및 도메인 복사
   • 배포한 앱 선택 > 배포 > 모든 배포
   • 최근 배포 선택 > 배포 다시 시도
   • 재배포가 완료되면 도메인 복사 (<프로젝트 이름>.pages.dev)

허용된 도메인 목록 추가

1. OpenAI Platform 접속
2. Settings > Organization > Security > Domain allowlist
3. • Add domain 클릭후 위에서 복사한 도메인 추가 및 저장
4. 도메인으로 접속하여 앱이 정상적으로 접속 되는지 확인

템플릿 수정

1. Github 리포지토리 접속
2. 구성 파일 수정
   1. lib/config.ts 파일 수정
      • GREETING: 앱에서 처음 보여줄 인사말
      • STARTER_PROMPTS: 앱에서 제공할 시작 템플릿
      • getThemeConfig: 앱의 테마 설정
   2. app/layout.tsx 파일 수정
      • metadata
        • title: 앱의 제목
        • description: 앱의 설명
   3. app/favicon.ico 파일 수정
      • 앱의 파비콘 이미지로 교체
      • https://favicon.io 등에서 무료로 파비콘 생성 가능
3. 레포지토리가 수정되면 Cloudflare에서 자동으로 재배포됨
4. 재배포가 완료되면 도메인으로 접속하여 앱이 정상적으로 수정 되었는지 확인

실행된 웹 앱 화면