Tutorial: Veröffentlichen einer VuePress-Website in Azure Static Web Apps

In diesem Artikel wird gezeigt, wie Sie eine VuePress-Webanwendung erstellen und in Azure Static Web Apps bereitstellen. Das Ergebnis ist eine neue Azure Static Web Apps-Anwendung mit der zugehörigen GitHub Actions-Instanz, mit der Sie steuern können, wie die App erstellt und veröffentlicht wird.

In diesem Tutorial lernen Sie Folgendes:

  • Erstellen einer VuePress-App
  • Einrichten einer Azure Static Web Apps-Instanz
  • Bereitstellen der VuePress-App in Azure

Voraussetzungen

Erstellen einer VuePress-App

Erstellen Sie eine VuePress-App über die Befehlszeilenschnittstelle (Command Line Interface, CLI):

  1. Erstellen Sie einen neuen Ordner für die VuePress-App.

    mkdir static-site
    
  2. Fügen Sie dem Ordner eine Datei vom Typ README.md hinzu.

    echo '# Hello From VuePress' > README.md
    
  3. Initialisieren Sie die Datei package.json.

    npm init -y
    
  4. Fügen Sie VuePress als devDependency hinzu.

    npm install --save-dev vuepress
    
  5. Öffnen Sie die Datei package.json in einem Text-Editor, und fügen Sie dem Abschnitt scripts einen Buildbefehl hinzu.

    ...
    "scripts": {
        "build": "vuepress build"
    }
    ...
    
  6. Erstellen Sie eine Datei vom Typ .gitignore, um den Ordner node_modules auszuschließen.

    echo 'node_modules' > .gitignore
    
  7. Initialisieren Sie ein Git-Repository.

     git init
     git add -A
     git commit -m "initial commit"
    

Übertragen Ihrer Anwendung auf GitHub

Sie benötigen ein Repository auf GitHub, um eine Verbindung mit Azure Static Web Apps herzustellen. In den folgenden Schritten wird veranschaulicht, wie Sie ein Repository für Ihre Website erstellen.

  1. Erstellen Sie über https://github.com/new ein leeres GitHub-Repository mit dem Namen vuepress-static-app. (Erstellen Sie keine README-Datei.)

  2. Fügen Sie das GitHub-Repository als Remoteressource zu Ihrem lokalen Repository hinzu. Fügen Sie unbedingt den GitHub-Benutzernamen anstelle des Platzhalters <YOUR_USER_NAME> im folgenden Befehl hinzu:

    git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
    
  3. Übertragen Sie Ihr lokales Repository auf GitHub.

    git push --set-upstream origin main
    

Bereitstellen Ihrer Web-App

In den folgenden Schritten wird gezeigt, wie Sie eine neue statische Website-App erstellen und in einer Produktionsumgebung bereitstellen.

Erstellen der Anwendung

  1. Navigieren Sie zum Azure-Portal.

  2. Wählen Sie Ressource erstellen aus.

  3. Suchen Sie nach Static Web Apps.

  4. Wählen Sie Statische Web-Apps aus.

  5. Klicken Sie auf Erstellen

  6. Geben Sie auf der Registerkarte Grundlagen die folgenden Werte ein.

    Eigenschaft Wert
    Abonnement Den Namen Ihres Azure-Abonnements
    Ressourcengruppe my-vuepress-group
    Name vuepress-static-app
    Plantyp Free
    Region für Azure Functions-API und Stagingumgebungen Wählen Sie eine Region aus, die in Ihrer Nähe liegt.
    Quelle GitHub
  7. Wählen Sie Mit GitHub anmelden aus, und führen Sie die Authentifizierung mit GitHub durch.

  8. Geben Sie die folgenden GitHub-Werte ein.

    Eigenschaft Wert
    Organisation Wählen Sie die gewünschte GitHub-Organisation aus.
    Repository Wählen Sie vuepress-static-app aus.
    Branch Wählen Sie main aus.
  9. Wählen Sie im Abschnitt Builddetails in der Dropdownliste Buildvoreinstellungen die Option VuePress aus, und übernehmen Sie die Standardwerte.

Überprüfen und Erstellen

  1. Klicken Sie auf die Schaltfläche Überprüfen + Erstellen, um sicherzustellen, dass alle Details stimmen.

  2. Wählen Sie Erstellen aus, um mit der Erstellung der statischen App Service-Web-App zu beginnen und eine GitHub-Aktion für die Bereitstellung anzugeben.

  3. Wenn die Bereitstellung abgeschlossen ist, klicken Sie auf Zu Ressource wechseln.

  4. Klicken Sie auf dem Ressourcenbildschirm auf den Link URL, um Ihre bereitgestellte Anwendung zu öffnen. Sie müssen ggf. ein bis zwei Minuten warten, bis der GitHub Actions-Vorgang abgeschlossen ist.

    Bereitgestellte Anwendung

Bereinigen von Ressourcen

Wenn Sie diese Anwendung nicht weiter nutzen möchten, können Sie die Azure Static Web Apps-Ressource mit den folgenden Schritten löschen:

  1. Öffnen Sie das Azure-Portal.
  2. Suchen Sie über die obere Suchleiste anhand des zuvor angegebenen Namens nach Ihrer Anwendung.
  3. Klicken Sie auf die App.
  4. Klicken Sie auf die Schaltfläche Löschen.
  5. Klicken Sie zum Bestätigen des Löschvorgangs auf Ja.

Nächste Schritte