Google AI Studio 사이트와 웹 앱을 배포하는 방법
GitHub와 Hostinger를 사용해 Google AI로 만든 사이트나 웹 앱을 단계별로 배포합니다. 프로젝트를 온라인에 올리고 제대로 작동시키기 위한 간단하고 명확한 안내입니다.
로드맵과 자료
호스팅 플랜 선택하고 사이트 설정하기
호스팅 플랜 선택하기
Hostinger Business Plan
영상에 나온 플랜을 선택한 뒤 가이드를 이어서 진행하세요.
RECOMMENDED
https://www.hostg.xyz/SHJ9N
무료 도메인 받기
결제와 계정 설정 마치기
Empty PHP/HTML Website로 새 사이트 만들기
Google AI 안에서 프로젝트 준비하기
Google AI 프로젝트 열기
Save to GitHub 클릭하기
새 저장소 만들기
Add Changes를 클릭해 프로젝트 전체 업로드하기
프로젝트를 Hostinger에 연결하기
Hostinger로 돌아가기
Node.js Web App 선택하기
Continue with GitHub 클릭하기
같은 저장소 선택하기
Hostinger가 Vite를 자동으로 인식합니다 (변경할 것 없음)
필요한 Gemini API 키 추가하기
Gemini API 키를 환경 변수로 추가하기
API_KEY GOOGLE_API_KEY GEMINI_API_KEY VITE_GOOGLE_API_KEY VITE_GEMINI_API_KEY
API_KEY
Gemini API 키
GOOGLE_API_KEY
Gemini API 키
GEMINI_API_KEY
Gemini API 키
VITE_GOOGLE_API_KEY
Gemini API 키
VITE_GEMINI_API_KEY
Gemini API 키
이 키는 Google AI Studio에서 발급받으세요
API 키 열기
https://aistudio.google.com/app/apikey
사이트를 배포하고 흰 화면 문제 해결하기
Deploy 클릭하기
도메인 연결하기
빈 흰 화면이 나오면 Google AI에서 다음 프롬프트를 실행하세요
흰 화면 해결 프롬프트
배포는 오류 없이 끝나는데, 실제 서비스에서는 빈 흰 페이지가 나옵니다…
It deploys without errors, but in production, it renders a blank white page. No console errors appear. The issue occurs on multiple hosting providers, so it is not a hosting problem. Please debug the app and fix the root cause so it renders properly in production, without changing the existing UI.
Save → Stage → GitHub에 커밋
Hostinger가 업데이트를 자동으로 다시 배포합니다
✨ 최종 워크플로
최종 워크플로 요약
Google AI가 프로젝트를 만들고 GitHub가 변경 내용을 동기화하며 Hostinger가 모든 것을 자동으로 배포합니다 Google AI에서 업데이트하면 → 곧바로 사이트에 반영됩니다