React アプリを開発環境から Apache 本番環境へ移行せよ〜 | CentOS 7

この記事は 2019 年当時の記録です（2026 年 7 月追記）

先に結論をお伝えします。この記事の中心である Apache 側の設定は、2026 年の現在もそのまま使えます。変わったのは OS とプロジェクトの作り方です。その 2 点を補足します。

1. CentOS 7 はサポートが終了しています

CentOS 7 は 2024 年 6 月 30 日にサポート終了（EOL）となり、セキュリティ修正が提供されなくなりました。本番サーバーで使い続けるのは危険です。CentOS 8 も 2021 年に終了しており、CentOS 9 は存在しません。

現在の移行先は次のとおりです。

AlmaLinux / Rocky Linux — RHEL 互換の無償ディストリビューション。CentOS からの移行先として最も一般的です

RHEL — 有償。RHEL 7 は延長サポート（ELS）で 2028 年 6 月末まで

CentOS Stream — RHEL の上流にあたる位置づけ。安定版の後継ではない点に注意が必要です

本文のコマンドは RHEL 系（yum / systemctl）の作法なので、AlmaLinux・Rocky Linux ではほぼそのまま通用します。yum は dnf に置き換わっていますが、yum コマンドも互換として残っています。

2. create-react-app は終了しました

React チームは 2025 年 2 月 14 日に create-react-app の提供終了を公式に発表しました。新規アプリではフレームワーク、もしくは Vite・Parcel・RSBuild といったビルドツールを使うことが推奨されています。既存アプリ向けにはメンテナンスモードとして React 19 対応版が公開されていますが、これから新しく作る場合に選ぶ理由はありません。

本文の create-react-app と yarn build の部分は、お使いのツールのコマンドに読み替えてください。

3. ビルド成果物のディレクトリ名が変わります

本文では build/ の中身を Apache の DocumentRoot にコピーしています。この build という名前は create-react-app の既定値です。Vite では既定で dist になります。コピー元のパスだけ、お使いのツールの出力先に合わせてください。中身が静的ファイル一式であることは変わりません。

4. Apache 側の設定は今も有効です

本文の VirtualHost 設定、とくに次の部分は、ビルドツールが何であっても必要です。
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
これは「実ファイルが存在しないリクエストはすべて index.html に渡す」という指定です。SPA（シングルページアプリケーション）はルーティングをブラウザ側で処理するため、この一行がないと、トップページは表示できてもサブページを直接開いた瞬間に 404 になります。React に限らず、Vue でも Svelte でも同じ考え方です。

この記事で本当に必要な部分は、ここだと考えています。

※ 上記は 2026 年 7 月時点の公開情報に基づく整理であり、当方の環境での再検証は行っていません。移行の際は各ディストリビューション・ツールの公式ドキュメントをご確認ください。

今まである WEB アプリを React と Django を利用して開発して来たのですが、そろそろデモ版として外部にオープンしようかと思い始めました。まず本番環境はどう作れば良いか調べて Apache サーバに乗せって見ることにしました。Let’s Encrypt から SSL証明書も取得済みであって HTTPS を適用して React のロゴが見えるところまで設定します。

プロジェクトを作成
プロダクションをビルド
Static Server ( 静的サーバ ) を設置
Apache と連動する
1. 基本情報
VirtualHost の設定
Apache デーモンを再起動
サイトを確認

プロジェクトを作成

snowball はプロジェクト名です。ここでは /reactjs の下にプロジェクトを作りますが、場所はどこでも良いです。

[root@centos7 ~]# mkdir /reactjs
[root@centos7 ~]# cd /reactjs
[root@centos7 reactjs]# create-react-app snowball

プロダクションをビルド

yarn build ( = npm run build ) を実行すると、アプリのプロダクションビルドで build ディレクトリが作成されます。 build/static ディレクトリの中には、JavaScript ファイルと CSS ファイルがあります。 build/static の中の各ファイル名はファイル内容のユニークなハッシュを含みます。

[root@centos7 snowball]# ll /reactjs/snowball/build/
total 24
-rw-r–r– 1 root root 820 Jun 24 23:21 asset-manifest.json
-rw-r–r– 1 root root 3870 Jun 24 23:21 favicon.ico
-rw-r–r– 1 root root 2045 Jun 24 23:21 index.html
-rw-r–r– 1 root root 306 Jun 24 23:21 manifest.json
-rw-r–r– 1 root root 646 Jun 24 23:21 precache-manifest.054774adbe886ee6e3c29227ef1745b5.js
-rw-r–r– 1 root root 1182 Jun 24 23:21 service-worker.js
drwxr-xr-x 5 root root 37 Jun 24 23:21 static

[root@centos7 snowball]# ll /reactjs/snowball/build/static/
total 4
drwxr-xr-x 2 root root 70 Jun 24 23:21 css
drwxr-xr-x 2 root root 4096 Jun 24 23:21 js
drwxr-xr-x 2 root root 30 Jun 24 23:21 media

yarn build

[root@centos7 snowball]# yarn build
yarn run v1.16.0
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  36.44 KB  build/static/js/2.b41502e9.chunk.js
  762 B     build/static/js/runtime~main.a8a9905a.js
  602 B     build/static/js/main.28647029.chunk.js
  517 B     build/static/css/main.2cce8147.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://bit.ly/CRA-deploy

Done in 19.66s.

[root@centos7 snowball]#

Static Server ( 静的サーバ ) を設置

yarn global add serve

ここでは Apache に React アプリを乗せるので使わないですが、普段は serve -s build コマンドで静的サイトをポート 5000 で処理してくれるので Static Server である serve を設置して置きます。

[root@centos7 snowball]# yarn global add serve
yarn global v1.16.0
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "serve@11.0.2" with binaries:
      - serve
Done in 4.01s.

[root@centos7 snowball]#

Apache と連動する

基本情報

使用するドメイン：annotators.ml
DocumentRoot：/usr/local/apache2/htdocs/annotators.ml/
Apache の設定 の詳細はこちら !

build ディレクトリ以下を Apache の DocumentRoot へコピーする

[root@centos7 snowball]# cp -r /reactjs/snowball/build/* /usr/local/apache2/htdocs/annotators.ml/

VirtualHost の設定

下記の <Directory> 〜 </Directory> 部分を追加します。

<VirtualHost *:80>
    ...
　　＃ 追加：ここから
    <Directory "/usr/local/apache2/htdocs/annotators.ml">
        Options Indexes FollowSymLinks
        AllowOverride All

        Options -MultiViews
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteRule ^ index.html [QSA,L]

        Require all granted
    </Directory>
   ＃ 追加：ここまで
 ...
</VirtualHost>

Apache デーモンを再起動

[root@centos7 snowball]# systemctl restart httpd2

サイトを確認

参考文献

Deployment
Creating a Production Build
Host react application on Apache server