[hostinger 배포가이드] Google AI Studio 코드를 Hostinger에 배포하는 완벽 프로세스 (Vite + React)

Google AI Studio에서 멋진 AI 기능을 구현했다면, 이제 이를 실제 사용자가 접속할 수 있는 웹사이트로 배포할 차례입니다. 하지만 AI Studio에서 받은 샘플 코드를 그대로 올리면 작동하지 않는 경우가 많습니다. 따라서 구글 AI Studio에서 만든 코드를 “Vite 프로젝트 → 빌드 → dist 폴더 업로드” 흐름으로 한 번 정리해야 합니다.

지금부터 Vite 프로젝트 생성부터 Hostinger hPanel 업로드까지, 브라우저에서 바로 돌아가는 웹사이트를 만드는 8단계 실전 가이드를 정리해 드립니다.

---

1. 배포 전 상황 정리: 왜 빌드가 필요한가?

AI Studio에서 제공하는 코드는 샘플 프로젝트 형태입니다. Hostinger와 같은 웹 호스팅 서버는 HTML, CSS, JavaScript와 같은 정적 파일을 기반으로 작동하기 때문에, 우리가 작성한 코드를 서버가 이해할 수 있는 형태로 변환하는 과정이 반드시 필요합니다.

2. 로컬 환경에 Vite 프로젝트 준비하기

가장 먼저 내 컴퓨터(로컬)에 최신 웹 개발 도구인 Vite 환경을 구축해야 합니다.

• 프로젝트 생성: 터미널에서 아래 명령어를 입력하여 새 프로젝트를 만듭니다.                              예:  npm create vite@latest my-gemini-app

• 코드 이식: AI Studio에서 작성한 컴포넌트와 API 호출 로직을 src 폴더 아래로 옮깁니다.

• npm create vite@latest my-gemini-app
• ai.studio 코드(컴포넌트, API 호출 코드)를 src 아래로 정리.
• React/Vanilla 등 선택 후 프로젝트 폴더로 이동

• 의존성 설치: Gemini SDK를 사용한다면 관련 패키지를 설치해야 합니다.

• npm install @google/generative-ai와 같은 패키지를 추가

3. 보안을 위한 .env 환경변수 설정

Gemini API 키는 소스 코드에 직접 노출되면 위험합니다. Vite의 규칙에 따라 환경변수를 설정하세요.

• 파일 생성: 프로젝트 루트에 .env 파일을 만듭니다.

• 내용 작성: VITE_GEMINI_API_KEY=본인의_API_키

• 코드 적용: 코드 내에서 호출할 때는 import.meta.env.VITE_GEMINI_API_KEY 형식을 사용합니다. VITE_ 프리픽스가 있어야만 클라이언트 쪽으로 키가 안전하게 전달됩니다.

• 코드에서 사용 예:
• const apiKey = import.meta.env.VITE_GEMINI_API_KEY;

4. 배포용 파일 생성,빌드(disc 폴더만들기):npm run build

준비가 끝났다면 이제 서버에 올릴 최종 결과물을 만들 차례입니다.

• 명령어 실행: 터미널에 npm run build를 입력합니다.

• dist 폴더 탄생: 실행이 완료되면 루트 디렉토리에 dist 폴더가 생깁니다. 이 안에는 HTML, JS, CSS가 모두 압축(Bundle)된 '배포용 파일'들이 들어있습니다.

---

5. Hostinger hPanel 업로드 실전

이제 생성된 dist 폴더의 내용물을 Hostinger 서버에 옮길 단계입니다.

• 파일 관리자 진입: Hostinger hPanel 접속 후 해당 도메인을 선택한 후  File Manager로 들어갑니다.

• 경로 확인: 반드시 public_html 폴더 안으로, 또는 해당사이트의 루트 디렉토리로 이동합니다.

• 업로드 주의사항: dist 폴더 자체를 올리는 것이 아니라, dist 폴더 안의 내용물만 모두 선택해서 업로드해야 합니다. 대개 모두선택, zip으로 압축한뒤 파일매니저에서 업로드, 압축해제합니다.

  • 올바른 경로 예시: public_html/index.html, public_html/assets/...

6. Node.js Web App 기능을 활용한 배포 (선택 사항)

만약 수동 업로드가 번거롭다면 Hostinger의 Node.js Web App 기능을 쓸 수도 있습니다.

• 설정 방법: hPanel에서 Node.js Apps 메뉴 진입 후 Front-End Application 타입을 선택합니다.

• 프로젝트 전체를 zip으로 업로드.
• hPanel → Node.js Apps → Front-End Application 선택.
• ​“File Upload” 방식으로 업로드한 프로젝트 선택.
• 빌드 명령에 npm install && npm run build를 지정하고, output directory는 dist로 설정.

• 자동 빌드: 프로젝트 전체 ZIP을 올린 뒤 빌드 명령에 npm install && npm run build를 지정하고, 출력 디렉토리를 dist로 설정하면 Hostinger가 직접 빌드를 수행합니다.

6번 방식 (Node.js Web App) vs 8번 방식 (수동 업로드) 비교

구분	6번 방식 (Hostinger 자동 빌드)	8번 방식 (로컬 빌드 후 수동 업로드)
핵심 차이	Hostinger 서버가 빌드를 수행	내 컴퓨터에서 빌드 후 결과물만 전달
업로드 파일	프로젝트 전체 소스 코드 (용량 큼)	dist 폴더 내부 파일만 (용량 매우 작음)
편의성	빌드 명령만 설정하면 자동 처리됨	매번 빌드 후 파일을 직접 올려야 함
장점	개발 흐름이 깔끔하고 관리가 편함	서버 리소스를 안 쓰고 속도가 빠름

7. 보안 및 운영 팁: API 키 노출 주의

Vite 정적 호스팅 방식은 편리하지만, Gemini API 키가 클라이언트 코드에 포함된다는 특징이 있습니다.

• 권장 사항: 구글 클라우드 콘솔에서 API 키 사용량 제한 및 도메인 제한 설정을 반드시 걸어두세요.

• 고급 보안: 완전한 비공개가 필요하다면 추후 Node.js 서버나 Cloud Functions를 중간에 두는 백엔드 구조로 확장하는 것을 추천합니다.

---

8. 지금 바로 시작해보세요!

지금 단계에서 바로 실행하실 수 있는 요약 순서입니다:

1. 로컬에 Vite 프로젝트 생성 및 코드 정리

2. .env 파일에 API 키 설정, 구체적으로  VITE_GEMINI_API_KEY=... 설정.

3. npm run build로 dist 폴더 생성

4. Hostinger File Manager에서 public_html에 dist 안의 파일들을 업로드:: Hostinger public_html에 파일 업로드 및 확인

아트 온 톡 프로젝트가 성공적으로 웹에 게시되기를 응원합니다! 진행 중 막히는 부분이 있다면 언제든 댓글로 질문해 주세요.

이 포스팅은 쿠팡 파트너스 활동으로, 블로그제작에 도움을 제공합니다.