Übung: Einrichten und Kennenlernen des Beispielprojekts

  • 5 Minuten

In dieser Lerneinheit rufen Sie den Code der vorhandenen Anwendung von GitHub ab, bereiten den Code vor und richten Ihre Entwicklungsumgebung ein.

Abrufen und Vorbereiten des Codes

  1. Klonen Sie das Coderepository in einem Bash-Terminal.

    git clone https://github.com/MicrosoftDocs/mslearn-module-shifting-nodejs-express-apis-to-serverless learn-functions

  2. Wechseln Sie zum Coderepositoryverzeichnis.

    cd learn-functions

  3. Installieren Sie die npm-Paketabhängigkeiten.

    npm install

  4. Erstellen Sie den Node.js Express- und den Angular-Code.

    npm run full:build

Grundlegendes zur Anwendungsstruktur

Bei der Beispielanwendung handelt es sich um eine herkömmliche Node.js- und Express-API mit vier Methoden für die folgenden Endpunkte:

Methode Routenendpunkt
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

Öffnen Sie das Projekt in Visual Studio Code, und öffnen Sie den Ordner server, um die Struktur der API zu erkunden.

server
 | - data
 | | - vacations.json
 | - models
 | | - vacation.model.ts
 | - routes
 | | - index.ts            👈 1. Entry point
 | | - vacation.routes.ts  👈 2. The vacation routes
 | - services
 | | - index.ts
 | | - vacation.service.ts 👈 3. The logic and data 
 | - index.ts
 | - server.ts             👈 The Express server
 | - tsconfig.json
  1. Die Datei server/index.ts ist der Einstiegspunkt, der den Code der Datei server.ts ausführt, um den Express-Server zu starten.
  2. Anschließend werden die Routen (z. B. /vacations) aus dem Ordner /routes geladen.
  3. Die Routen führen den entsprechenden Code im Ordner /services aus. Die Konfiguration des Datenspeichers wird in der Datei vacation.service.ts definiert.

Die Angular-Client-App stellt eine HTTP GET-Anforderung an die /api/vacations-Route und die Route in routes/vacation.routes.ts ruft die Datenlogik in der services/vacation.service.ts-Datei auf, um die Urlaube zu erhalten.

Proxykonfiguration

Die Angular-Anwendung muss Anforderungen an die Node.js Express-API stellen können. Die Angular-Anwendung verwendet einen Proxy, um Anforderungen an den Express-Server weiterzuleiten. Durch das Einrichten eines Proxys kann der Browser den Express-Server suchen. Öffnen Sie proxy.conf.json, und beachten Sie, dass der Port auf 7070 festgelegt ist, den Port der Express-App.

{
  "/api": {
    "target": "http://localhost:7070",
    "secure": false
  }
}