Настройка сервера под SPA на ReactJS

Йо-йо! Я активно монетизирую свой сайт и в прошлой статье была размещена ссылка на сайте рекламодателя. Чтобы ссылка была логичной, я пообещал, что напишу статью о том, как настроить windows server и apache для SPA на ReactJS.

Если вы умеете настраивать свой сервер для MVC, то можете не читать статью, а если нет, то идём дальше.

Настройка под Windows Server IIS

Когда вы уже настроили папку с вашим проектом, нужно настроить файл web.config. Пример

<?xml version="1.0" encoding="utf-8"?>
<configuration>
	<system.webServer>
		<rewrite>
			<rules>
				<rule name="ReactJS Routes" stopProcessing="true">
					<match url=".*" />
					<conditions logicalGrouping="MatchAll">
						<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
						<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
					</conditions>
					<action type="Rewrite" url="/" />
				</rule>
			</rules>
		</rewrite>
	</system.webServer>
</configuration>

Так же вы можете настроить это через переопределение URL-адресов.

Настройка под Apache

Настройка под Apache проще (мне кажется). Вы можете положить в папку с проектом файл .htaccess. В файле мы пишем:

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Часто бывает, что нужно сразу сделать перенаправление на https. В этом случае файл будет содержать следующее:

RewriteEngine on


RewriteCond %{SERVER_PORT} !^443$ 
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]


RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

На iis https можно так же настроить в визуальном редакторе.

P.S.

Теперь вы знаете как настроить iis на windows server и apache для spa на reactjs.

Полезные ссылки

Проверка редиректа
Fetch и CORS в reactjs
Приватный роут в react-router-dom
React js router. Простой пример