Bereitstellen eines Reaktionsprojekts auf Azure

Question

Ich möchte mein reaktives Projekt in einer azure Cloud bereitstellen. Ich habe es bereits auf Heroku installiert und dort war es sehr einfach zu implementieren. Ich musste einfach den Heroku-Meister schieben, um es auf Heroku zu verteilen. Aber ich weiß nicht, wie ich es auf Azur machen soll. Also habe ich ein Bulid-Verzeichnis in meinem Projekt, das jedes Mal generiert wird, wenn ich den Befehl gulp ausführe. Es hat alle Build-Dateien. Kann mir bitte jemand sagen, wie es weitergeht?

Das ist meine Projektstruktur

Answer 1

This vollständig vollständige Anleitung ist, wie statische Anwendung Zu bereitstellen.

P.S. Es wäre so einfach wie Heroku - Push Ihre kompilierte Web-App auf azurblauen Remote-Git.

Answer 2

Es gibt viele Möglichkeiten, um Ihre App zu azur Websites/Web-App, wie FTP, Local Git Repository, und Visual Studio IDE zu implementieren, etc. Ich bin ein nicht-Experte Reaktion, hier der Einfachheit halber benutze ich nur create-react-app Werkzeug und FileZilla, um meine React App in Azure Web App zu implementieren. Hier sind die Schritte. Grundsätzlich

, das Erstellen und Gebäude Reagieren App ist so einfach wie

npm install -g create-react-app 

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

npm run build 

nun die App bereit ist, eingesetzt zu werden! Lass uns gehen in Azure portal und erstellen Sie eine neue Website, die unsere React App hosten wird.

Geben Sie einen eindeutigen Namen für den App-Dienst, einen gültigen Namen für die Ressourcengruppe und einen neuen Serviceplan ein. Klicken Sie dann auf Speichern Sie.

Um FTP-Veröffentlichung, klicken Sie Deployment Anmeldeinformationen unter dem APP DEPLOYMENT Menü zu aktivieren. Speichern Sie die Anmeldeinformationen, und notieren Sie den Benutzernamen und das Kennwort, die Sie erstellen.

Als nächstes klicken Sie auf Eigenschaften, und kopieren Sie die FTP HOST NAME und die USER.

schließlich zu Azure Web App über FileZilla verbinden, dann den gesamten Inhalt der früheren in die /site/wwwroot/ Ordner auf Ihrer Azure Webseite erstellt my-app/build Ordner hochladen.

Jetzt können wir die App in einem Browser über die URL besuchen: http://aaronreacttest.azurewebsites.net/, und es sollte die Standardseite angezeigt werden soll.

Answer 3

Zusätzlich zu den Schritten von Aaron zur Verfügung gestellt hatte ich mit dem Inhalt unter der web.config-Datei hinzuzufügen. Es wird von anderen Technikern in ihren Blogs und einigen Foren bereitgestellt.

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