Как развернуть производственную сборку реагирующего приложения npm в службе приложений Azure

Question

Я пытаюсь развернуть версию моего приложения реакции на сборку npm для веб-службы Azure через ftp. Я переместил папку сборки, но когда я загружаю URL своего приложения, экран по умолчанию загружается с Hey Node Developers!.

Я могу развернуть через github и kudu. Однако я не верю, что это приложение производственного качества, поскольку оно не построено с использованием npm run build с create-react-app.

Я ознакомился с этим лазурным гидом , а также с различными блогами. Я также включил файл web.config. Ничто не заставило мою страницу загружаться правильно.

Я пытался использовать версии узлов 10.1, 10.14 и LTS. Я пытался использовать службы приложений Linux и Windows.

Answer 1

Службы приложений Azure для Windows (Node JS)

Локальная загрузка Git в службы приложений Azure

1. Откройте службу приложений на портале Azure> Deployment> Deployment Center - если вы уже настроили вариант развертывания, вам придется нажать Disconnect.
2. Выбрать Local Git> App Service Build Service> Summary> Finish
3. Выберите FTP / учетные данные (в верхнем левом углу)> Выберите учетные данные пользователя - установите пароль и сохраните свои учетные данные
4. Вернитесь к обзору, скопируйте URL-адрес развертывания git со своим именем пользователя git. Должен быть этот формат: https://<user_name>@<app_service_name>.scm.azurewebsites.net:443/<app_service_name>.git
5. Запустите npm run build из папки вашего проекта локально на вашем компьютере
6. В ./build запустите git init после завершения сборки для инициализации вашего git-репо
7. Запустите git remote add azure https://<user_name>@<app_service_name>.scm.azurewebsites.net:443/<app_service_name>.git, чтобы добавить развертывание Azure в качестве опции для нажатия на
8. Выполнить git add * и git commit -m "${date}" и git push azure master:master
9. Вам будет предложено ввести пароль. Это будет пароль, который вы указали на экране FTP / учетных данных.
10. Проверьте свой сайт. Должен быть доступен на https://<app_service_name.azurewebsites.net

Если вы хотите в будущем отправлять обновления в службу приложений, вы будете выполнять только шаги с 8 по 10.

Настройка IIS для React-Router

Чтобы использовать react-router с вашим реагирующим SPA, вам также необходимо настроить веб-приложение для перенаправления ошибок 404 на index.html. Вы можете сделать это, добавив файл в /site/wwwroot/ с именем web.config. Разместите содержимое ниже и перезапустите службу приложений с портала Azure.

<?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>