Gemini3のAIで作ったReact Webサイトを、Xserverで公開するまでの全手順

2025年11月22日

大東信仁（ものくろ）

Chat-GPT

Gemini3 凄い

WEBサイトを作ってもらったら、少し手直ししたら使える！と感じました。

一方で、、

Gemini3でReactのコードのWEBサイトを生成してもらったあと、「これをどうやってサーバーにアップロードして公開すればいいの?」と悩みました。

この記事では、Vite + React + Tailwind CSSの環境でプロジェクトを作成し、ビルドして、Xserverなどのレンタルサーバーで公開するまでの手順を、初心者の方にもわかりやすく解説します。

※この記事はmacOS環境での操作を前提としています。

1. プロジェクトの作成とセットアップ

まず、ターミナル(コマンドプロンプト)を開いて、以下のコマンドを実行します。my-web-siteの部分は、自分のプロジェクト名に変更してください。

npm create vite@latest my-web-site -- --template react
cd my-web-site
npm install

これでReactプロジェクトの基本構成ができました。

2. Tailwind CSSのインストールと設定

次に、スタイリングに使うTailwind CSSをインストールします。

【重要】安定版(v3系)を指定してインストールする

現在、Tailwind CSSは新しいバージョン(v4)への移行期なのですが、v4(プレビュー版)が誤ってインストールされると、従来のコマンドが動かなくなることがあります。初心者の方には**「安定版(v3系)」**を使うのが最も安全で確実です。

以下の手順で、バージョンを指定してインストールしましょう。

npm install -D [email protected] postcss autoprefixer
npx tailwindcss init -p

これでtailwind.config.jsとpostcss.config.jsが自動生成されます。

うまくいかない場合の解決手順

もし既にv4がインストールされていて動かない場合は、以下の3つのコマンドを順番に実行してください。

1. 今のうまくいかないファイルを一度削除

npm uninstall tailwindcss postcss autoprefixer

2. 「安定版(バージョン3)」を指定してインストール

npm install -D [email protected] postcss autoprefixer

3. 設定ファイルを作成(今度こそ成功するはずです)

npx tailwindcss init -p

これでtailwind.config.jsが生成されたら、次の手順に進んでください。

tailwind.config.jsの編集

生成されたtailwind.config.jsを開き、以下のように編集してください。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/index.cssへTailwindの読み込みを追加

src/index.cssファイルの先頭に以下の3行を追加します。

@tailwind base;
@tailwind components;
@tailwind utilities;

3. Viteの設定変更(重要!)

vite.config.jsを開き、以下のようにbaseオプションを追加します。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: './',  // ← ここ重要!「/」ではなく「./」にします
})

なぜbase: './'が必要なのか?

デフォルトのbase: '/'のままだと、サーバーのルート直下にアップロードしないとリンク切れが起きます。base: './'にすることで、どのフォルダに配置しても相対パスで正しく動作するようになります。

4. Gemini3で生成されたコードの貼り付け

src/App.jsxファイルを開き、Gemini3などのAIツールで生成してもらったReactコードをすべて貼り付けます。

5. OGPやメタタグの設定(任意)

プロジェクトフォルダ直下にあるindex.htmlを開き、OGP設定やファビコン、言語設定などを追加できます。

<html lang="ja">  <!-- 日本語に設定 -->
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />  <!-- ファビコン設定 -->
  <meta property="og:title" content="サイトタイトル">
  <meta property="og:description" content="ディスクリプション">
  <meta property="og:type" content="website">
  <meta property="og:url" content="URL">
  <meta property="og:image" content="ogp.png">
  <!-- その他のメタタグ -->
</head>

6. カスタムCSSの追加(任意)

追加のスタイル調整が必要な場合は、src/index.cssに直接CSSを書き足します。

たとえば、以下のようなレスポンシブ対応やデザイン調整を加えることができます。

body {
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict; /* 禁則処理を厳格に適用 */
}

@media screen and (min-width: 880px) {
  .font-sans.text-gray-800.antialiased.bg-gray-50 {
    display: flex;
    flex-wrap: wrap;
  }
}

section,
footer {
  width: 100% !important;
}

@media screen and (max-width: 879px) {
  h1.text-3xl.md\:text-5xl.lg\:text-6xl.font-extrabold.leading-tight.mb-8,
  h2 {
    font-size: 24px !important;
  }

  .container.mx-auto.px-6.flex {
    flex-wrap: wrap !important;
    justify-content: center;
  }

  .font-bold.text-xl.md\:text-2xl.tracking-tight.text-gray-900.bg-white\/80.px-2.rounded.md\:bg-transparent {
    background-color: transparent;
    margin-bottom: 10px;
  }
}

7. ビルドとプレビュー確認

準備ができたら、以下のコマンドでビルドします。

npm run build

これを実行すると、プロジェクトフォルダ内に**distフォルダ**が自動生成されます。この中身が「公開用の完成品」です。

ローカルのindex.htmlをChromeで開くと真っ白になる理由

ビルド後のdistフォルダ内のindex.htmlをダブルクリックして直接ブラウザで開くと、画面が真っ白になりますが、ご安心ください。これは正常な動作です。

ReactやViteで作られた最新のWebサイトは、パソコンのフォルダから直接index.htmlをダブルクリックして開いても動きません。ブラウザにはセキュリティ機能があり、インターネット(http/https)経由ではなく、パソコンのファイル(file://)として開くと、プログラム(JavaScript)の読み込みをブロックしてしまうからです。

正しい確認方法:簡易サーバーで確認する

サーバーにアップする前に「本当にちゃんと動くか」確認したい場合は、以下のコマンドを使います。

npm run preview

コマンドを打った後に表示されるURL(例:http://localhost:4173)を、キーボードのCmdキー(WindowsはCtrlキー)を押しながらクリックしてください。これで表示されれば、中身は完璧です。

8. サーバーへのアップロード

Xserverなどのレンタルサーバーにアップロードする際は、distフォルダの中身だけをアップロードします。

アップロード方法は以下のとおりです。

public_html直下に置く場合 → distフォルダの中身をそのままアップロード
サブディレクトリに置く場合(例:public_html/mysite) → 同様にdistの中身をアップロード

重要: srcフォルダやnode_modulesフォルダはサーバーに不要です。アップロードするのはdistの中身だけで大丈夫です。

まとめ

この手順を踏めば、Gemini3などのAIツールで生成したReactコードを、Xserverなどのレンタルサーバーで公開できるようになります。Viteのbase: './'設定とTailwind CSSの安定版指定が鍵となるポイントなので、忘れずに設定しておきましょう。

自分でコードをカスタマイズしたり、OGP設定を加えたりすることで、より完成度の高いWebサイトを公開できます。ぜひ試してみてください。