Konfigurieren Ihrer lokalen JavaScript-Entwicklungsumgebung für Azure

Beim Erstellen von Cloudanwendungen ziehen es Entwickler in der Regel vor, Code auf Ihren lokalen Arbeitsstationen zu testen, bevor sie diesen Code in einer Cloudumgebung wie Azure bereitstellen. Die lokale Entwicklung bietet Ihnen den Vorteil einer größeren Vielfalt an Tools und einer vertrauten Umgebung.

Dieser Artikel enthält die Einrichtungsanweisungen zum Erstellen und Überprüfen einer lokalen Entwicklungsumgebung, die für JavaScript mit Azure geeignet ist.

Einmalige Abonnementerstellung

Azure-Ressourcen werden innerhalb eines Abonnements und einer Ressourcengruppe erstellt.

type	Beschreibung
Abonnement für die Testversion	Erstellen Sie ein kostenlosesTestabonnement.
Bestehendes Abonnement	Wenn Sie bereits über ein Abonnement verfügen, greifen Sie im Azure-Portal, über die Azure CLI oder die Azure SDKs für JavaScript auf das vorhandene Abonnement zu.
Mehrere Abonnements	Wenn Sie mehrere Abonnements verwalten müssen, lesen Sie hier, wie Sie eine Verwaltungsgruppe mit JavaScript erstellen.

Einmalige Softwareinstallation

Für die Azure-Entwicklung mit JavaScript auf Ihrer lokalen Arbeitsstation wird die Installation der folgenden Komponenten empfohlen:

Name/Installationsprogramm	Beschreibung
Node.js LTS	Installieren Sie die aktuelle Laufzeitumgebung mit langfristigem Support (Long-Term Support, LTS) für die Entwicklung auf lokalen Arbeitsstationen.
Visual Studio Code	Visual Studio Code bietet eine großartige JavaScript-Integrationsumgebung und -Codierungsumgebung, ist aber nicht erforderlich. Sie können einen beliebigen Code-Editor verwenden.

Azure-Hostingruntime

Wenn Sie eine Azure-Ressource als Hostingumgebung für Ihre Anwendung verwenden möchten, z. B. eine Azure-Web-App oder eine Azure Functions-Instanz, sollten Sie überprüfen, ob die Node.js-Runtimeversion Ihrer lokalen Node.js-Entwicklungsumgebung der Azure-Ressourcenruntime entspricht, die Sie verwenden möchten.

Empfohlene lokale Installationen

Die folgenden allgemeinen Installationen lokaler Arbeitsstationen werden empfohlen, um Sie bei den lokalen Entwicklungsaufgaben zu unterstützen.

Name	Beschreibung
Azure-Befehlszeilenschnittstelle	Lokale oder cloudbasierte CLI zum Erstellen und Verwenden von Azure-Ressourcen
Azure Developer CLI	Entwicklerorientiertes Befehlszeilentool zum Erstellen von Cloud-Apps im Entwicklerworkflow.
Visual Studio Code-Erweiterungen für Azure	VS Code-Erweiterungen für die IDE
Git oder Git für Windows	Befehlszeilentools für die Quellcodeverwaltung. Wenn Sie es vorziehen, können Sie ein anderes Quellcodeverwaltungstool verwenden.

Einmalkonfiguration für die Authentifizierung

Wenn Sie den gleichen Authentifizierungscode in der lokalen Entwicklung und in der Azure-Remotehostingumgebung nutzen möchten, verwenden Sie DefaultAzureCredential.

Erstellen einer Ressourcengruppe für Ihr Projekt

Azure portal

1. Öffnen Sie das Azure-Portal in einem Webbrowser.

2. Geben Sie in der Suchleiste Ressourcengruppen ein, und wählen Sie sie aus.

3. Wählen Sie + Erstellen aus.

4. Geben Sie Ihre Ressourcengruppeneinstellungen ein:

   Eigenschaft	Wert
   Subscription	Wählen Sie Ihr Abonnement aus.
   Resource group	Geben Sie ihren Ressourcengruppennamen ein. Dieser Ressourcengruppenname wird als Teil eines Ressourcen-URI verwendet, wenn Sie auf den Ressourcen-Manager (Verwaltungsebene) zugreifen. Der Name wird nicht für die Steuerung (z. B. das Erstellen einer Datenbank) oder eine Datenebene (Einfügen von Daten in eine Tabelle) verwendet.
   Region	Wählen Sie eine geografische Region für die Ressourcengruppe aus.

5. Wählen Sie " Überprüfen" und "Erstellen " aus, um mit der Überprüfung zu beginnen.

6. Wenn Validierungserfolge erfolgreich sind, wählen Sie "Erstellen" aus.

Visual Studio Code

1. Öffnen Sie die Befehlspalette, STRG + UMSCHALT + P.

2. Suchen Sie nach "Ressourcengruppe erstellen", und wählen Sie sie aus.

3. Beantworten Sie die Eingabeaufforderungen mit den folgenden Einstellungen:

   Prompt	Wert
   Wählen Sie das Abonnement aus.	Melden Sie sich bei Azure an, wenn Sie dazu aufgefordert werden. Wählen Sie ein vorhandenes Abonnement aus, oder erstellen Sie ein Azure-Konto, wenn Sie kein Abonnement haben.
   Geben Sie den Namen der neuen Ressourcengruppe ein.	Geben Sie ihren Ressourcengruppennamen ein. Dieser Ressourcengruppenname wird als Teil eines Ressourcen-URI verwendet, wenn Sie auf den Ressourcen-Manager (Verwaltungsebene) zugreifen. Der Name wird nicht für die Steuerung (z. B. das Erstellen einer Datenbank) oder eine Datenebene (Einfügen von Daten in eine Tabelle) verwendet.
   Wählen Sie einen Standort für neue Ressourcen aus.	Wählen Sie eine geografische Region für die Ressourcengruppe aus.

Azure-Befehlszeilenschnittstelle

1. Anmelden bei Azure:

   az login
   

   Schließen Sie die Authentifizierung in einem Browser ab.

2. Listen Sie Ihre Abonnementnamen und IDs auf. Kopieren Sie den Wert "SubscriptionId ", um den nächsten Befehl zu verwenden.

   az account subscription list --output table 
   

3. Legen Sie Ihr Standardabonnement fest, das von nachfolgenden Befehlen verwendet wird:

   az account set --subscription YOUR_SUBSCRIPTION_ID
   

4. Wählen Sie aus einer Liste der für Ihr Abonnement unterstützten Speicherorte aus. Kopieren Sie den Namenwert einer Region in ihrer Nähe.

   az account list-locations --output table
   

5. Verwenden Sie die folgende Azure CLI, um eine Ressourcengruppe mit Ihrem Abonnementnamen oder Ihrer ID zu erstellen:

   az group create --name "YOUR_RESOURCE_GROUP_NAME" --location YOUR_REGION
   

   Beispiel:

   az group create --name "my-azure-app" --location westus
   

Arbeiten mit Azure und den Azure SDK-Clientbibliotheken

Die Azure SDK-Bibliotheken werden für jeden Dienst einzeln bereitgestellt. Sie installieren jede Bibliothek basierend auf dem Azure-Dienst, den Sie verwenden müssen.

Für jedes neue Projekt mit Azure müssen folgende Aktionen ausgeführt werden:

• Erstellen Sie Azure-Ressourcen, und speichern Sie zugehörige Schlüssel oder die Konfiguration an einem sicheren Speicherort.
• Installieren von Azure SDK-Bibliotheken aus npm oder Yarn.
• Verwenden Sie die lokalen Anmeldeinformationen des Dienstprinzipals für die Authentifizierung beim Azure SDK, und verwenden Sie anschließend Konfigurationsinformationen für den Zugriff auf bestimmte Dienste.

Schützen von Konfigurationsinformationen

Sie haben mehrere Optionen zum Speichern von Konfigurationsinformationen:

• Azure Key Vault zum Erstellen und Verwalten von Schlüsseln für den Zugriff auf und die Verschlüsselung von Cloudressourcen, Apps und Lösungen
• Dotenv ist ein beliebtes npm-Paket zum Lesen von Umgebungsvariablen aus einer Datei vom Typ .env. Hinzufügen der .env-Datei zur .gitignore-Datei, damit die .env-Datei nicht in die Quellcodeverwaltung eingecheckt wird. Hier erfahren Sie mehr über Umgebungsvariablen in Web-Apps für Azure.

Erstellen von Umgebungsvariablen für die Azure-Bibliotheken

Zum Verwenden der Azure-Einstellungen, die von den Azure SDK-Bibliotheken für den Zugriff auf die Azure-Cloud benötigt werden, legen Sie die gängigsten Werte auf Umgebungsvariablen fest. Mit den folgenden Befehlen werden die Umgebungsvariablen für die lokale Arbeitsstation festgelegt.

In den folgenden Beispielen ist die Client-ID die Dienstprinzipal-ID und das Dienstprinzipalgeheimnis.

Bash

AZURE_SUBSCRIPTION_ID="<REPLACE-WITH-YOUR-AZURE-SUBSCRIPTION-ID>"
AZURE_TENANT_ID="<REPLACE-WITH-YOUR-AZURE-TENANT-ID>"
AZURE_CLIENT_ID="<REPLACE-WITH-YOUR-AZURE-CLIENT-ID>"
AZURE_CLIENT_SECRET="<REPLACE-WITH-YOUR-AZURE-CLIENT-SECRET>"

cmd

set AZURE_SUBSCRIPTION_ID="<REPLACE-WITH-YOUR-AZURE-SUBSCRIPTION-ID>"
set AZURE_TENANT_ID="<REPLACE-WITH-YOUR-AZURE-TENANT-ID>"
set AZURE_CLIENT_ID="<REPLACE-WITH-YOUR-AZURE-CLIENT-ID>"
set AZURE_CLIENT_SECRET="<REPLACE-WITH-YOUR-AZURE-CLIENT-SECRET>"

Ersetzen Sie die in diesen Befehlen angezeigten Werte durch die Werte Ihres spezifischen Dienstprinzipals.

Erstellen einer Datei vom Typ .env

Ein weiterer gebräuchlicher Mechanismus ist die Verwendung des NPM-Pakets DOTENV, um eine .env-Datei für diese Einstellungen zu erstellen. Wenn Sie eine .env-Datei verwenden möchten, achten Sie darauf, die Datei nicht in die Quellcodeverwaltung einzuchecken. Das Hinzufügen der .env-Datei zur .ignore-Datei von Git ist die Standardmethode, um sicherzustellen, dass diese Einstellungen in die Quellcodeverwaltung eingecheckt werden.

NPM-Pakete installieren

Wir empfehlen, für jedes Projekt immer einen separaten Order und eine eigene package.json-Datei zu erstellen. Dazu gehen Sie folgendermaßen vor:

1. Öffnen Sie ein Terminal, eine Eingabeaufforderung oder eine Bash-Shell, und erstellen Sie einen neuen Ordner für das Projekt. Wechseln Sie dann in den neuen Ordner.

   mkdir MY-NEW-PROJECT && cd MY-NEW-PROJECT
   

2. Initialisieren Sie die Paketdatei:

   npm init -y
   

   Dadurch wird die Datei „package.js“ erstellt, und die Mindesteigenschaften werden initialisiert.

3. Installieren Sie die benötigten Azure SDK-Bibliotheken wie im folgenden Beispiel:

   npm install @azure/ai-text-analytics@5.0.0
   

Verwenden der Quellcodeverwaltung mit Visual Studio Code

Wir empfehlen, sich anzugewöhnen, bei jedem Start eines Projekts ein Quellcodeverwaltungs-Repository zu erstellen. Dieser Schritt kann über Visual Studio Code ausgeführt werden.

1. Klicken Sie in Visual Studio Code auf das Symbol für die Quellcodeverwaltung, um den Explorer für die Quellcodeverwaltung zu öffnen. Klicken Sie anschließend auf Repository initialisieren, um ein lokales Git-Repository zu initialisieren:

   

2. Wenn Sie das Repository initialisiert haben und Dateien zum Speichern in der Quellcodeverwaltung besitzen, geben Sie die Meldung Initial commit ein, und wählen Sie das Häkchen aus, um den ersten Commit Ihrer Quelldateien zu erstellen.

   

3. Erstellen Sie ein neues Repository auf GitHub oder in Azure DevOps, und kopieren Sie die Repository-URL für den nächsten Schritt.

4. Verwenden Sie im integrierten Visual Studio-Terminal den folgenden Git-Befehl, um Ihr Remoterepository ihrem lokalen Repository hinzuzufügen. Ersetzen Sie YOUR-ALIAS und YOUR-REPOSITORY durch Ihre eigenen Werte.

   git remote add origin https://github.com/YOUR-ALIAS/YOUR-REPOSITORY
   

Visual Studio Code umfasst eine Reihe integrierter Git-Features. Weitere Informationen finden Sie unter Verwenden der Versionskontrolle in VS Code.

Nächste Schritte

• Erstellen und Verwenden eines Dienstprinzipals
• Authentifizieren mit den Azure-Modulen für Node.js