Создание приложений React никогда не было таким простым с появлением таких инструментов, как create-react-app или next, но их развертывание стало одновременно простым и сложным.

Поскольку я обычно развертываю приложения в Microsoft Azure, было естественно развернуть новый блестящий интерфейс на веб-сайте Azure. Инструмент CLI может создать ваше приложение React, которое может служить простым статическим сайтом, поскольку оно состоит только из одного файла html, одного файла js и набора статических изображений и таблиц стилей.

Создание веб-сайта

Наш первый шаг - убедиться, что в нашей системе установлено create-react-app. Для этого выполните следующую команду:

npm i -g create-react-app

Чтобы создать новый проект, просто вызовите инструмент с именем проекта:

create-react-app AzureTest

Это создаст новую папку с именем AzureTest, которая будет содержать все файлы, используемые для разработки и создания вашего веб-сайта. Давайте создадим проект с помощью следующей команды:

npm run build

После его завершения создается новая папка с именем build, которая содержит все необходимое для запуска веб-сайта в производственной среде.

Развертывание на веб-сайте Azure

Давайте создадим новый веб-сайт, на котором будет размещено наше приложение React. Войдите в портал Azure и создайте новое веб-приложение. Предположим, он называется AzureReactTest1, и прежде чем продолжить загрузку профиля публикации, который содержит учетные данные FTP.

После подключения через FTP-клиент скопируйте все содержимое папки build, созданной ранее, в папку /site/wwwroot/ на своем веб-сайте Azure.

Обновите сайт в браузере, и он должен отобразить страницу по умолчанию.

Маршрутизация на стороне клиента

Когда в микс добавляется маршрутизация, возникают проблемы. Если маршрутизация выполняется на стороне клиента, например если вы используете create-react-app и react-routerдля создания одностраничного приложения, URL site.com/section не будет работать сразу после установки.

Это означает, что если мы попытаемся открыть указанную выше ссылку вручную в браузере, мы получим страницу с ошибкой 404, потому что Azure пытается найти файл с index.html (или другим index.* именем) внутри папки section. Чтобы исправить это, Azure необходимо знать, как передать предполагаемый маршрут единственному index.html, расположенному в корне сайта. Создайте новый файл в папке /site/wwwroot с именем web.config со следующим содержимым:

<?xml version="1.0"?>
<configuration>
 <system.webServer>
 <rewrite>
 <rules>
 <rule name="React Routes" stopProcessing="true">
 <match url=".*" />
 <conditions logicalGrouping="MatchAll">
 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
 <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
 </conditions>
 <action type="Rewrite" url="/" />
 </rule>
 </rules>
 </rewrite>
 </system.webServer>
</configuration>

Это скажет Azure переписать все URL-адреса, как если бы они указывали на наш корневой файл, и наше приложение SPA сможет правильно обрабатывать ссылки.

Заключение

Развертывание приложений React так же просто, как развертывание статических сайтов - при условии, что кто-то знает о проблемах маршрутизации. В следующем посте мы настроим интеграцию CI на нашем веб-сайте Azure.