Tutorial: Bereitstellen von GitLab-Repositorys auf Azure Static Web Apps

Azure Static Web Apps verfügt über flexible Bereitstellungsoptionen, die die Zusammenarbeit mit verschiedenen Anbietern ermöglichen. In diesem Artikel stellen Sie eine in GitLab gehostete Webanwendung für Azure Static Web Apps bereit.

In diesem Tutorial lernen Sie Folgendes:

  • Importieren eines Repositorys in GitLab
  • Erstellen einer statischen Web-App
  • Konfigurieren des GitLab-Repositorys für die Bereitstellung in Azure Static Web Apps

Voraussetzungen

Erstellen eines Repositorys

In diesem Artikel wird ein GitHub Repository als Quelle verwendet, um Code in ein GitLab-Repository zu importieren.

  1. Anmelden bei Ihrem GitLab-Konto und Wechseln zu https://gitlab.com/projects/new#import_project

  2. Wählen Sie Repo nach URL aus.

  3. Geben Sie im Feld Git-Repository-URL die Repository-URL für Ihre Frameworkauswahl ein.

  4. Geben Sie im Feld Project slug (Projekt-Slug) die Zeichenfolge my-first-static-web-app ein.

  5. Wählen Sie Projekt erstellen aus, und warten Sie einen Moment, während Ihr Repository eingerichtet wird.

Erstellen einer statischen Web-App

Nachdem das Repository nun erstellt wurde, können Sie im Azure-Portal eine statische Web-App erstellen.

  1. Öffnen Sie das Azure-Portal.

  2. Klicken Sie auf Ressource erstellen.

  3. Suchen Sie nach Static Web Apps.

  4. Klicken Sie auf statische Web-Apps.

  5. Klicken Sie auf Erstellen.

  6. Beginnen Sie im Abschnitt Grundlagen mit dem Konfigurieren Ihrer App.

    Einstellung Wert
    Azure-Abonnement Wählen Sie Ihr Azure-Abonnement.
    Ressourcengruppe Wählen Sie den Link Neu erstellen aus, und geben Sie static-web-apps-gitlab ein.
    Name Geben Sie my-first-static-web-app ein.
    Plantyp Wählen Sie Free aus.
    Quelle Wählen Sie Andere (Other) aus.

  7. Klicken Sie auf Überprüfen + erstellen.

  8. Klicken Sie auf Erstellen.

  9. Wählen Sie Zu Ressource wechseln aus.

  10. Wählen Sie Bereitstellungstoken verwalten aus.

  11. Kopieren Sie den Wert des Bereitstellungstokens, und fügen Sie ihn zur späteren Verwendung in einem Editor ein.

  12. Wählen Sie im Fenster Bereitstellungstoken verwalten die Schaltfläche Schließen aus.

Erstellen der Pipelineaufgabe in GitLab

Nachdem Sie nun über Ihr Bereitstellungstoken verfügen, fügen Sie als Nächstes eine Workflowtask für das Erstellen und Bereitstellen Ihrer Site während Ihrer Änderungen hinzu.

Hinzufügen eines Bereitstellungstokens

Wenn Sie die folgenden Schritte ausführen, stellen Sie sicher, dass Sie * für den Abschnitt mit den Umgebungen auswählen. Möglicherweise wird der Standardwert all angezeigt, aber Sie müssen * manuell im Dropdownmenü auswählen.

  1. Wechseln Sie zum Repository in GitLab.

  2. Wählen Sie Settingsaus.

  3. Wählen Sie CI/CD aus.

  4. Wählen Sie neben dem Abschnitt Variablen die Option Erweitern aus.

  5. Wählen Sie Variable hinzufügen aus.

  6. Geben Sie im Feld Schlüssel die Zeichenfolge DEPLOYMENT_TOKEN ein.

  7. Fügen Sie im Feld Wert den Wert des Bereitstellungstokens ein, den Sie in einem vorherigen Schritt notiert haben.

  8. Wählen Sie Variable hinzufügen aus.

Datei hinzufügen

  1. Kehren Sie zum Hauptbildschirm Ihres Repositorys in GitLab zurück.

  2. Klicken Sie auf die Schaltfläche Edit, und wählen Sie Web IDE aus.

  3. Stellen Sie sicher, dass in der Dropdownliste der Branches der Mainbranch ausgewählt ist.

  4. Erstellen Sie eine neue Datei namens .gitlab-ci.yml im Stammverzeichnis des Repositorys. (Stellen Sie sicher, dass die Dateierweiterung .yml lautet.)

  5. Geben Sie den folgenden YAML-Code in die Datei ein.

    variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/src'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

    Die folgenden Konfigurationseigenschaften werden in der Datei .gitlab-ci.yml verwendet, um Ihre statische Web-App zu konfigurieren.

    Die Variable $CI_PROJECT_DIR wird während des Buildprozesses dem Speicherort des Repositorystamms zugeordnet.

    Eigenschaft BESCHREIBUNG Beispiel Erforderlich
    APP_PATH Speicherort Ihres Anwendungscodes. Geben Sie $CI_PROJECT_DIR/ ein, wenn sich Ihr Quellcode für die Anwendung im Stammverzeichnis des Repositorys befindet, oder $CI_PROJECT_DIR/app, wenn Ihr Anwendungscode in einem Ordner mit dem Namen app enthalten ist. Ja
    API_PATH Speicherort Ihres Azure Functions-Codes. Geben Sie $CI_PROJECT_DIR/api ein, wenn sich Ihr App-Code in einem Ordner mit dem Namen api befindet. Nein
    OUTPUT_PATH Speicherort des Ordners für die Buildausgabe relativ zu APP_PATH. Wenn sich Ihr Quellcode für die Anwendung unter $CI_PROJECT_DIR/app befindet und vom Buildskript Dateien im Ordner $CI_PROJECT_DIR/app/build ausgegeben werden, legen Sie $CI_PROJECT_DIR/app/build als Wert für OUTPUT_PATH fest. Nein
    API_TOKEN API-Token für die Bereitstellung API_TOKEN: $DEPLOYMENT_TOKEN Ja

  6. Committen Sie die Änderungen am Mainbranch, und schließen Sie die Web-IDE.

  7. Kehren Sie zu Ihrer Site zurück, und wählen Sie die Menüoptionen Settings>CI/CD>General Pipelines aus, um den Fortschritt Ihrer Bereitstellung anzuzeigen.

Nach Abschluss der Bereitstellung können Sie Ihre Website anzeigen.

Anzeigen der Website

Für die Bereitstellung einer statischen App gelten zwei Aspekte. Im ersten Schritt werden die zugrunde liegenden Azure-Ressourcen erstellt, aus denen Ihre App besteht. Der zweite Schritt besteht aus einem GitLab-Workflow, mit dem Ihre Anwendung erstellt und veröffentlicht wird.

Bevor Sie zu Ihrer neuen statischen Website navigieren können, muss zuvor der Buildvorgang für die Bereitstellung abgeschlossen sein.

Im Übersichtsfenster von Azure Static Web Apps werden einige Links angezeigt, die Ihnen als Hilfe bei der Interaktion mit Ihrer Web-App dienen.

  1. Kehren Sie zu Ihrer statischen Web-App im Azure-Portal zurück.

  2. Wechseln Sie zum Fenster Übersicht.

  3. Wählen Sie den Link unter der Bezeichnung URL aus. Ihre Website wird auf einer neuen Registerkarte geladen.

Bereinigen von Ressourcen

Wenn Sie diese Anwendung nicht weiter verwenden möchten, können Sie die Azure Static Web Apps-Instanz und alle zugehörigen Dienste löschen, indem Sie die Ressourcengruppe entfernen.

  1. Wählen Sie im Abschnitt Übersicht die Ressourcengruppe static-web-apps-gitlab aus.

  2. Wählen Sie oben in der Übersicht der Ressourcengruppe die Option Ressourcengruppe löschen aus.

  3. Geben Sie im Bestätigungsdialogfeld Möchten Sie „static-web-apps-gitlab“ löschen? den Ressourcengruppennamen static-web-apps-gitlab ein.

  4. Klicken Sie auf Löschen.

Der Vorgang zum Löschen der Ressourcengruppe kann einige Minuten dauern.

Nächste Schritte

Hinzufügen einer API zu Azure Static Web Apps (Vorschauversion) mit Azure Functions

  • Last updated on