Claude Code 프로젝트를 Hostinger에 안전하게 배포하기

GitHub로 로그인하기

VS Code Sign In Continue with GitHub

저장소 만들기

GitHub New Repository

알아보기 쉬운 저장소 이름 정하기 Private 선택하기 README, license, .gitignore는 체크하지 않기 저장소 만들기 HTTPS URL 복사하기

로컬에서 간단히 테스트하기

Node.js 다운로드하기

npm을 쓸 수 없을 때만 Node.js를 설치합니다.

https://nodejs.org/en

npm install

npm run dev

로컬 URL을 열고 프로젝트가 제대로 작동하는지 확인합니다.

안전하게 공개하는 프롬프트 사용하기

Git 다운로드하기

Git이 없을 때만 설치합니다.

https://git-scm.com/

안전한 GitHub 푸시 프롬프트

아래에 GitHub 저장소 URL을 입력한 뒤, 맞춤 설정된 프롬프트를 Claude Code에서 사용합니다.

I already created an empty GitHub repository. GitHub repository URL: {{GITHUB_REPOSITORY_URL}} Please prepare and push this local project to that GitHub repository. Rules: - Do not change the app code, UI, design, routes, database logic, backend logic, Supabase logic, or functionality. - Only handle Git and GitHub publishing. - Check Git status, branch, remotes, .gitignore, and tracked files first. - Make sure .env and .env.local are not committed. - Make sure generated files like node_modules, dist, dist-ssr, *.tsbuildinfo, .DS_Store, and log files are ignored. - If unnecessary files are already tracked, remove them from Git tracking only. Do not delete real project files. - Use main for a new repository, unless an existing branch should be preserved. - Connect this project to the GitHub repository URL. - Create a clean commit if needed. - Push the project to GitHub. If the push fails, diagnose and fix only the Git/GitHub setup. Do not change app functionality. Before any destructive action, explain what you found and what you plan to do.

GitHub 저장소 URL

https://github.com/username/repository-name.git

Hostinger 열기

Hostinger 열기

이 단계를 위한 호스팅 설정을 시작합니다.

RECOMMENDED

https://www.hostg.xyz/SHJTL

Node.js 웹 앱 만들기

Hostinger Websites Add Website Node.js Web App

GitHub 저장소 가져오기

필요하면 환경 변수 추가하기

프로젝트에 어떤 환경 변수가 필요한지 Claude Code에 물어본 뒤, 그 값만 Hostinger에 추가하세요.

이 튜토리얼에서 사용하는 Supabase 변수

VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY

VITE_SUPABASE_URL

프로젝트 URL

VITE_SUPABASE_ANON_KEY

anon(공개) 키

이 값들은 Supabase에서 확인하세요

API 설정 열기

https://supabase.com/dashboard/project/_/settings/api

공개된 사이트 열기

주요 페이지를 확인하고 온라인에서도 프로젝트 기능이 제대로 작동하는지 확인합니다.

앞으로의 업데이트 게시하기

Claude Code로 변경하기 로컬에서 변경 사항 테스트하기 Source Control에서 파일 검토하기 짧은 메시지로 커밋하기 변경 사항을 GitHub에 동기화하기

Hostinger가 최신 버전을 자동으로 다시 배포합니다.

원하지 않는 로컬 변경 사항 버리기

VS Code Source Control Modified File Discard Changes

VS Code Source Control More Actions Changes Discard All Changes

이 옵션은 커밋하거나 동기화하기 전에만 사용하세요.