Создание приложений 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.