Erstellen und Bereitstellen in Azure Static Web Apps

  • 1 Minute

Der bisherige Fokus dieses Moduls lag auf dem Erstellen einer Gatsby-App mithilfe von React, GraphQL und Plug-Ins. Im nächsten Schritt werden Sie die App, nachdem Sie sie geschrieben haben, auch erstellen. Das Ziel ist, dass Sie danach auf jedem Webserver oder in jedem Hostingdienst, der statische Dateien liefern kann, Anwendungen bereitstellen können.

Erstellen der App

Das Befehlszeilentool von Gatsby bietet einen Befehl, mit dem Sie Ihr Projekt so erstellen können, dass es überall bereitgestellt werden kann. Der Build besteht aus HTML-, JavaScript- und CSS-Ressourcen sowie allen anderen Ressourcen, die Sie eingefügt haben.

Erstellen des Builds

Der React-Compiler wird in Gatsby im Hintergrund ausgeführt. Während des Buildvorgangs laufen also viele Prozesse parallel ab. Der React-Code wird kompiliert, indem JSX in JavaScript und HTML übersetzt wird. Zudem wird der gesamte JavaScript-Code extrahiert und in mehreren Bundles platziert. Jedes Bundle wird anschließend optimiert. Dies bedeutet, dass Leerzeichen entfernt, Variablen umbenannt und Ausdrücke auf eine höhere Geschwindigkeit hin optimiert werden. Die Stile durchlaufen einen ähnlichen Prozess. Wenn Sie sich für Ihre CSS-Ressourcen für eine Bibliothek wie LESS, SASS oder Stylus entschieden haben, wird vor dem eigentlichen Build ein vorbereitender Schritt eingefügt. Darin wird Ihre CSS-Ressource aus einer höheren Sprache in CSS kompiliert. Sie müssen nichts weiter tun, um die Dateien nun bereitstellen zu können. Sie verfügen nun über statische Dateien, die auf jedem Webserver gehostet werden können, der Dateien ausliefern kann.

Bereitstellen des Builds

Es gibt viele Technologien und Dienste, die statische Apps hosten können. Letztlich handelt es sich bei diesen Apps nur um HTML-, CSS- und JavaScript-Ressourcen, die von den meisten Webdiensten gehostet werden können. Für dieses Tutorial werden Sie die App in Static Web Apps bereitstellen, einem Azure-Dienst, der auf das Hosten statischer Apps wie die in Gatsby erstellten ausgelegt ist.

Azure Static Web Apps

Static Web Apps ist ein Azure-Dienst, mit dem Sie statische Dateien über die Cloud ausliefern können. Dabei stellen Sie kein Bereitstellungspaket bereit, sondern eine Reihe statischer Dateien. Da Gatsby bei einem Build eine Reihe statischer Dateien generiert, ist Azure Static Web Apps eine ideale Ergänzung.

Der Dienst übernimmt sogar den Buildschritt für Sie. Sie müssen daher vorab keinen Build erstellen. Er erreicht dies, indem er den Befehl build in der Datei package.json des Gatsby-Projekts sucht. Sie müssen Ihr Projekt lediglich in einem GitHub-Repository ablegen.

Ihr Code befindet sich derzeit in einem Verzeichnis auf Ihrem Computer. Sie müssen die Bereitstellung in Azure daher noch vorbereiten:

  • Erstellen eines GitHub-Repositorys und Pushen des Repositorys zu GitHub: Gatsby erstellt ein Git-Repository für Sie, das per Pushvorgang an GitHub übermittelt werden muss.

  • Erstellen einer Azure Static Web Apps-Instanz: Wenn Sie im Azure-Portal eine Azure Static Web Apps-Instanz erstellen, stellen Sie die URL zu Ihrem GitHub-Repository und den Namen für das Unterverzeichnis bereit, in dem sich die statischen Dateien Ihres Projekts befinden. Im Falle von Gatsby heißt dieses Verzeichnis public/.