Geminiの出力を
公開リンクにする
Geminiで作ったHTMLページ、Reactプロトタイプ、静的フロントエンド出力をアップロードし、レビューや共有、独自ドメイン公開に使えるHTTPSサイトにします。
静的公開に合うGemini出力
Geminiはフロントエンドコード、アプリのロジック、API例を同じ会話で生成することがあります。DeployPagesはその中の静的フロントエンドを公開する場所です。
HTML ランディングページ
index.htmlと参照されるCSS、JavaScript、画像、フォントをアップロードします。単純な生成ページでは最短の方法です。
Reactプロトタイプ
GeminiがReactコンポーネントやViteプロジェクトを生成した場合は、ビルドして生成された静的出力フォルダをアップロードします。
Gemini APIデモ
フロントエンドは公開できますが、非公開キーが必要なGemini API呼び出しはバックエンドやサーバーレス関数側に置きます。
ドキュメントとプロダクトモック
Geminiを使って作ったドキュメント、プロダクトページ、社内デモ、レビュープロトタイプの静的書き出しを実URLとして共有できます。
Geminiの出力から公開サイトまで
フロントエンドを生成する
静的ページ、プロトタイプ、ランディングページ、Reactの画面を生成し、必要なファイルと依存関係をGeminiに一覧化させます。
公開できる出力に整える
単純なHTMLはそのまま保存し、React / Viteはdistなどの静的フォルダにビルドしてからアップロードします。
アップロードして確認する
静的ファイルをDeployPagesにアップロードし、公開リンクでルート、画像、コンソールエラー、外部API呼び出しを確認します。
Geminiのビルドを公開する前に
生成プロトタイプは完成して見えても、仮文言、壊れた素材、クライアント側の秘密情報が残っていることがあります。
APIキーの扱い
非公開のGemini APIキーやサービス認証情報をブラウザコードに置きません。保護が必要な呼び出しはバックエンドを使います。
ビルド出力
ReactやViteの場合は、生のソースファイルやnode_modulesではなく、生成された出力フォルダを公開します。
素材の確認
架空のファイル名や仮画像を、実ファイルまたは安定した公開URLに置き換えてからアップロードします。
ブラウザ QA
公開サイトをスマートフォンとデスクトップで開き、コンソールエラー、主要リンク、フォームを確認します。
Gemini 生成サイトでよくある問題
プロトタイプがGemini APIキーを必要としている
API呼び出しをバックエンドやサーバーレスのエンドポイントに移します。静的フロントエンドでは非公開APIキーを安全に隠せません。
Reactコードがブラウザでそのまま動かない
依存関係を入れてビルドコマンドを実行し、バンドル後のdist / buildフォルダをアップロードします。
生成された素材が足りない
Geminiに全体のファイルツリーを出させ、参照されている画像、アイコン、スタイルシート、フォントをすべて作成または置き換えます。
フォームやログイン手順が動かない
静的ホスティングはUIを表示できます。送信、認証、データベース、保護された操作はバックエンドサービスが必要です。
Gemini 生成サイト FAQ
複数ファイルの Gemini プロジェクトもアップロードできますか？
はい。Geminiが複数のフロントエンドファイルを生成した場合は、構成を保ったままフォルダ全体をアップロードします。
生成コードにエラーがある場合は？
ローカルで修正するか、Geminiに修正版を作らせてから再度ビルドし、修正済みの出力をアップロードします。最初の出力に固定されるわけではありません。
どのフロントエンド構成を公開できますか？
静的HTML、React、Vue、ブラウザで動く多くのフロントエンド出力は、最終結果が静的ビルドであれば公開できます。
Gemini APIアプリもここで公開できますか？
フロントエンドは公開できます。ただし非公開のGemini API呼び出しはバックエンドやサーバーレスのエンドポイント側に置き、ブラウザコードに非公開キーを出さないようにします。
GeminiがNext.jsアプリを生成した場合は？
サーバー機能が不要なら静的サイトとして書き出し、outディレクトリをアップロードします。SSR、API routes、ミドルウェアはサーバー機能を実行できる環境が必要です。