Развертывание реактивного проекта на Azure

Question

Я хочу развернуть свой проект реагирования на лазурное облако. Я уже развернул его на героку и там его было очень легко развернуть. Мне просто нужно было сделать git push heroku master, чтобы развернуть его на героку. Но я не знаю, как это сделать на лазури. Таким образом, у меня есть каталог bulid в моем проекте, который генерируется каждый раз, когда я запускаю команду gulp. Он имеет все файлы сборки. Может ли кто-нибудь посоветовать мне, как перейти к лазурной?

Это моя структура проекта

Answer 1

This полностью Полное руководство по развертыванию статического приложения в Azure.

P.S. Это было бы так же просто, как и герою - надавите свое скомпилированное веб-приложение на azure remote git.

Answer 2

Есть много вариантов, чтобы развернуть приложение на лазурных сайтов/веб-приложения, такие как FTP, локальный Git Repository и Visual Studio IDE, и т.д. Я не Реагировать эксперта, здесь для простоты, я просто использовать create-react-app tool и FileZilla для развертывания моего приложения React в Azure Web App. Вот шаги.

В основном, создание и строительство Реагировать приложение так же просто, как

npm install -g create-react-app 

create-react-app my-app 
cd my-app/ 

npm run build 

Теперь приложение готово к развертыванию! Перейдем к Azure portal и создадим новый веб-сайт, на котором будет размещено наше приложение React.

Введите уникальное имя службы приложения, действительное имя для группы ресурсов и новый тарифный план. Затем нажмите Сохранить.

Чтобы включить FTP-публикацию, нажмите учетных данных РазВЕРТЫВаНИя под РАСКРЫТИЕМ меню APP. Сохраните учетные данные и запишите имя пользователя и пароль, которые вы создаете.

Далее нажмите на Свойства и скопировать FTP HOST NAME и USER.

Наконец, подключение к веб-приложение Azure с помощью FileZilla, а затем загрузить все содержимое my-app/build папку, созданную ранее в папку /site/wwwroot/ на вашем Azure веб-сайта.

Теперь мы можем посетить приложение в браузере с помощью URL: http://aaronreacttest.azurewebsites.net/, и он должен отображать страницу по умолчанию.

Answer 3

Помимо мер, предусматриваемых Аароном, я должен был добавить файл 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>