ReactとExpressを使ってWebサイトを構築したものの、どこにホスティングすればいいか悩んでいませんか？特に中小規模の開発においては、「コスト」「手間」「安定性」のバランスが重要です。システム構築は終わっても、適切なホスティング先を選ばなければ、せっかくの開発も台無しになってしまいます。
しかし、ホスティングサービスの選択肢は多く、それぞれに特徴やメリット・デメリットがあるため、どれを選ぶべきか判断が難しいものです。実際、私がReact、Express、Firebaseを組み合わせた構成で小規模サイトを構築した際にどこにホスティングするのかを悩みました。フロントエンドとバックエンドの両方をスムーズに動作させる必要があり、なおかつコスト問題！
本記事では、小規模Webサービスにおすすめのホスティングサービスとそのコスト感を、実際の構成（React + Express + Firebase）をもとに詳しく解説します。無料枠を活用して低コストで始められるサービスから、将来の拡張性を見据えたプロフェッショナル向けのサービスまで紹介します。
React＋Express＋Firebase構成に合うホスティングサービスとは？
React、Express、Firebaseを組み合わせたアーキテクチャは、現代のWebアプリケーション開発において非常に人気のある構成です。まずは今回私が構築したシステム構成と、求められるホスティング条件について確認します。
想定するシステム構成
今回想定するシステム構成は以下のようなものです：
- フロントエンド: React + TypeScript（静的ビルド）
- モダンなUIを実現するためのSPA（Single Page Application）
- TypeScriptによる型安全な開発
- ビルド後は静的ファイル（HTML、CSS、JavaScript）
- バックエンド: TypeScript + Express（API）
- RESTful APIやGraphQL APIの提供
- ビジネスロジックの実装
- Firebaseとの連携処理
- データベース: Cloud Firestore
- NoSQLデータベースでリアルタイム更新も可能
- 複雑なクエリや大量データの取り扱い
- 認証: Firebase Authentication
- ユーザー認証・権限管理
- ソーシャルログイン対応
- 用途: LIFEアプリ(予約・問い合わせ・会員管理) ＋ HP
- 月間アクティブユーザー数は数百〜数千人程度
- トラフィックはそれほど多くない
求められるホスティング条件
私が求めたホスティングサービスの条件：
- コストが安い／無料枠がある
- 小規模開発や検証段階ではできるだけコストを抑えたい
- スタートアップや中小企業にとって初期コストは重要な判断材料
- 静的ファイルとAPI両方がデプロイ可能
- フロントエンド（React）とバックエンド（Express）を同時にホスティングできること
- あるいは、それぞれを別々にホスティングする場合でも連携がスムーズであること※これが地味に重要！フロント⇔API連携のCROS問題で苦労した…(→後述)
- Firebase Auth・Firestoreとの親和性がある
- 認証やデータベースアクセスがスムーズに行える
- セキュリティルールやAPIキーの管理が容易
- スケーラビリティとSSL対応
- 将来的なトラフィック増加に対応できる柔軟性
- HTTPSによる安全な通信の確保
- 自動スケーリングや負荷分散機能があれば理想的
ホスティングサービスとコスト比較
小規模なReact + Express + Firebase構成のWebアプリケーションに適したホスティングサービスをいくつか紹介します。
Firebase Hosting（Functions連携）
Firebase Hostingは、Googleが提供するウェブホスティングサービスで、特にFirebaseの他のサービスと組み合わせて使うことで真価を発揮します。
メリット：
具体的な実装方法：
- Reactプロジェクトをビルド（
npm run build） - ExpressをCloud Functionsに移植（エンドポイントごとに関数を作成）
// functions/index.js の例const functions = require('firebase-functions');const express = require('express');const cors = require('cors');const app = express();app.use(cors({ origin: true }));app.get('/api/users', async (req, res) => { // Firestoreからユーザーデータを取得するロジック const snapshot = await admin.firestore().collection('users').get(); const users = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })); res.json(users);});// ExpressアプリをCloud Functionsにエクスポートexports.api = functions.https.onRequest(app); - firebase.jsonで設定
{ "hosting": { "public": "build", "rewrites": [ { "source": "/api/**", "function": "api" }, { "source": "**", "destination": "/index.html" } ] }} - デプロイコマンド:
firebase deploy --only hosting,functions
コスト感：
Firebase Hostingは、特にFirebaseの他のサービスと統合したい場合に最適です。設定も比較的簡単で、無料枠も寛大なため、小規模から中規模のプロジェクトに向いています。
Vercel + Firebase（APIは別運用）
Vercelは特にReactなどのフロントエンドフレームワーク向けに最適化されたホスティングサービスで、GIT連携でビルド&でデプロイの手順が本当に簡単！ExpressをAPIとして別途運用する必要があります。
メリット：
具体的な実装方法：
- Reactアプリケーションを作成し、GitHubにpush
- Vercelでプロジェクトを連携（GitHub連携）
- ビルド設定を行う（多くの場合は自動検出される）
- ExpressバックエンドはFirebase Cloud Functionsで実装
// バックエンド側のCORS設定（重要）const cors = require('cors')({ origin: true });exports.api = functions.https.onRequest((req, res) => { return cors(req, res, () => { // APIロジック });}); - フロントエンドからAPIを呼び出す
// Reactアプリ内でのAPI呼び出し例useEffect(() => { fetch('https://your-firebase-project.web.app/api/data') .then(response => response.json()) .then(data => setData(data));}, []);
コスト感：
Vercelは特にフロントエンドの開発体験を重視する場合におすすめです。GitHubとの連携や簡単なプレビュー機能など、開発ワークフローを効率化する機能が充実しています。GITにプッシュするだけで、自動でビルド&デプロイしてくれるのでフロント側の開発の際にとても重宝しています。
Render / Railway などの新興PaaS
RenderやRailwayなどの新興PaaS（Platform as a Service）は、Node.jsアプリケーションのデプロイを簡単にする機能を提供しています。Expressアプリをまるごとデプロイできるのが特徴です。
メリット：
具体的な実装方法（Renderの場合）：
- ExpressアプリにReactビルドファイルを統合
// サーバーサイドのコード例const express = require('express');const app = express();// APIエンドポイントapp.get('/api/data', (req, res) => { // データ処理ロジック res.json({ message: 'Hello from API' });});// 静的ファイル（Reactビルド）の提供app.use(express.static('client/build'));// その他のルートをReactアプリにリダイレクトapp.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));});const PORT = process.env.PORT || 3000;app.listen(PORT); - package.jsonにスタートスクリプトを追加
{ "scripts": { "start": "node server.js", "build": "cd client && npm install && npm run build" }} - Renderダッシュボードで新規Webサービスを作成
- GitHubリポジトリを連携
- ビルドコマンドとスタートコマンドを設定
コスト感：
RenderやRailwayは、特にフルスタックアプリケーションを単一のサービスとしてデプロイしたい場合に便利です。Firebase Authなどとの連携は別途設定が必要になります。
Google Cloud Run（中～上級者向け）
Google Cloud Runは、コンテナベースのサーバーレスプラットフォームで、スケーラビリティと柔軟性に優れています。ExpressアプリをDockerでコンテナ化してデプロイするアプローチです。
メリット：
具体的な実装方法：
- ExpressアプリにDockerfileを追加
FROM node:16WORKDIR /appCOPY package*.json ./RUN npm installCOPY . .RUN cd client && npm install && npm run buildEXPOSE 8080CMD [ "node", "server.js" ] - ローカルでDockerイメージをビルド
docker build -t gcr.io/YOUR_PROJECT_ID/react-express-app . - Google Container Registryにプッシュ
docker push gcr.io/YOUR_PROJECT_ID/react-express-app - Cloud Runサービスを作成（コンソールまたはgcloud CLI）
gcloud run deploy --image gcr.io/YOUR_PROJECT_ID/react-express-app --platform managed - 環境変数でFirebase設定を渡す
コスト感：
Google Cloud Runは、特に将来的な拡張性を重視する場合や、より高度なカスタマイズが必要な場合におすすめです。初期設定は複雑ですが、スケーリングや性能面で優れています。
無料ドメインとの組み合わせについて
どのホスティングサービスを選ぶにせよ、開発初期段階や小規模プロジェクトでは、独自ドメインを購入せずに各サービスが提供する無料サブドメインを活用したいところです。それぞれのホスティングサービスが提供する無料ドメインは以下のような感じでした。
- Firebase Hosting:
your-project-id.web.app - Vercel:
your-project.vercel.app - Render:
your-app.onrender.com - Cloud Run:
your-service-xxxx-xx.a.run.app
本番環境では独自ドメインを設定することで、プロフェッショナルな印象を与えることができます。多くのサービスでは独自ドメインの設定も簡単に行えるようです。
開発中のCORS問題
開発を進める中で、フロントの開発が大体完了して動きを確認しながらサーバ側の実装を進めるという事をよくやります。本番環境ではHTTPSを使って通信する必要があるため開発段階では、フロントエンドをVercelにデプロイし、バックエンドはngrokを使ってローカル起動したサーバを一時的に外部公開し進めていました。
そうすると、CORS問題にぶち当たりました。
Access to fetch at 'https://abcd1234.ngrok.io/api/users' from origin 'https://my-app.vercel.app'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.このCORS（Cross-Origin Resource Sharing）エラーに何時間も費やし、問題がコード自体にあるのか、ネットワーク設定なのか、それともngrokの制限なのかを切り分けるのに苦労しました。ExpressのCORS設定を調整したり、ngrokの--host-headerオプションを試したりしましたが、開発環境と本番環境の一貫性を保つことの難しさを痛感しました。
結局、フロントエンドとバックエンドは可能な限り同じホスティングサービス上に構築することが(今回の開発のような構成の場合)最も効率的であるという結論に至りました。Firebase HostingとFunctionsの組み合わせや、Renderのようなフルスタックデプロイをサポートするサービスを使用することで、開発段階からCORS問題に悩まされることなく、一貫した環境でテストができるようになりました。
私が採用したのはFirebase Hosting
React + Express + Firebase構成の小規模Webサイトにおけるホスティングサービスの選択肢を見てきました。それぞれの特徴とコスト感をまとめると：
- Firebase Hosting + Functions:
- 最も簡単に始められる統合環境
- Firebase製品との親和性が高い
- 無料枠が十分で、初期段階のプロジェクトに最適
- Vercel + Firebase:
- フロントエンド開発体験を重視
- GitHubとの連携や自動デプロイが容易
- フロントとバックの分離運用
- Render / Railway:
- フルスタックアプリケーションを単一サービスとして運用
- 設定が比較的簡単
- 一定の無料枠があるが制限も
- Google Cloud Run:
- 高度なカスタマイズ性と拡張性
- 大規模化を見据えたインフラ
- 設定は複雑だが長期的なコスト最適化が可能
小規模構成なら、特にFirebase Hostingが最も扱いやすく、無料で始めやすいですね。私も今回Fierbase Hostingを採用しました。React + Express + Firebaseという構成は、無料枠の範囲でも十分に本格的な運用が可能で、今回構築した小規模システムには最適の組み合わせと考えました。今後、サービスの成長に応じて、VercelやCloud Runへの拡張も視野に入れることで、長期的な運用コストと開発効率のバランスを取ることができますね。
