株式会社グラディートでは一緒に働く仲間を募集しています
弊社エンジニアによる技術ブログです！
はじめに
前編では、Flutterエンジニアである私が、Gemini 3.0とペアプログラミングを行いながら React 19 + Tailwind CSS でモダンなWebサイトを構築する過程をお届けしました。
しかし、ローカル環境（localhost）で動いているだけでは、Webサイトとは言えません。
後編となる今回は、このサイトを本番環境へデプロイし、さらに Studioやレンタルサーバーの契約を解除して、維持費を極限まで下げる（ほぼ0円にする） 手順を解説します。
今回のミッション
1. Firebase Hosting へデプロイする（Vite特有の落とし穴を回避）。
2. Xserver で管理している独自ドメインを接続する。
3. DNS設定 を変更し、レンタルサーバー契約だけを解約できる状態にする。
4. SPA特有の SEO/OGP問題を解決する。
1. Firebase Hosting へのデプロイ
ホスティング先には Firebase Hosting を選びました。
個人開発レベルの規模（月間通信量10GB以下）であれば、Sparkプラン（無料） の範囲内で十分に運用でき、SSL（HTTPS）も自動で付いてくるためです。
また、Flutterの個人開発でもFirebaseを利用していたこともあり、馴染みもあったのでFirebaseを使用することに決めました。
プロジェクトの作成と初期化
Firebaseコンソールでプロジェクトを作成します。
Firebaseプロジェクトの作成方法については、検索すれば手順を分かりやすく紹介してくれている記事があるので、わからない方は調べてみてください。
プロジェクトが作成できたら、ローカルのターミナルで初期化コマンドを実行します。
firebase init hosting
firebase init hosting
ここで、Viteユーザー（特にReact初心者）が必ずと言っていいほどハマる**「落とし穴」**があります。
【重要】Viteの公開ディレクトリは dist
初期化コマンドの対話モードで、以下のように設定する必要があります。
firebase.json が以下のようになっていれば正解です。
firebase.json
{
"hosting": {
"public": "dist", // ← ここを確認！
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
{
"hosting": {
"public": "dist", // ← ここを確認！
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
ビルドとデプロイ
設定が完了したら、本番用ファイルを生成してアップロードします。
# 1. ビルド (TypeScript -> JS変換、バンドルなど)
npm run build
# 2. デプロイ
firebase deploy
# 1. ビルド (TypeScript -> JS変換、バンドルなど)
npm run build
# 2. デプロイ
firebase deploy
これで https://my-project.web.app というURLが発行され、世界中からアクセスできるようになりました。
ここまでそんなに難しいこともないので、初心者の方にもありがたいですね。
2. 独自ドメインの完全移行（Xserver × Firebase）
ここからが本記事のハイライトです。
元々 Studio（＋Xserverレンタルサーバー）で運用していたドメインを、「ドメイン契約はXserverに残したまま、参照先だけをFirebaseに変える」 設定を行います。
一件、難しそうにも感じますし、設定箇所もよくわからないワードが出てきたりしますが、やることはそこまで難しくないので順に丁寧に進めていけばOKです。
Step 1: FirebaseでIPアドレスを取得
Firebaseコンソールの「Hosting」＞「カスタムドメインを追加」から、自分のドメイン（例: mysite.com）を入力します。
すると、「Aレコードに追加すべきIPアドレス」 が表示されるので、これをコピーします。
Step 2: Xserverのネームサーバー変更（最大の山場）
Xserverサーバーも契約していたケースです。サーバーは未契約でドメインのみ契約している場合にはこの作業は不要です。
ここが最も重要です。
将来的に「Xserverレンタルサーバー」を解約してもドメイン設定を維持できるように、管理権限をサーバーからドメイン管理機能へ移します。
1. Xserverのアカウント画面（サーバーパネルではない方）へログイン。
2. 対象ドメインの「ドメイン管理」を選択。
3. 「ネームサーバー設定」 を開く。
4. 「Xserverレンタルサーバー」から 「Xserverドメイン（標準ネームサーバー）」 に変更して確定。
※ これを行った瞬間から、旧サイト（Studio）へのアクセスが不安定になりますが、移行作業なので正常な挙動です。
Step 3: DNSレコードの書き換え
ネームサーバーを変更したら、同じ画面内にある 「DNSレコード設定」 が編集できるようになります。
1. 既存のWeb用レコード（種別AやCNAMEで、StudioやXserverに向いているもの）を削除。
※メールを使っている場合は、MXレコードなどを消さないように注意！
2. FirebaseのIPアドレス をAレコードとして追加。
Step 4: 「Site Not Found」との戦い
設定直後、ブラウザでアクセスすると 「Site Not Found」 というFirebaseのエラー画面が出ることがあります。
これには焦りましたが、原因は以下のいずれかです。
1. 反映待ち: DNSの浸透に時間がかかっている（数分〜数時間）。
2. Firebase側の設定漏れ: コンソールで「カスタムドメイン」を追加し忘れている。
私の場合は、待っている間にブラウザのキャッシュをクリア（スーパーリロード）することで無事に表示されました。
大体1時間もあれば反映されていることがほとんどだと思います。それでも確認できない場合は、他の原因を探してみましょう。
3. SPAにおけるSEO・OGP「二段構え」戦略
WebサイトをReact（SPA）にした際、弱点となるのが 「SNSでシェアされた時のOGP（サムネイル画像など）が表示されない問題」 です。
X (Twitter) や LINE のクローラーは、JavaScriptを実行せずにHTMLだけを見に来ることがあるためです。
本格的なSEO対策まではしなくとも、OGP画像くらいは設定しておきたいなと思いました。
そこで、以下の「二段構え」で対策しました。
① 静的対策：index.html に直書き（保険）
public/index.html の <head> 内に、サイトのデフォルト情報を直接書いておきます。
これでどんなクローラーが来ても最低限のカードは表示されるはず。
<head>
<meta property="og:title" content="サイトタイトル" />
<meta property="og:description" content="サイトの説明文..." />
<meta property="og:image" content="https://mysite.com/ogp.png" />
<meta name="twitter:card" content="summary_large_image" />
</head>
<head>
<meta property="og:title" content="サイトタイトル" />
<meta property="og:description" content="サイトの説明文..." />
<meta property="og:image" content="https://mysite.com/ogp.png" />
<meta name="twitter:card" content="summary_large_image" />
</head>
② 動的対策：React 19 Metadata（本命）
前編で実装した Seo コンポーネントにより、ブラウザで閲覧する人間に対しては、ページ遷移ごとに正しいタイトルが表示されます。
【重要】画像の配置場所
OGP画像などの静的アセットは、src/assets ではなくpublicフォルダ直下 に置きました。
・src/assets: ビルド時にハッシュ化され ogp-a1b2c.png のように名前が変わる（外部から指定しにくい）。
・public: https://mysite.com/ogp.png という固定URLでアクセスできる。
OGP設定では「絶対パス（https://〜）」での記述が推奨されるため、public フォルダへの配置が必須でした。
ここまでの設定で、LINEなどでURLを共有したいときにOGP画像が無事に設定できているのが確認できました。
反映までも早く、とてもスムーズでした。
4. コスト削減の結果とまとめ
こうして、StudioからReactサイトへの完全移行が完了しました。
気になるコスト削減の結果は以下の通りです。
コスト比較（年間）
約14,000円 の固定費削減に成功しました！
5年運用すれば7万円、PC周辺機器がひとつ買える金額ですね。
最後に：サーバー解約のタイミング
現在、サイトはFirebaseで快適に動いていますが、Xserverのレンタルサーバー契約（サーバーID） の解約は、DNS設定から1週間ほど様子を見てから行いました。（ドメイン契約まで解約しないように細心の注意を払います）
振り返り
FlutterエンジニアとしてWebフロントエンドの世界に飛び込んでみましたが、「React 19 × Tailwind CSS」 の開発体験は非常に快適でした。
ホットリロードも即座に反応してくれていたので、細かい調整もしやすく、普段Flutterで開発している身としてはとても開発しやすかったです。
AIに大まかなデザインは任せて、細かい箇所（文言や画像）の修正を行うことで、AIが出したコードの理解や、技術への理解を深める時間になったと思います。
何より、Geminiとペアプロすることで、デザインやコーディングの時間を大幅に短縮できたのが大きな収穫です。
Geminiと会話をしたその日にはデザインが確定し、細かい情報を調整してデプロイできる状態にまで仕上げ、翌日にはデプロイと反映まで完了していたので、2日で開発完了でした。
今回の記事で紹介した手順についても、基本的にはGeminiに先導してもらいつつ、それでも一部情報が古かった部分もあり、そこについてはググって対応しました。
各社のAIも半年前や1年前に比べるとできることもかなり増えてきているので、思い立ったらまず行動するだけで何でもできてしまう時代なんだなと感心しつつ、危機感も感じたのでこれからも油断せずに、取り入れられるものは取り入れて個人としての知見も増やしていきたいです。
この記事が誰かの参考になれば幸いです。
安心安全のホワイト高還元SESに転職を考えている方へ
新しい挑戦に踏み出すことは、人生において重要な一歩です。 転職活動は自分自身を知り、成長する貴重な機会でもあり、夢や成長を追求するためには必要な要素の一つ になるかと思います。 どんな選択をされるにせよ、その決断があなたに取って素晴らしい未来を切り開くことを願っています！ グラディートと一緒に誇れるエンジニアを目指しましょう！
■『株式会社グラディート』では受託開発・SES・ブランディングデザイン・事業コンサルティングなどを事業として行う都内のIT企業です。現在、不遇な待遇で困っているエンジニアさんは、ぜひ一度グラディートに相談してみてね！（年収査定・SESへの転職相談も承っております！）
株式会社グラディート採用情報はこちら▼
https://en-gage.net/gradito/
株式会社グラディート公式サイトはこちら▼
https://www.gradito.co.jp/
株式会社グラディートでは一緒に働く仲間を募集しています
【後編】公開・運用編：Xserver × Firebase で実現する「維持費ほぼ0円」運用
/assets/images/17460710/original/cdd10f1d-fbbd-48e8-8fa2-a702cb7af8f6?1712117910)
/assets/images/17460710/original/cdd10f1d-fbbd-48e8-8fa2-a702cb7af8f6?1712117910)
