Bereitstellen einer Webanwendung auf AWS Elastic Beanstalk

LEITFADEN FÜR DIE ERSTEN SCHRITTE

Modul 1: Erstellen einer Webanwendung

In diesem Modul werden wir eine NodeJS-Webanwendung erstellen und sie lokal ausführen.

Einführung

Wir werden eine nicht-containerisierte Anwendung erstellen, die wir in der Cloud bereitstellen. In diesem Beispiel werden wir NodeJS verwenden, um eine Webanwendung zu erstellen.

Bei der Webanwendung handelt es sich um einen einfachen Webapplikationsserver, der statische HTML-Dateien bereitstellt und auch einen REST-API-Endpunkt enthält. Der Schwerpunkt dieses Leitfadens liegt nicht darin, Ihnen beizubringen, wie man Webanwendungen erstellt. Sie können also gerne die Beispielanwendung verwenden oder Ihre eigene erstellen. Dieser Leitfaden konzentriert sich zwar auf die Verwendung von NodeJS, aber Sie können eine ähnliche Webanwendung auch mit anderen von Elastic Beanstalk unterstützten Programmiersprachen erstellen, z. B. Java, .NET, NodeJS, PHP, Ruby, Python, Go und Docker.

Sie können dies auf Ihrem lokalen Computer oder in einer AWS-Cloud9-Umgebung implementieren.

Das werden Sie lernen

  • Entwicklung einer einfacher NodeJS-Webanwendung, die eine HTML-Datei bedient und eine einfache REST-API hat
  • Die Anwendung lokal ausführen

 Benötigte Zeit

10 Minuten

 Voraussetzungen für das Modul

  • AWS-Konto mit Administratorzugriff**
  • Empfohlener Browser: aktuelle Version von Chrome oder Firefox

[**]Innerhalb der letzten 24 Stunden erstellte Konten haben möglicherweise noch keinen Zugriff auf alle für dieses Tutorial erforderlichen Services.

Implementierung

Erstellen der Client-Anwendung

Der erste Schritt besteht darin, ein neues Verzeichnis für unsere Anwendung zu erstellen.

mkdir my_webapp
cd my_webapp

Dann können Sie das NodeJS-Projekt initialisieren. Dadurch wird die Datei package.json erstellt, die alle Definitionen Ihrer NodeJS-Anwendung enthält.

npm init -y

Express-Anwendung erstellen

Wir werden Express als unser Webanwendungs-Framework verwenden. Um es zu verwenden, müssen wir Express als eine Abhängigkeit in unserem NodeJS-Projekt installieren.

npm install express

Nachdem Sie diesen Befehl ausgeführt haben, wird die Abhängigkeit in der Datei package.json angezeigt. Außerdem werden das Verzeichnis node_modules und die Dateien package-lock.json erstellt.

Nun können Sie eine neue Datei namens app.js erstellen. Diese Datei enthält die Geschäftslogik für unseren NodeJS-Express-Server.

Jetzt können wir mit dem Hinzufügen von Code beginnen. Als Erstes müssen wir die Abhängigkeiten für die Anwendung hinzufügen - in diesem Fall Express, um die Verwendung des zuvor installierten Moduls zu ermöglichen, und dann den Code zum Starten des Webservers hinzufügen. Wir geben an, dass der Webserver Port 8080 verwenden soll, da Elastic Beanstalk diesen standardmäßig verwendet.

var express = require('express');
var app = express();
var fs = require('fs');
var port = 8080;

app.listen(port, function() {
  console.log('Server running at http://127.0.0.1:', port);
});

Wir können unsere Anwendung jetzt starten, aber sie wird noch nichts tun, da wir noch keinen Code zur Verarbeitung von Anfragen definiert haben.

Eine REST-API erstellen

Wir werden nun Code hinzufügen, um eine Antwort für einen HTTP-REST-API-Aufruf zu liefern. Um unseren ersten API-Aufruf zu erstellen, fügen Sie den folgenden Code zwischen der Port-Definition und der Stelle, an der wir den Server starten, ein.

var express = require('express');
var app = express();
var fs = require('fs');
var port = 8080;

// New code
app.get('/test', function (req, res) {
    res.send('the REST endpoint test run!');
});


app.listen(port, function() {
  console.log('Server running at http://127.0.0.1:%s', port);
});

Dies dient nur zur Veranschaulichung, wie der /test-Endpunkt mit unserem Code verbunden wird. Sie können eine andere Antwort oder einen Code hinzufügen, der etwas Bestimmtes tut, aber das liegt außerhalb des Rahmens dieser Anleitung.

HTML-Inhalt anbieten

Unsere Express-NodeJS-Anwendung kann auch eine statische Webseite bedienen. Wir müssen eine HTML-Seite erstellen, die wir als Beispiel verwenden können, also erstellen wir eine Datei namens index.html.

Fügen Sie in diese Datei den folgenden HTML-Code mit einem Link zum REST-Endpunkt ein, den wir zuvor erstellt haben, um zu zeigen, wie er mit dem Backend verbunden ist.

<html>
    <head>
        <title>Elastic Beanstalk App</title>
    </head>

    <body>
        <h1>Welcome to the demo for ElasticBeanstalk</h1>
        <a href="/test">Call the test API</a>
    </body>
</html>

Um diese HTML-Seite von unserem Express-Server bereitzustellen, müssen wir noch etwas Code hinzufügen, um den Pfad / zu rendern, wenn er aufgerufen wird. Fügen Sie dazu den folgenden Code oberhalb des /test-Aufrufs ein:

app.get('/', function (req, res) {
    html = fs.readFileSync('index.html');
    res.writeHead(200);
    res.write(html);
    res.end();
});

Dieser Code stellt die Datei index.html bereit, wenn eine Anfrage für das Stammverzeichnis der Anwendung (/) gestellt wird.

Den Code lokal ausführen

Wir sind nun bereit, unsere Anwendung auszuführen und zu testen, ob sie lokal funktioniert. Zu diesem Zweck werden wir package.json mit einem Skript aktualisieren, um die Ausführung zu erleichtern. Ersetzen Sie in der Datei package.json den Abschnitt scripts durch:

"scripts": {
    "start": "node app.js"
  },

Nun können Sie Ihr Terminal aufrufen und folgendes ausführen:

npm start

Damit wird ein lokaler Server mit der URL http://127.0.0.1:8080 oder http://localhost:8080 gestartet.

Wenn Sie diese URL in Ihren Browser einfügen, sollten Sie folgendes sehen:

gsg_build_elb_1

Um den Server zu stoppen, verwenden Sie ctrl + c, um den Prozess in Ihrem Terminal zu stoppen, in dem Sie npm start ausgeführt haben. 

Zusammenfassung

In diesem ersten Modul haben wir eine sehr einfache NodeJS-Anwendung erstellt und sie lokal ausgeführt, um sicherzustellen, dass sie funktioniert. Im nächsten Modul werden wir lernen, wie man die Infrastruktur mit dem AWS CDK erstellt, um sie auf AWS Elastic Beanstalk auszuführen.

Nächstes Thema: Infrastruktur erstellen

Lassen Sie uns wissen, wie wir abgeschnitten haben.

Vielen Dank für Ihr Feedback
Wir freuen uns, dass diese Seite Ihnen geholfen hat. Würden Sie uns weitere Details mitteilen, damit wir uns weiter verbessern können?
Schließen
Vielen Dank für Ihr Feedback
Es tut uns leid, dass diese Seite Ihnen nicht weiterhelfen konnte. Würden Sie uns weitere Details mitteilen, damit wir uns weiter verbessern können?
Schließen