Google AI Studio 웹사이트 Hostinger에 배포하기
채널: Metics Media (Caleb) 영상 길이: 13분 원본 제목: How to Deploy Google AI Studio Websites Correctly - Step by Step
요약
Google-AI-Studio로 만든 웹사이트를 Hostinger Node.js 관리형 앱으로 배포하는 전체 단계를 시연. GitHub를 중간 저장소로 활용하며, Gemini API 키를 환경변수로 주입해 AI 기능이 배포 후에도 작동하도록 구성하는 방법을 다룬다.
핵심 아이디어
- Google AI Studio 웹사이트는 Node.js 환경이 필요해 일반 정적 호스팅(GitHub Pages 등)으로는 AI 기능이 동작하지 않음
- Hostinger 비즈니스 플랜이 AI Studio 배포에 권장되는 이유: 5개 관리형 Node.js 앱 + GitHub 직접 연동 + 도메인 자동 등록
- GitHub 리포지토리가 AI Studio ↔ Hostinger 간 자동 동기화의 허브 역할
- Vite 프레임워크 프리셋을 선택하지 않으면 배포 실패 가능성 있음
- AI 기능(챗봇, 이미지 생성 등) 작동에 API 키 환경변수가 필수
- 같은 API 키를 3가지 변수명으로 등록하는 “방어적 접근”으로 템플릿 호환성 보장
- 배포 후 빈 흰 화면 문제는 Hostinger 문제가 아닌 프로젝트 내부 설정 오류
- AI Studio에서 변경 → GitHub commit → Hostinger 자동 재배포(몇 분 내)
배포 워크플로우 (단계별)
1단계: GitHub 연결 (AI Studio)
- AI Studio 우상단 gear 아이콘 클릭
- 화살표로 이동 → GitHub 선택 → GitHub 로그인
- 리포지토리 이름·설명 입력, visibility = private
- Create GitHub repository → Stage and commit all changes
2단계: Hostinger 설정
- 비즈니스 플랜 선택 (5개 Node.js 관리형 앱 포함)
- 온보딩: Node.js web app 선택
- 도메인 입력 (첫 해 무료)
- Connect with GitHub → 리포지토리 선택
- 프레임워크 프리셋: Vite 선택 (중요!)
3단계: 환경변수 (API 키) 등록
같은 Gemini API 키를 3가지 이름으로 등록:
GEMINI_API_KEY = <api_key>
GOOGLE_API_KEY = <api_key>
VITE_GEMINI_API_KEY = <api_key>
API 키 위치: AI Studio 대시보드 → API keys
4단계: 배포 및 검증
- Deploy 클릭 → 1~2분 대기
- 배포 완료 후 링크 클릭으로 라이브 사이트 확인
- 빈 흰 화면 발생 시: AI Studio에서 제공된 프롬프트 입력해 config 수정 → commit
5단계: 변경사항 업데이트
- AI Studio에서 변경 (예: 색상 팔레트 수정)
- Gear → GitHub → Stage and commit all changes
- 몇 분 후 Hostinger 자동 재배포 완료
주요 사실
- Hostinger 비즈니스 플랜: Node.js 관리형 앱 5개 포함
- 12개월 플랜: 도메인 1년 무료 + 비용 절감
- 배포 후 자동 동기화 지연: 몇 분 이내
- 브라우저 탭 기본 제목도 AI Studio에서 변경 가능 (commit 필요)
- Hostinger 대시보드: 배포 현황, 런타임 로그, 환경변수, 도메인 설정, 보안 설정 포함
트러블슈팅
| 문제 | 원인 | 해결 |
|---|---|---|
| 배포 후 빈 흰 화면 | 프로젝트 내부 config 오류 | [[wiki/entities/Google-AI-Studio |
| AI 기능 작동 안 함 | API 키 환경변수 누락 | 3가지 변수명으로 Gemini API 키 등록 |
| Vite 빌드 실패 | 프레임워크 프리셋 미선택 | Hostinger에서 Vite 프리셋 명시 선택 |