Google AI Studio 사이트와 웹 앱 배포하기

Google AI Studio를 GitHub에 연결하기

이미 만든 사이트나 웹 앱을 여세요.

Google AI Studio 열기

https://aistudio.google.com

Your app in Google AI Studio Settings GitHub

처음이라면 「Sign in to GitHub to continue」 클릭하기 안내가 나오면 「Install & Authorize」 클릭하기

Settings는 오른쪽 위의 톱니바퀴 아이콘입니다. 이미 GitHub에 연결되어 있다면 다음 작업으로 넘어가세요.

GitHub 계정 만들기

Only if you don't have one yet.

https://github.com/signup

저장소를 만들고 저장하기

저장소는 GitHub에 있는 프로젝트 폴더입니다. Hostinger는 여기서 프로젝트를 읽어 옵니다.

「Create new repository」 클릭하기 저장소 이름 입력하기. 설명은 선택 사항입니다 Private 선택하기 「Create GitHub repository」 클릭하기 「Push changes to GitHub」 클릭하기 상태에 「GitHub & Google AI Studio are currently in sync」가 표시될 때까지 기다리기

이 메시지가 보이면 프로젝트가 저장된 것입니다.

Hostinger 호스팅 시작하기

웹 앱이 포함된 Hostinger 플랜이 필요합니다. 이미 있다면 계정을 열고 다음 단계로 넘어가세요.

Hostinger 웹 앱 호스팅 시작하기

Node.js 웹 앱이 포함된 플랜을 선택하세요.

USED IN TUTORIAL

Web App 만들고 프로젝트 가져오기

Hostinger Websites Create website Web App

도메인 선택하기. 처음에는 임시 도메인도 괜찮습니다 Import your Git repository 선택하기 Continue with GitHub을 선택하고, 요청되면 Hostinger 승인하기 1단계에서 저장한 저장소 선택하기

Hostinger에서는 이 항목들이 양식 대신 어시스턴트의 질문으로 표시될 수 있습니다. 선택할 내용은 같습니다.

빌드 설정 확인하기

Hostinger가 프로젝트의 빌드 설정을 자동으로 감지합니다. 선택된 프레임워크를 확인하고, 모두 맞으면 계속 진행하세요.

빌드 설정이 확실하지 않나요?

선택 사항입니다. Google AI Studio 프로젝트에 붙여 넣고, 그 답변을 Hostinger가 선택한 내용과 비교하세요. 파일을 읽기만 합니다.

Check this project's deployment settings for Hostinger. This is a read-only check. I am deploying this project to Hostinger as a Web App, imported from GitHub. Hostinger has already suggested build settings, and I want to confirm them against the real project. Inspect the actual project files: package.json, the lockfile, the build configuration and any server file. Do not guess from the preview or from how the app looks. Rules: - Do NOT change, create or delete any file. - Do NOT print the value of any API key or secret. Keep two things separate: - FRONTEND TOOLING: what builds the pages, for example Vite. - SERVER RUNTIME: whether a Node.js server must keep running in production, for example an Express server that serves the app or calls an API. If the project has a Node.js server that must keep running, the Hostinger framework preset should match that server, even when the pages are built with Vite. If there is no server, the preset should match the frontend build tool. Reply in this short format, as plain text and not JSON: Framework preset to choose in Hostinger: Needs a running Node.js backend: Yes or No, with a one-line reason Root directory: only if the app is not at the repository root Package manager: Build command: or "none needed" Server entry file: or "none" Node.js version: only if the project states one, otherwise "not specified" Mismatch to fix: anything that would break on Hostinger, or "none found" If you cannot verify a line from the files, write "not sure" instead of guessing.

환경 변수 추가하기

표시된 변수가 없나요? 이 단계는 건너뛰세요.

Hostinger가 감지한 환경 변수 확인하기 프로젝트에 필요한 값 입력하기 Continue 클릭하기

Google AI Studio에 저장한 시크릿은 Hostinger로 복사되지 않으므로 여기서 다시 입력하세요. 프로젝트에서 Gemini API를 사용한다면 이 페이지에서 키를 만드세요:

Google AI Studio 열기

API keys page

https://aistudio.google.com/apikey

중요

API 키는 Hostinger에만 입력하세요. VITE_로 시작하는 변수에 비공개 키를 넣지 말고, 실제 키가 들어 있는 .env 파일을 GitHub에 올리지 마세요.

프로젝트에 필요한 변수를 모르겠다면

프로젝트에 필요한 변수 찾기

Google AI Studio 프로젝트에 붙여 넣으세요. 코드가 실제로 읽는 변수 이름을 정리하며, 아무것도 바꾸지 않습니다.

List the environment variables this project needs on Hostinger. This is a read-only check. Search the real source code for process.env and import.meta.env, and read any example environment file. Do not guess and do not invent names. Rules: - Do NOT change, create or delete any file. - Report variable NAMES only. Never print a value. - Do not suggest several names for the same key. Report the one name the code reads. For each variable, give one line: NAME, what it is for, Required or Optional, read on the SERVER or in BROWSER code Do not list variables the hosting platform normally sets by itself, such as NODE_ENV or PORT, unless the code cannot work without a value I must enter. Then add one last line: Private key exposed in browser code: Yes or No Answer Yes if a private key, such as a Gemini API key, is read through a VITE_ variable or otherwise ends up in code that runs in the browser.

비공개 키를 브라우저 코드에서 옮기기

위의 확인 결과 비공개 키가 브라우저 코드에 노출되어 있다고 나올 때만 사용하세요. VITE_로 시작하는 변수는 누구나 읽을 수 있는 페이지에 포함됩니다.

A private API key in this project is read in browser code. Move it to the server so visitors can never see it. First confirm it from the real files: show me the file and line where browser code reads the key, without printing the key's value. If you cannot find one, stop and tell me. Do not change anything. If it is confirmed, make the smallest change that fixes it, and keep the design and every feature exactly as they are: - Call the API from a server route. Use the Node.js server the project already has. Add a minimal one only if there is none. - Read the key on the server from an environment variable that does NOT start with VITE_. - Make the browser code call my own server route instead of the API directly. - Remove the key from every file that is sent to the browser. Rules: - Never print the key's value. - Do not add a .env file with real keys to the repository. - Do not change unrelated code. When you finish, tell me: - the files you changed - the exact variable name to add in Hostinger - whether the project now needs a running Node.js server, so I can check the framework Hostinger selected

배포하기

최종 구성 확인하기 Deploy 클릭하기 빌드가 끝날 때까지 기다리기 공개된 사이트 열기

빌드가 실패하면

Hostinger에 표시된 오류를 복사해 이 프롬프트에 붙여 넣고, Google AI Studio 프로젝트에서 실행하세요. 그런 다음 수정 사항을 GitHub에 저장하거나, Hostinger에서 설정을 바꾸고 다시 배포하세요.

실패한 배포 고치기

오류에서 실제 원인을 찾아 그 부분만 고칩니다.

My project failed to deploy on Hostinger. I deployed it as a Web App imported from GitHub. Here is the exact error from Hostinger's build log: [PASTE THE ERROR HERE] Here is what Hostinger selected: Framework: [PASTE IT HERE] Other build settings, if you can see them: [PASTE THEM HERE, OR DELETE THIS LINE] Find the real cause from this error and the actual project files: package.json, the build configuration and any server file. Do not try random changes, and do not invent a cause the error and the files do not support. If the error is not enough to be sure, tell me what else to copy from Hostinger. - If a Hostinger setting is wrong, tell me exactly which setting to change and to what. Do not change code for that. - If the code or configuration is wrong, fix only that. Keep the design and features the same. - Do not upgrade unrelated packages. - If the log contains a key or password, do not repeat it. Never print the value of an API key or secret. Reply with: Cause: What you changed, or which Hostinger setting to change: What I should do next:

공개된 사이트 테스트하기

공개된 사이트를 열고 페이지와 주요 기능이 잘 작동하는지 확인하세요.

프로젝트에 AI 기능, 로그인, 연결된 서비스가 있다면 그것도 시험해 보세요.

공개된 사이트에서 무언가 작동하지 않으면

문제에 맞는 프롬프트를 복사해 Google AI Studio 프로젝트에서 실행하세요. 그런 다음 수정 사항을 GitHub에 저장하세요.

빈 페이지 또는 흰 화면 고치기

빌드는 끝났지만 공개된 사이트에 빈 페이지가 표시됩니다.

My project deployed to Hostinger without a build error, but the live website shows a blank page. It works in the Google AI Studio preview. Find what is different in production. Check the real project files for: - errors that only happen in the production build - asset and script paths that break outside the preview, including the base path in the build configuration - a server that does not serve the built files, or serves them from the wrong folder - a server that listens on a fixed port instead of the port the hosting gives it - code that needs an environment variable which is missing in production If I paste errors from the browser console below, start from them: [PASTE ANY BROWSER CONSOLE ERRORS HERE, OR DELETE THIS LINE] Base the fix on what you find in the files and the errors, not on guesses. If you cannot tell the cause, say what else I should copy for you. Keep the design and features exactly the same, and never print the value of an API key or secret. Reply with: Cause: What you changed, or which Hostinger setting to change: What I should do next:

AI 기능, 로그인 등 기능 고치기

사이트는 열리지만 어떤 기능이 작동하지 않습니다.

My project is live on Hostinger and the pages load, but this feature does not work: [DESCRIBE THE FEATURE AND WHAT HAPPENS] Any error message I can see: [PASTE IT HERE, OR DELETE THIS LINE] It works in the Google AI Studio preview. Find why it fails in production. Check the real project files for: - the environment variables this feature reads. List their NAMES so I can confirm each one has a value in Hostinger - code that depends on Google AI Studio's own environment or secrets and has no equivalent on Hostinger - API calls that need a running Node.js server, in case the project was deployed without one - addresses that point to the preview or to localhost instead of the live domain - for sign-in or outside services: settings that must list my live domain Never ask me for the value of an API key or secret, and never print one. Never move a private key into browser code or into a VITE_ variable to make the feature work. Do not invent a cause the files and the error do not support. Keep the design and other features the same. Reply with: Cause: What you changed, or what I must set in Hostinger or in the outside service: What I should do next:

내부 페이지의 404 고치기

홈페이지는 작동하지만 다른 페이지를 열거나 새로 고치면 404가 표시됩니다.

My project is live on Hostinger. The home page works, but opening or refreshing an inner page shows a 404 page. Inspect how this project handles routes: the router in the frontend, and the server file if there is one. - If the project runs its own Node.js server, make that server return the app's main page for routes the frontend router handles, without breaking API routes or static files. - If the project has no server, do not add one. Tell me what the hosting must do for these routes and which Hostinger setting to check. Change only what this problem needs. Keep the design and features the same. Reply with: Cause: What you changed, or which Hostinger setting to change: What I should do next:

웹사이트 업데이트하기

업데이트는 항상 같은 경로를 따릅니다: Google AI Studio → GitHub → Hostinger → 공개된 사이트.

Google AI Studio에서 작은 변경하기 Settings를 연 다음 GitHub 열기 「Push changes to GitHub」 클릭하기 프로젝트가 동기화될 때까지 기다리기 Hostinger가 업데이트를 배포할 때까지 기다리기 공개된 사이트를 새로 고치고 변경 사항 확인하기

GitHub 저장소가 연결되어 있고 Web App의 자동 배포가 켜져 있으면 Hostinger가 업데이트를 알아서 배포합니다.