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

React

(最終更新月:2022年2月)

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

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

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

✓当記事で解決すること

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

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

icon
icon

解決策は簡単です。

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」をご自身のものに置き換えてください。

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

✔当ブログは以下のような方に向けて書かれています

「Djangoでのアプリ開発を学びたい!」

「Djangoで開発したアプリをWebで公開するにはどうするの?」

✔当ブログ掲載の記事

  • Djangoで作る日報アプリ開発
  • WebアプリをWeb上に公開する方法
  • Webアプリ開発に必要なそのほかの情報
【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!

ITCブログにご協力いただける方は、以下もご検討いただけると嬉しいです。

ITCへ投げ銭をする

タイトルとURLをコピーしました