【完全版】Google AI Studioで生成したWebアプリをHostingerで公開する方法：独自ドメイン接続まで

Deployment Guide

AIで作ったWebサイトを
Hostingerで世界へ公開する

Google AI Studioのコードを製品レベルで運用するために。ビルドから独自ドメイン接続までの「ラストワンマイル」を埋める技術ガイドです。

🎥 今回の参考動画はこちら ▼

Table of Contents

1. なぜAI生成アプリをHostingerで運用するのか？

こんにちは、AIアーキテクトのOKIHIROです。Google AI Studioを使えば、コードを書かずに高機能なReactアプリを一瞬で生成できるようになりました。しかし、多くの人が直面するのが「作った後、どうやって公開するか？」という問題です。

VercelやNetlifyは手軽ですが、従量課金の予測が難しかったり、複数のクライアント案件を一元管理しにくかったりする場合があります。そこで有力な選択肢となるのがHostingerのような従来型のレンタルサーバー（Shared Hosting）です。

本記事では、Google AI Studioで生成されたReactプロジェクトを「ビルド」し、静的サイトとしてHostingerにデプロイする完全なワークフローを解説します。これにより、低コストかつ固定料金で、AI生成サイトを安定運用することが可能になります。

2. Google AI StudioでのWebサイト作成

まずはデプロイする対象物を作成します。今回はGemini 3 Proを使用し、ニューヨークの不動産仲介業者向けのWebサイト「Skyline」を構築します。

プロンプトの設計

AIに対して、以下のような詳細な要件を伝えます。

ビジネス概要: ニューヨークの不動産ビジネス「Skyline」。オフィスの売買・賃貸に対応。
機能要件: ヒーローセクション、物件カテゴリー、物件リスト、ギャラリー、顧客の声、問い合わせフォーム。
デザイン要件: バイブラントな配色、クリーンなUI、モバイルレスポンシブ対応。

Geminiはこれに基づき、React + TypeScript構成の完全なプロジェクトを生成します。プレビューで動作を確認したら、画面右上のダウンロードボタンからZIPファイルを取得しましょう。

3. 【最重要】ローカル環境でのビルド処理

ここが多くの初学者が躓くポイントです。ダウンロードしたZIPファイルをそのままHostingerにアップロードしても動きません。

Google AI Studioが生成するのは「開発用ソースコード（React/TypeScript）」であり、ブラウザが直接解釈できる「HTML/CSS/JS」ではないからです。サーバーにアップロードする前に、自分のPC上で変換（ビルド）を行う必要があります。

Node.jsの準備

この変換作業には「Node.js」というツールを使います。まだインストールしていない場合は、公式サイトから推奨版（LTS）をインストールしてください。

ビルド手順

1. ダウンロードしたZIPファイルを解凍し、デスクトップなどの分かりやすい場所に置きます。

2. ターミナル（Windowsならコマンドプロンプト）を開き、以下のコマンドでプロジェクトフォルダに移動します。

cd Desktop/フォルダ名

3. 必要なプログラムをインストールします。

npm install

4. 変換（ビルド）を実行します。

npm run build

処理が完了すると、フォルダ内に新しくdistというフォルダが生成されます。この中に入っているファイルこそが、サーバーが理解できる「完成品のWebサイト」です。

4. Hostingerへのアップロードと公開

「完成品」が手に入ったので、いよいよサーバーへ配置します。

ファイルマネージャーでの操作

Hostingerのダッシュボードにログインし、対象のドメイン（または一時ドメイン）の管理画面を開きます。
「File Manager」を起動し、public_htmlフォルダを開きます。
既にあるデフォルトファイル（default.phpなど）はすべて削除し、空にします。
先ほど生成したローカルのdistフォルダの中身全て（assetsフォルダやindex.htmlなど）を、ここにドラッグ＆ドロップでアップロードします。

これで配置は完了です。ブラウザでドメインにアクセスすれば、AIが作成した不動産サイトが完璧に表示されるはずです。

5. 独自ドメインの接続

最後に、一時ドメインではなく、取得済みの独自ドメイン（例: trialweb.shop）でアクセスできるようにします。

Hostingerでドメイン管理も行っている場合、設定は非常にシンプルです。ダッシュボードの「Connect Domain」から対象のドメインを選択するだけで、DNS設定などが自動的に適用されます。

反映には数分から数時間かかる場合がありますが、これであなたのAI生成Webサイトは、世界中どこからでもアクセス可能なプロフェッショナルなサイトとして稼働し始めます。

6. まとめ

Google AI StudioとHostingerを組み合わせることで、開発コストを抑えつつ、保守性の高いWebサイト運用が可能になります。

重要なのは「Reactアプリはビルドしてからアップロードする」という点だけです。このプロセスさえ理解しておけば、AIを活用した受託開発や自社サービスの立ち上げが、より現実的で手堅いものになるでしょう。

Gemini APIと既存のホスティング技術を組み合わせ、ぜひあなたのビジネスを加速させてください🚀

この記事の自動化に使われた技術と思考法は、
すべて私の講座で「思考OS」としてインストールできます。

ツールを「使う側」から、AIを指揮して「創る側」へ。
あなたも自分だけの自動化システムを構築しませんか？