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 Webアプリを作成する

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

これらの操作は、コミットや同期を行う前にのみ使ってください。