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

• Ein Azure-Konto mit einem aktiven Abonnement. Falls Sie über keins verfügen, können Sie ein kostenloses Konto erstellen.
• Ein GitHub-Konto. Falls Sie über keins verfügen, können Sie ein kostenloses Konto erstellen.
• Ein Git-Setup installiert. Falls Sie keines haben, können Sie Git installieren.
• Installation von Node.js

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 Static 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 die Region aus, die Ihnen am nächsten ist.
   Quelle	GitHub

7. Wählen Sie Mit GitHub anmelden aus, und authentifizieren Sie sich bei GitHub.

8. Geben Sie die folgenden GitHub-Werte ein.

   Eigenschaft	Wert
   Organisation	Wählen Sie Ihre gewünschte GitHub-Organisation aus.
   Repository	Wählen Sie vuepress-static-app aus.
   Branch	Wählen Sie main aus.

   Hinweis

   Wenn Sie keine Repositorys sehen, müssen Sie möglicherweise Azure Static Web Apps auf GitHub autorisieren. Navigieren Sie zu Ihrem GitHub-Repository, wechseln Sie zu Einstellungen > Anwendungen > Autorisierte OAuth-Apps, und wählen Sie Azure Static Web Apps und dann Zuweisen aus. Bei Organisationsrepositorys müssen Sie Besitzer der Organisation sein, um die Berechtigungen erteilen zu können.

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. Wählen Sie Überprüfen und erstellen aus, um sicherzustellen, dass alle Details stimmen.

2. Klicken Sie auf Erstellen, um mit der Erstellung der statischen App Service-Web-App zu beginnen und einen GitHub Actions-Vorgang für die Bereitstellung anzugeben.

3. Wählen Sie nach Abschluss der Bereitstellung die Option Zu Ressource wechseln aus.

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

   

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

Hinzufügen einer benutzerdefinierten Domäne