react-router｜Apacheサーバーの404を解決する

（最終更新月：2022年2月）

✓こんな方へ向けての記事です。

「Reactを本番環境へデプロイしたら、内部リンクが機能しなくなった！」

「内部リンクをたどると404エラーになっちゃう。どうしたら良いの？」

✓当記事で解決すること

Reactを本番環境で使っても、内部リンクが正常に機能するようになる

【著者プロフィール】

【Python・Django歴】10年 x 【営業マン歴】11年

HP作成、社内システムの構築、コンサルティング

当ブログを通じて、下記アプリの作り方、コード等を公開、解説しています

☆日報アプリ「D-Repo」（デモ版）→こちら

※Djangoをベースに作成したアプリです

☆便利ツールアプリ「Tool Station」→こちら

※Django REST frameworkとReactで作成しているアプリです

上記のサイト設定時に最初少しハマりました。昔の自分に向けて解決策を載せておきます。

✔初期費用ゼロ／月9,800円でWebデザインが学べる

デザインを習得するためには、客観的なフィードバックと改善が不可欠です。

以下の記事ではこんなWebデザインスクールをご紹介しています。

初期費用ゼロで、月々9,800円のみ
オンラインで、教材が使い放題
コンテストや実務案件にチャレンジして報酬もGETできる

デザナルはトップデザイナーからレビューがもらえる、格安のWebデザインスクールです。

>>デザナルに興味がある方はこちらからどうぞ<<

詳細をまとめた記事もございますので、ぜひご覧ください。

解決策は簡単です。

Apacheのconfファイルに下記を追記しましょう。

<Directory /var/www/html/> #DocumentRootと同じディレクトリを指定します。
	Options Indexes FollowSymLinks
	AllowOverride None
	Require all granted
	RewriteEngine on
	RewriteCond %{REQUEST_FILENAME} -f [OR]
	RewriteCond %{REQUEST_FILENAME} -d
	RewriteRule ^ - [L]
	RewriteRule ^ index.html [L]
</Directory>

confファイル全体はこんな感じになります。

/etc/apache2/sites-available/react-app.conf

<VirtualHost>
	ServerAdmin ...@...
	ServerName ...
	DocumentRoot /var/www/html #ここはindex.htmlを置いているフォルダを指定します。
	
	<Directory /var/www/html/> #DocumentRootと同じディレクトリを指定します。
		Options Indexes FollowSymLinks
		AllowOverride None
		Require all granted
		RewriteEngine on
		RewriteCond %{REQUEST_FILENAME} -f [OR]
		RewriteCond %{REQUEST_FILENAME} -d
		RewriteRule ^ - [L]
		RewriteRule ^ index.html [L]
	</Directory>

	ErrorLog ...
	CustomLog ...
	
</VirtualHost>

ファイル名「react-app.conf」をご自身のものに置き換えてください。

以上で解決するはずです。

当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています

「Djangoでのアプリ開発を学びたい！」
「Djangoで開発したアプリをWebで公開するにはどうするの？」

という方は必見です！