Arbeiten mit Azure Static Web Apps: Eine Netlify-Alternative

Jamstack-Sites haben die Welt im Sturm erobert, wie der starke Wettbewerb zwischen Angeboten wie Netlify und Cloudflare beweist. Azure hat kürzlich mit seinem neuen Angebot für statische Web-Apps (SWAs) seinen Hut in diesen hart umkämpften Ring geworfen.

In diesem Tutorial zeigen wir Ihnen, wie Sie mit Statische Web-Apps und demonstrieren Sie, wie Sie eine mithilfe von GitHub-Aktionen bereitstellen.

Jamstack und Azure Static Web Apps

Jamstack steht für JavaScript, API und Markup. Bei Jamstack-Websites befindet sich die Anwendungslogik normalerweise auf der Clientseite. Diese Clients werden meistens erstellt als einseitige Bewerbungen und haben oft HTML-Dateien, die für jeden möglichen Pfad statisch generiert werden, um die Suchmaschinenoptimierung zu unterstützen.

Statische Azure-Web-Apps war zur allgemeinen Nutzung freigegeben im Mai 2021. Zu seinen Funktionen gehören:

  • Global verteilte Inhalte für Produktions-Apps
  • Automatisch bereitgestellte Vorschauumgebungen
  • Benutzerdefinierte Domänenkonfiguration und kostenlose SSL-Zertifikate
  • Integrierter Zugriff auf eine Vielzahl von Authentifizierungsanbietern
  • Routenbasierte Autorisierung
  • Benutzerdefiniertes Routing
  • Integration mit serverlosen APIs, die von Azure Functions unterstützt werden
  • Eine benutzerdefinierte Visual Studio Code-Entwicklererweiterung

Bezeichnenderweise sind diese Funktionen kostenlos nutzbar. Bei Netlify gibt es auch ein kostenlose Stufe; Es ist jedoch ziemlich einfach, die Build-Limits der kostenlosen Stufe zu überschreiten und sich eine unerwartete Rechnung zu stellen. Durch die Kombination von Azure Static Web Apps mit GitHub Actions können wir vergleichbare Erfahrungen aufbauen und uns Geld sparen!

Lassen Sie uns also einen einfachen SWA erstellen und mit GitHub Actions bereitstellen.

Erstellen einer Docusaurus-Site

Im Stammverzeichnis unseres Repositorys werden wir eine Docusaurus-Site erstellen. Docusaurus ist ein gutes Beispiel für eine statische Site, die perfekt zu Jamstack passt. Wir könnten auch etwas anderes gebrauchen, wie z Hugo.

In der Befehlszeile geben wir Folgendes ein:

npx [email protected] website classic

Dadurch erstellt Docusaurus eine neue Site im website Verzeichnis.

Lassen Sie uns dies festlegen und vorantreiben und unsere Aufmerksamkeit auf Azure lenken.

Erstellen einer statischen Web-App in Azure

Es gibt verschiedene Möglichkeiten, eine statische Web-App in Azure zu erstellen. Es ist möglich zu verwenden Infrastruktur als Code mit einer Sprache wie Bicep. Aber für dieses Tutorial verwenden wir die Azure-Portal stattdessen.

Wenn Sie noch kein Konto haben, können Sie es sehr schnell kostenlos einrichten.

Nachdem Sie sich angemeldet haben, klicken Sie auf Erstellen Sie eine Ressource und suchen Sie nach Static Web App:

Statische Azure-Web-Apps: Erstellen einer Ressource

Klicken Erstellen und Sie gelangen zum Erstellungsdialog:

Dialog zum Erstellen statischer Azure-Web-Apps

Sie müssen eine Ressourcengruppe erstellen, in der Ihr SWA leben kann. Geben Sie der App einen Namen, wählen Sie den kostenlosen Plan aus und geben Sie GitHub als Bereitstellungsquelle ein.

Drücke den Mit GitHub anmelden und autorisieren Sie Azure, auf Ihr GitHub-Konto für statische Web-Apps zuzugreifen.

Statische Azure-Web-Apps: Anmelden mit GitHub

Zu diesem Zeitpunkt fragt Azure in Ihrem Namen GitHub ab und sucht nach den Organisationen und Repositorys, auf die Sie Zugriff haben. Wählen Sie das Repository aus, das Sie in Ihrer Static Web App bereitstellen möchten, und wählen Sie den Branch aus, den Sie bereitstellen möchten.

Sie müssen Azure auch einige Builddetails bereitstellen, damit Azure besser verstehen kann, wie Ihre App erstellt wurde. Wir bieten eine Voreinstellung von Brauch. Wir stellen die ein App-Standort (die Wurzel unserer Frontend-App) zu sein "/website" um mit der soeben erstellten Anwendung abzugleichen.

Wir werden gehen API-Standort leer und setzen Sie den Ausgabeort auf "build" — das ist das Verzeichnis unter website wo Docusaurus unsere Site erstellen wird.

Klicken Sie abschließend auf Überprüfen + erstellen und dann Erstellen.

Azure wird jetzt:

  • Erstellen Sie eine Azure Static Web-App-Ressource in Azure
  • Aktualisieren Sie Ihr Repository, um einen GitHub Actions-Workflow hinzuzufügen, um Ihre statische Web-App bereitzustellen
  • Starten Sie einen ersten Lauf des GitHub Actions-Workflows, um Ihre SWA bereitzustellen.

Ziemlich erstaunlich, oder?

Wenn Sie sich die Ressource in Azure ansehen, sieht sie ungefähr so ​​aus:

Statische Azure-Web-Apps: Ressourcen

Wenn Sie auf die GitHub-Aktionsläufe klicken, wird Ihnen Ihre GitHub-Aktion angezeigt:

Statische Azure-Web-Apps: GitHub-Aktion

Wenn die Ausführung abgeschlossen ist, können Sie Ihre bereitgestellte statische Web-App anzeigen, indem Sie im Azure-Portal auf die URL klicken:

Statische Azure-Web-Apps: SWA bereitgestellt

Wir haben uns vom Nichts zu einer brandneuen Website in Azure entwickelt, die in wenigen Minuten über eine kontinuierliche Bereitstellung in GitHub Actions bereitgestellt wird. Das ist reibungsarm und hochwertig!

Authentifizierung

Nachdem wir nun unsere erste Bereitstellung durchgeführt haben, gehen wir noch einen Schritt weiter und fügen die Authentifizierung hinzu.

Eines der großartigen Dinge an statischen Web-Apps ist, dass Authentifizierung ist sofort verfügbar. Als Identitätsanbieter können wir zwischen GitHub, Azure Active Directory und Twitter wählen.

Lassen Sie uns mit GitHub rollen und unsere ändern website/src/pages/index.js um die Authentifizierung zu unterstützen:

import React, { useState, useEffect } from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';

/**
 * @typedef {object} UserInfo
 * @prop {"github"} identityProvider
 * @prop {string} userId
 * @prop {string} userDetails
 * @prop {string[]} userRoles
 */

/**
 * @return {UserInfo | null}
 */
function useUserInfo() {
  const [userInfo, setUserInfo] = useState(null);

  useEffect(() => {
    async function getUserInfo() {
      const response = await fetch('/.auth/me');
      const payload = await response.json();
      const { clientPrincipal } = payload;
      return clientPrincipal;
    }

    getUserInfo().then((ui) => setUserInfo(ui));
  }, []);

  return userInfo;
}

export default function Home() {
  const { siteConfig } = useDocusaurusContext();
  const userInfo = useUserInfo();

  return (
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />"
    >
      <header className={clsx('hero hero--primary', styles.heroBanner)}>
        <div className="container">
          <h1 className="hero__title">{siteConfig.title}</h1>
          <p className="hero__subtitle">{siteConfig.tagline}</p>
          <div className={styles.buttons}>
            {userInfo ? (
              <p>Hello {userInfo.userDetails}</p>
            ) : (
              <a
                className="button button--secondary button--lg"
                href="https://blog.logrocket.com/.auth/login/github"
              >
                Click here to login
              </a>
            )}
          </div>
        </div>
      </header>
    </Layout>
  );
}

Der obige Code macht Folgendes:

  • Implementiert einen React-Hook namens useUserInfo, die die ruft /.auth/me Endpunkt Ihres SWA. Das kehrt zurück null wenn nicht authentifiziert und die UserInfo wenn authentifiziert
  • Zeigt eine Link-Schaltfläche für Benutzer an, die nicht authentifiziert sind. Der Link führt zu /.auth/login/github, wodurch der GitHub-Authentifizierungsfluss ausgelöst wird
  • Zeigt für authentifizierte Benutzer die userDetails, der GitHub-Benutzername

Lassen Sie uns dies festschreiben und pushen, und wenn unser Build fertig ist, navigieren wir noch einmal zu unserer Static Web App:

Statische Azure-Web-Apps-Authentifizierung

Wenn wir zum Anmelden klicken, werden wir durch den GitHub-Authentifizierungsablauf geleitet:

Authentifizierungsablauf für statische Azure-Web-Apps

Sobald Sie autorisiert und eingewilligt haben, werden Sie zu Ihrer App weitergeleitet und sehen, dass Sie eingeloggt sind:

Statische Azure-Web-Apps: Angemeldet

Wenn wir die Devtools von Chrome öffnen, sehen wir, was von der /.auth/me Endpunkt:

Statische Azure-Web-Apps Chrome DevTools

{
  "clientPrincipal": {
    "identityProvider": "github",
    "userId": "1f5b4b7de7d445e29dd6188bcc7ee052",
    "userDetails": "johnnyreilly",
    "userRoles": ["anonymous", "authenticated"]
  }
}

Wir haben jetzt mit sehr geringem Aufwand die Authentifizierung mit Azure Static Web Apps implementiert und demonstriert. Das ist enorm!

Staging-Umgebungen

Schauen wir uns zum Schluss noch eine super coole Funktion an, die Static Web Apps standardmäßig bietet. Wenn Sie einen Blick auf die Umgebungen Registerkarte Ihres SWA sehen Sie Folgendes:

Azure Static Web-Apps-Ressourcenumgebungsportal

Inszenierung

Öffnen Sie Pull-Requests für das verknüpfte Repository, um eine Staging-Umgebung zu erstellen.

Probieren wir das aus! Wir erstellen einen neuen Zweig:

git checkout -b feat/show-me-staging

In unserer index.js, fügen wir einen beliebigen Text hinzu:

<p>I'm a staging environment!</p>

Dann werden wir unseren Branch festschreiben und auf GitHub pushen und eine Pull-Anfrage erstellen. Dadurch wird unsere GitHub-Aktion erneut ausgeführt.

Anstatt über unsere vorhandene Static Web App zu veröffentlichen, wird sie mit unseren Änderungen eine brandneue App erstellen. Außerdem wird ein Link für uns in unserem GitHub-Pull-Request angezeigt, damit wir direkt darauf zugreifen können:

Staging-Umgebung für statische Azure-Web-Apps

Dies ist das Äquivalent zu Netlify Deploy Previews, implementiert mit Azure Static Web Apps und GitHub Actions. Die Zulage für GitHub-Aktionen beträgt derzeit 2.000 Freiminuten pro Monat, im Vergleich zu Netlifys 300 Freiminuten pro Monat, sodass Sie viel weniger wahrscheinlich eine Rechnung für die Nutzung von statischen Web-Apps erhalten.

Diese Staging-Umgebung dauert nur, bis die Pull-Anforderung geschlossen wird. An diesem Punkt wird die Umgebung von der GitHub-Aktion abgerissen.

Fazit

In diesem Tutorial haben wir mithilfe von GitHub-Aktionen eine Website in einer statischen Web-App bereitgestellt und die Authentifizierung implementiert. Wir haben auch das Äquivalent von Azure zu den Bereitstellungsvorschauen von Netlify und das Einrichten von Staging-Umgebungen demonstriert.

The source: https://nguyendiep.com
Category: news

Thanks for Reading

Enjoyed this post? Share it with your networks.

Get more stuff

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Leave a Feedback!