Google AI StudioのサイトとWebアプリをデプロイする方法
GitHubとHostingerを使って、Google AIで作ったサイトやWebアプリを一つずつデプロイします。 プロジェクトを公開し、きちんと動く状態にするためのシンプルでわかりやすい手順です。
ロードマップと資料
ホスティングプランを選んでサイトを設定する
ホスティングプランを選ぶ
Hostinger Business Plan
動画で紹介しているプランを選び、ガイドを続けてください。
RECOMMENDED
https://www.hostg.xyz/SHJ9N
無料ドメインを受け取る
支払いとアカウント設定を完了する
Empty PHP/HTML Websiteで新しいサイトを作成する
Google AI内でプロジェクトを準備する
Google AIのプロジェクトを開く
Save to GitHubをクリックする
新しいリポジトリを作成する
Add Changesをクリックしてプロジェクト全体をアップロードする
プロジェクトをHostingerに接続する
Hostingerに戻る
Node.js Web Appを選ぶ
Continue with GitHubをクリックする
同じリポジトリを選ぶ
HostingerがViteを自動検出します（変更は不要）
必要なGemini APIキーを追加する
Gemini APIキーを環境変数として追加する
API_KEY GOOGLE_API_KEY GEMINI_API_KEY VITE_GOOGLE_API_KEY VITE_GEMINI_API_KEY
API_KEY
Gemini API キー
GOOGLE_API_KEY
Gemini API キー
GEMINI_API_KEY
Gemini API キー
VITE_GOOGLE_API_KEY
Gemini API キー
VITE_GEMINI_API_KEY
Gemini API キー
このキーは Google AI Studio で取得します
API キーを開く
https://aistudio.google.com/app/apikey
サイトをデプロイして白い画面の問題を直す
Deployをクリックする
ドメインを接続する
真っ白な画面が表示された場合は、Google AIで次のプロンプトを実行します
白い画面を直すプロンプト
デプロイはエラーなく終わるのに、本番では真っ白なページが表示されます…
It deploys without errors, but in production, it renders a blank white page. No console errors appear. The issue occurs on multiple hosting providers, so it is not a hosting problem. Please debug the app and fix the root cause so it renders properly in production, without changing the existing UI.
Save → Stage → GitHubへコミット
Hostingerが更新を自動で再デプロイします
✨ 最終的なワークフロー
最終的なワークフローのまとめ
Google AIがプロジェクトを作成 GitHubが変更を同期 Hostingerがすべて自動でデプロイ Google AIで更新すれば → そのままサイトに即反映