Bereitstellen von Node.js in Azure App Service

Einführung

In diesem Leitfaden wird erläutert, wie GitHub Actions zum Erstellen, Testen und Bereitstellen eines Node.js-Projekts für Azure App Service verwendet wird.

Hinweis: Wenn deine GitHub Actions-Workflows auf Ressourcen eines Cloudanbieters zugreifen müssen, der OpenID Connect (OIDC) unterstützt, kannst du deine Workflows so konfigurieren, dass die Authentifizierung direkt beim Cloudanbieter erfolgt. Dadurch musst du diese Anmeldeinformationen nicht mehr als langlebige Geheimnisse speichern und profitierst zudem von weiteren Sicherheitsvorteilen. Weitere Informationen findest du unter Informationen zur Sicherheitshärtung mit OpenID Connect. und Konfigurieren von OpenID Connect in Azure.

Voraussetzungen

Bevor du deinen GitHub Actions-Workflow erstellst, musst du die folgenden Einrichtungsschritte ausführen:

Erstellen eines Azure App Service-Plans

Du kannst beispielsweise die Azure CLI verwenden, um einen neuen App Service-Plan zu erstellen:
Bash
```
az appservice plan create \
   --resource-group MY_RESOURCE_GROUP \
   --name MY_APP_SERVICE_PLAN \
   --is-linux
```
```
az appservice plan create \
   --resource-group MY_RESOURCE_GROUP \
   --name MY_APP_SERVICE_PLAN \
   --is-linux
```
Ersetze MY_RESOURCE_GROUP im obigen Befehl durch deine bereits vorhandene Azure-Ressourcengruppe und MY_APP_SERVICE_PLAN durch einen neuen Namen für den App Service-Plan.

Weitere Informationen zur Verwendung der Azure-Befehlszeilenschnittstelle findest du in der Azure-Dokumentation:
- Informationen zur Authentifizierung findest du unter Anmelden mit Azure CLI.
- Informationen zu Erstellen einer neuen Ressourcengruppe findest du unter az group.

Erstellen einer Web-App

Du kannst beispielsweise die Azure CLI verwenden, um eine Azure App Service-Web-App mit einer Node.js-Runtime zu erstellen:

Bash

az webapp create \
    --name MY_WEBAPP_NAME \
    --plan MY_APP_SERVICE_PLAN \
    --resource-group MY_RESOURCE_GROUP \
    --runtime "NODE|14-lts"

az webapp create \
    --name MY_WEBAPP_NAME \
    --plan MY_APP_SERVICE_PLAN \
    --resource-group MY_RESOURCE_GROUP \
    --runtime "NODE|14-lts"

Ersetze im obigen Befehl die Parameter durch eigene Werte, wobei MY_WEBAPP_NAME ein neuer Name für die Web-App ist.

Konfiguriere ein Azure-Veröffentlichungsprofil, und erstelle ein AZURE_WEBAPP_PUBLISH_PROFILE-Geheimnis.

Generiere Anmeldeinformationen für deine Azure-Bereitstellung mithilfe eines Veröffentlichungsprofils. Weitere Informationen findest du unter Generieren von Anmeldeinformationen für die Bereitstellung in der Azure-Dokumentation.

Erstelle in deinem GitHub-Repository ein Geheimnis namens AZURE_WEBAPP_PUBLISH_PROFILE, das den Inhalt des Veröffentlichungsprofils enthält. Weitere Informationen zum Erstellen von Geheimnissen findest du unter Verwenden von Geheimnissen in GitHub-Aktionen.
Konfiguriere optional auch eine Bereitstellungsumgebung. Umgebungen werden verwendet, um ein allgemeines Bereitstellungsziel wie production, staging oder development zu beschreiben. Wenn ein GitHub Actions-Workflow in einer Umgebung bereitgestellt wird, wird die Umgebung auf der Hauptseite des Repositorys angezeigt. Du kannst Umgebungen verwenden, um die Genehmigung für die Fortsetzung eines Auftrags anzufordern, einzuschränken, welche Branches einen Workflow auslösen können, Bereitstellungen mit benutzerdefinierten Bereitstellungsschutzregeln zu schützen oder den Zugriff auf Geheimnisse zu beschränken. Weitere Informationen zum Erstellen von Umgebungen findest du unter Verwenden von Umgebungen für die Bereitstellung.

Erstellen des Workflows

Nachdem die Voraussetzungen erfüllt sind, kannst du mit dem Erstellen des Workflows fortfahren.

Der folgende Beispielworkflow veranschaulicht, wie ein Node.js-Projekt erstellt, getestet und in Azure App Service bereitgestellt wird, wenn ein Push zum main-Branch vorhanden ist.

Stelle sicher, dass du AZURE_WEBAPP_NAME im Workflowschlüssel env auf den Namen der von dir erstellten Web-App festgelegt hast. Wenn der Pfad zum Projekt nicht der Repositorystamm ist, ändere AZURE_WEBAPP_PACKAGE_PATH in deinen Projektpfad. Wenn du eine andere Node.js-Version als 10.x verwendest, ändere NODE_VERSION in die von dir verwendete Version.

Wenn du eine Bereitstellungsumgebung konfiguriert hast, ändere den Wert environment in den Namen deiner Umgebung. Wenn du keine Umgebung konfiguriert hast oder wenn sich dein Workflow in einem privaten Repository befindet und du GitHub Enterprise Cloud nicht verwendest, lösche den environment-Schlüssel.

YAML

# Dieser Workflow verwendet Aktionen, die nicht von GitHub zertifiziert sind.
# Sie werden von einem Drittanbieter bereitgestellt und unterliegen
# separaten Nutzungsbedingungen, Datenschutzbestimmungen und Support
# Onlinedokumentation.

# GitHub empfiehlt, Aktionen an einen Commit-SHA anzuheften.
# Um eine neuere Version zu erhalten, musst du den SHA aktualisieren.
# Du kannst auch auf ein Tag oder einen Branch verweisen, aber die Aktion kann sich ohne Vorwarnung ändern.

on:
  push:
    branches:
      - main

env:
  AZURE_WEBAPP_NAME: MY_WEBAPP_NAME   # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: '.'      # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: '14.x'                # set this to the node version to use

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4

    - name: Set up Node.js
      uses: actions/setup-node@v4
      with:
        node-version: ${{ env.NODE_VERSION }}
        cache: 'npm'

    - name: npm install, build, and test
      run: |
        npm install
        npm run build --if-present
        npm run test --if-present
    - name: Upload artifact for deployment job
      uses: actions/upload-artifact@v4
      with:
        name: node-app
        path: .

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
    - name: Download artifact from build job
      uses: actions/download-artifact@v4
      with:
        name: node-app

    - name: 'Deploy to Azure WebApp'
      id: deploy-to-webapp
      uses: azure/webapps-deploy@85270a1854658d167ab239bce43949edb336fa7c
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

# Dieser Workflow verwendet Aktionen, die nicht von GitHub zertifiziert sind.
# Sie werden von einem Drittanbieter bereitgestellt und unterliegen
# separaten Nutzungsbedingungen, Datenschutzbestimmungen und Support
# Onlinedokumentation.

# GitHub empfiehlt, Aktionen an einen Commit-SHA anzuheften.
# Um eine neuere Version zu erhalten, musst du den SHA aktualisieren.
# Du kannst auch auf ein Tag oder einen Branch verweisen, aber die Aktion kann sich ohne Vorwarnung ändern.

on:
  push:
    branches:
      - main

env:
  AZURE_WEBAPP_NAME: MY_WEBAPP_NAME   # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: '.'      # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: '14.x'                # set this to the node version to use

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4

    - name: Set up Node.js
      uses: actions/setup-node@v4
      with:
        node-version: ${{ env.NODE_VERSION }}
        cache: 'npm'

    - name: npm install, build, and test
      run: |
        npm install
        npm run build --if-present
        npm run test --if-present
    - name: Upload artifact for deployment job
      uses: actions/upload-artifact@v4
      with:
        name: node-app
        path: .

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
    - name: Download artifact from build job
      uses: actions/download-artifact@v4
      with:
        name: node-app

    - name: 'Deploy to Azure WebApp'
      id: deploy-to-webapp
      uses: azure/webapps-deploy@85270a1854658d167ab239bce43949edb336fa7c
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

Zusätzliche Ressourcen

Die folgenden Ressourcen können ebenfalls nützlich sein:

Den ursprünglichen Startworkflow findest du unter azure-webapps-node.yml im GitHub Actions-Repository starter-workflows.
Die zum Bereitstellen der Web-App verwendete Aktion ist die offizielle Azure-Aktion Azure/webapps-deploy.
Weitere Beispiele für GitHub Action-Workflows, die in Azure bereitgestellt werden können, findest du im Repository actions-workflow-samples.
Der Schnellstart Erstellen einer Node.js Web-App in Azure in der Azure-Web-App-Dokumentation veranschaulicht die Verwendung von Visual Studio Code mit der Azure App Service-Erweiterung.

Bereitstellen von Node.js in Azure App Service

In diesem Artikel

Einführung

Voraussetzungen

Erstellen des Workflows

Zusätzliche Ressourcen