はじめに
React（+ TypeScript）で構築した Web アプリを XServer 上に公開しようとした際、いくつかの制限や注意点に直面しました。
この記事では、実際のデプロイ経験をもとに「XServer 環境で React アプリを公開する際の注意点」と「その対処方法」についてまとめています。
想定構成
- フロントエンド：React + TypeScript
- フレームワーク：Next.js（App Router +
output: 'export'による静的エクスポート） - ホスティング：XServer（スタンダードプラン）
- デプロイ方法：ビルド済み HTML ファイルを FTP でアップロード
XServer特有の注意点・落とし穴
1. 動的ルーティングが利用できない
/XXXXX/[id] → /XXXXX/123 → 404 エラー
XServer はサーバー側でのルーティング処理に対応していないため、ビルド時に生成されていない URL にアクセスすると 404 になります。
解決策
- Next.js の
generateStaticParams()を利用して、必要なルートをすべて静的に生成する - ビルド後に
/XXXXX/id/index.htmlのような構成に変換するスクリプトを実行する
2. 投稿データの変更が即時反映されない
ヘッドレス CMS（例：WordPress）から取得しているデータが更新されても、out/ 以下の HTML は自動で更新されません。
解決策
- 投稿のたびに再ビルドを行い、
out/ディレクトリを再アップロードする - Webhook + GitHub Actions を利用し、自動でビルド・デプロイを行う仕組みを構築する
3. URL 末尾のスラッシュによる表示エラー
URL の末尾にスラッシュがあると、ページが正しく表示されない場合があります。
解決策
-
next.config.jsにtrailingSlash: trueを設定する - もしくは、ビルド後にファイル名を
index.htmlに変換するスクリプトを使用する
4. HTTPS リダイレクトが効かない
XServerのデフォルト設定では、HTTP アクセスを HTTPS に自動リダイレクトしてくれない場合があります。
そのため、ユーザーが http:// でアクセスすると、セキュリティ上問題があるページとして表示されることがあります。
解決策
.htaccess に以下のリダイレクト設定を追加することで、HTTP アクセスを HTTPS に強制できます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
さいごに
XServerは低コストかつ信頼性の高い共有レンタルサーバーですが、サーバーサイドでの動的処理が行えないため、React や Next.js といったモダンな構成を運用するには注意が必要です。
しかし、以下のような工夫を取り入れることで、十分に安定した運用が可能です。
- 動的ルーティングへの対応（事前ビルド・ルート変換）
- 投稿更新に対応する自動ビルド・自動デプロイの仕組み作り
- HTTPS 対応や URL 最適化のための
.htaccess設定
これから XServer 上で React / Next.js を運用しようと考えている方の参考になれば幸いです。