AI 요약관련 정보

• 리액트 앱을 개발하고 무료로 퍼블리시하는 과정을 Gemini CLI, AWS S3, CloudFront를 활용하여 설명 🚀
• 개발된 앱을 회사 홈페이지에서 누구나 사용할 수 있도록 퍼블리시하는 것이 목표이며, 이를 위해 HTML, 자바스크립트, CSS로 구성된 웹페이지를 아마존 S3에 업로드하고 외부에서 접속 가능하도록 설정 🌐
• Gemini CLI에게 앱을 Docker 이미지로 만들어 AWS에 업로드하는 방법 대신, 비용 효율적인 방법으로 정적 파일을 S3에 업로드하는 방법을 추천받음 💡
• npm run build 명령어를 통해 리액트 앱을 정적 파일로 빌드하고, 생성된 빌드 폴더의 내용물을 S3 버킷에 업로드 📦
• S3 버킷을 생성할 때 글로벌하게 유니크한 이름을 사용해야 하며, 파일 업로드 후 외부에서 접속할 수 있도록 퍼블릭 엑세스 권한을 설정해야 함 🔑
• S3 버킷의 퍼미션 설정을 변경하여 외부 접근을 허용하고, 버킷 정책을 추가하여 보안을 강화 🛡️
• 퍼블리시된 앱의 리그레션 테스팅 과정에서 voice input 기능이 S3 엔드포인트에서 작동하지 않는 문제점을 발견하고, Gemini CLI에게 해결 방법을 문의 🎤
• Gemini CLI는 웹 스피치 API와 같은 브라우저의 민감한 기능은 HTTPS 연결에서만 작동하도록 설계되어 있다고 답변하며, AWS CloudFront를 사용하여 HTTPS를 구성할 것을 제안 🔑
• CloudFront를 설정할 때 US-East-1 리전의 인증서를 사용해야 하며, 비용 절감을 위해 'Do not enable security protections' 옵션을 선택 💸
• CloudFront 설정을 완료한 후, 배포된 도메인 네임으로 접속하여 voice input 기능이 정상적으로 작동하는 것을 확인 ✅
• S3는 기본적으로 HTTP만 제공하므로, HTTPS를 지원하기 위해 CloudFront를 설정해야 함 ☁️
• 라이브 코딩 방송을 통해 앱을 퍼블리시하고 문제점을 해결하는 과정을 공유하며, 시청자들의 참여를 유도 🧑‍💻