Express-Tutorial Teil 7: Bereitstellung in der Produktion

Sobald Ihre Seite fertig ist (oder "genug" fertig, um mit öffentlichen Tests zu beginnen), müssen Sie sie irgendwo hosten, das öffentlicher und zugänglicher ist als Ihr persönlicher Entwicklungscomputer.

Bisher haben Sie in einer Entwicklungsumgebung gearbeitet, mit Express/Node als Webserver, um Ihre Seite auf den lokalen Browser/das lokale Netzwerk zu übertragen, und haben Ihre Website mit (unsicheren) Entwicklungseinstellungen betrieben, die Debugging und andere private Informationen offenlegen. Bevor Sie eine Website extern hosten können, müssen Sie zunächst:

• Eine Umgebung auswählen, um die Express-App zu hosten.
• Einige Änderungen an Ihren Projekteinstellungen vornehmen.
• Eine produktionsgerechte Infrastruktur für die Bereitstellung Ihrer Website einrichten.

Dieses Tutorial bietet einige Hinweise zu Ihren Optionen bei der Wahl einer Hosting-Site, einen kurzen Überblick darüber, was Sie tun müssen, um Ihre Express-App für die Produktion vorzubereiten, und ein funktionierendes Beispiel, wie Sie die LocalLibrary-Website auf dem Cloud-Hosting-Dienst Railway installieren können.

Die Produktionsumgebung ist die Umgebung, die vom Servercomputer bereitgestellt wird, auf dem Sie Ihre Website für den externen Verbrauch betreiben. Die Umgebung umfasst:

• Computerhardware, auf der die Website ausgeführt wird.
• Betriebssystem (z.B. Linux oder Windows).
• Programmiersprachen-Runtime und Framework-Bibliotheken, auf deren Grundlage Ihre Website geschrieben ist.
• Webserver-Infrastruktur, möglicherweise einschließlich eines Webservers, eines Reverse Proxy, eines Load Balancers usw.
• Datenbanken, von denen Ihre Website abhängig ist.

Der Servercomputer könnte sich in Ihren Räumlichkeiten befinden und über eine schnelle Verbindung mit dem Internet verbunden sein, aber es ist weitaus üblicher, einen Computer zu verwenden, der "in der Cloud" gehostet wird. Dies bedeutet tatsächlich, dass Ihr Code auf einem entfernten Computer (oder möglicherweise einem "virtuellen" Computer) im Rechenzentrum (oder in den Rechenzentren) Ihres Hosting-Anbieters ausgeführt wird. Der Remote-Server wird normalerweise ein gewisses Maß an garantierten Computerressourcen (z.B. CPU, RAM, Speicherspeicher usw.) und Internetverbindung zu einem bestimmten Preis bieten.

Diese Art von aus der Ferne zugänglicher Computer-/Netzwerkhardware wird als Infrastructure as a Service (IaaS) bezeichnet. Viele IaaS-Anbieter bieten Optionen an, um ein bestimmtes Betriebssystem vorzuinstallieren, auf das Sie die anderen Komponenten Ihrer Produktionsumgebung installieren müssen. Andere Anbieter ermöglichen es Ihnen, vollständiger ausgestattete Umgebungen auszuwählen, die möglicherweise eine komplette Node-Einrichtung umfassen.

Andere Hosting-Anbieter unterstützen Express als Teil eines Platform as a Service (PaaS)-Angebots. Bei der Verwendung dieser Art von Hosting müssen Sie sich um einen Großteil Ihrer Produktionsumgebung (Server, Load Balancer usw.) keine Gedanken machen, da die Host-Plattform diese für Sie verwaltet. Das macht die Bereitstellung recht einfach, da Sie sich nur auf Ihre Webanwendung konzentrieren müssen und nicht auf eine andere Server-Infrastruktur.

Einige Entwickler werden die erhöhte Flexibilität bevorzugen, die IaaS im Vergleich zu PaaS bietet, während andere die verminderte Wartungsbelastung und die einfachere Skalierung von PaaS schätzen werden. Wenn Sie gerade erst anfangen, ist das Einrichten Ihrer Website auf einem PaaS-System viel einfacher, und genau das werden wir in diesem Tutorial tun.

Es gibt zahlreiche Hosting-Anbieter, von denen bekannt ist, dass sie entweder aktiv unterstützen oder gut mit Node (und Express) arbeiten. Diese Anbieter bieten unterschiedliche Arten von Umgebungen (IaaS, PaaS) und unterschiedliche Niveaus an Computer-und Netzwerkressourcen zu unterschiedlichen Preisen an.

Einige der Dinge, die man bei der Auswahl eines Hosts beachten sollte:

• Wie beschäftigt Ihre Seite voraussichtlich sein wird und die Kosten für Daten- und Computerressourcen, die erforderlich sind, um diese Nachfrage zu decken.
• Unterstützung für horizontale Skalierung (Hinzufügen weiterer Maschinen) und vertikale Skalierung (Upgrade auf leistungsstärkere Maschinen) und die damit verbundenen Kosten.
• Die Orte, an denen der Anbieter Rechenzentren hat, und daher, wo der Zugriff voraussichtlich am schnellsten ist.
• Historische Uptime- und Downtime-Leistung des Hosts.
• Tools zur Verwaltung der Website — sind sie einfach zu bedienen und sind sie sicher (z.B. SFTP vs. FTP).
• Integrierte Frameworks zum Überwachen Ihres Servers.
• Bekannte Einschränkungen. Einige Hosts werden absichtlich bestimmte Dienstleistungen blockieren (z.B. E-Mail). Andere bieten nur eine bestimmte Anzahl von Stunden "Live-Zeit" in einigen Preistiers an oder bieten nur eine kleine Menge an Speicherplatz.
• Zusätzliche Vorteile. Einige Anbieter bieten kostenlose Domainnamen und Unterstützung für TLS-Zertifikate an, die Sie normalerweise bezahlen müssten.
• Ob der "freie" Tarif, auf den Sie sich verlassen, im Laufe der Zeit abläuft und ob die Kosten für den Umstieg auf einen teureren Tarif bedeuten, dass Sie von Anfang an besser mit einem anderen Service bedient gewesen wären!

Die gute Nachricht, wenn Sie gerade erst anfangen, ist, dass es ziemlich viele Websites gibt, die "kostenlose" Computerumgebungen bieten, die für Bewertung und Testen gedacht sind. Diese sind meist recht ressourcenbeschränkte/limitierte Umgebungen, und Sie sollten sich bewusst sein, dass sie vielleicht nach einer Einführungszeit ablaufen oder andere Einschränkungen haben. Sie sind jedoch großartig zum Testen von Websites mit geringem Datenverkehr in einer gehosteten Umgebung und können einen einfachen Übergang zur Zahlung für mehr Ressourcen bieten, wenn Ihre Website geschäftiger wird. Beliebte Optionen in dieser Kategorie sind Glitch, Python Anywhere, Amazon Web Services, Microsoft Azure usw.

Die meisten Anbieter bieten auch ein "Basis"- oder "Hobby"-Tier an, das für kleine Produktionsseiten gedacht ist und nützlichere Computerpower-Ebenen und weniger Einschränkungen bietet. Railway, Heroku, Digital Ocean und Python Anywhere sind Beispiele für beliebte Hosting-Anbieter, die eine relativ preiswerte Basis-Computing-Tier haben (im Bereich von 5 bis 10 USD pro Monat).

Die Hauptsachen, die Sie beim Veröffentlichen Ihrer Website bedenken sollten, sind Websicherheit und Leistung. Im absoluten Minimum möchten Sie die Datenbankkonfiguration ändern, damit Sie eine andere Datenbank für die Produktion verwenden und deren Anmeldedaten sichern können, die Stack Traces entfernen, die in Fehlermeldungen während der Entwicklung enthalten sind, Ihr Logging aufräumen und die entsprechenden Header setzen, um viele gängige Sicherheitsbedrohungen zu vermeiden.

In den folgenden Unterabschnitten skizzieren wir die wichtigsten Änderungen, die Sie an Ihrer App vornehmen sollten.

Bisher in diesem Tutorial haben wir eine einzelne Entwicklungsdatenbank verwendet, deren Adresse und Anmeldedaten in app.js fest codiert sind. Da die Entwicklungsdatenbank keine Informationen enthält, deren Offenlegung oder Beschädigung uns stört, besteht kein besonderes Risiko darin, diese Details zu verlieren. Wenn Sie jedoch mit realen Daten arbeiten, insbesondere mit persönlichen Benutzerinformationen, ist der Schutz Ihrer Datenbank-Zugriffsdaten sehr wichtig.

Aus diesem Grund möchten wir für die Produktion eine andere Datenbank verwenden als für die Entwicklung und auch die Zugangsdaten der Produktionsdatenbank vom Quellcode trennen, damit sie ordnungsgemäß geschützt werden können.

Wenn Ihr Hosting-Anbieter die Einstellung von Umgebungsvariablen über eine Weboberfläche unterstützt (wie es viele tun), ist eine Möglichkeit, dies zu tun, den Server die Datenbank-URL aus einer Umgebungsvariablen beziehen zu lassen. Unten ändern wir die LocalLibrary-Website, um die Datenbank-URI aus einer OS-Umgebungsvariablen zu beziehen, falls diese definiert wurde, und ansonsten die Entwicklungsdatenbank-URL zu verwenden.

Öffnen Sie app.js und finden Sie die Zeile, die die MongoDB-Verbindungsvariable setzt. Sie wird ungefähr so aussehen:

const mongoDB =
  "mongodb+srv://your_user_name:your_password@cluster0.cojoign.mongodb.net/local_library?retryWrites=true&w=majority";

Ersetzen Sie die Zeile durch den folgenden Code, der process.env.MONGODB_URI verwendet, um die Verbindungszeichenfolge aus einer Umgebungsvariablen namens MONGODB_URI zu erhalten, falls diese gesetzt wurde (verwenden Sie Ihre eigene Datenbank-URL anstelle des Platzhalters unten).

// Set up mongoose connection
const mongoose = require("mongoose");
mongoose.set("strictQuery", false);

const dev_db_url =
  "mongodb+srv://your_user_name:your_password@cluster0.cojoign.mongodb.net/local_library?retryWrites=true&w=majority";
const mongoDB = process.env.MONGODB_URI || dev_db_url;

main().catch((err) => console.log(err));
async function main() {
  await mongoose.connect(mongoDB);
}

Wir können Stack Traces in Fehlerseiten entfernen, indem wir die Umgebungsvariable NODE_ENV auf production setzen (sie ist standardmäßig auf 'development' gesetzt). Zusätzlich zur Erzeugung von weniger ausführlichen Fehlermeldungen sorgt das Setzen der Variable auf production dafür, dass Ansichts-Templates und CSS-Dateien, die aus CSS-Erweiterungen generiert wurden, zwischengespeichert werden. Tests zeigen, dass das Setzen von NODE_ENV auf production die Anwendungsleistung um den Faktor drei verbessern kann!

Diese Änderung kann entweder durch Verwendung von export, einer Umgebungsdatei oder des OS-Initialisierungssystems vorgenommen werden.

Protokollierungsaufrufe können sich auf eine Website mit hohem Datenverkehr auswirken. In einer Produktionsumgebung müssen Sie möglicherweise die Website-Aktivität protokollieren (z.B. Verkehrstracking oder Protokollierung von API-Aufrufen), sollten jedoch versuchen, die Menge an Protokollierung, die zu Debugging-Zwecken hinzugefügt wird, zu minimieren.

Eine Möglichkeit, die "Debug"-Protokollierung in der Produktion zu minimieren, ist die Verwendung eines Moduls wie debug, mit dem Sie steuern können, welche Protokollierung durch Setzen einer Umgebungsvariablen durchgeführt wird. Der unten stehende Codeausschnitt zeigt, wie Sie möglicherweise eine "author"-Protokollierung einrichten. Die Debug-Variable wird mit dem Namen 'author' deklariert, und der Präfix "author" wird automatisch für alle Protokolle dieses Objekts angezeigt.

const debug = require("debug")("author");

// Display Author update form on GET.
exports.author_update_get = asyncHandler(async (req, res, next) => {
  const author = await Author.findById(req.params.id).exec();
  if (author === null) {
    // No results.
    debug(`id not found on update: ${req.params.id}`);
    const err = new Error("Author not found");
    err.status = 404;
    return next(err);
  }

  res.render("author_form", { title: "Update Author", author: author });
});

Sie können dann eine bestimmte Protokollliste aktivieren, indem Sie sie als kommagetrennte Liste in der DEBUG-Umgebungsvariablen angeben. Sie können die Variablen für die Anzeige von author- und book-Protokollen wie gezeigt festlegen (Wildcards werden ebenfalls unterstützt).

#Windows
set DEBUG=author,book

#Linux
export DEBUG="author,book"

Wenn Sie die Website-Aktivität protokollieren müssen, können Sie eine Protokollierungsbibliothek wie Winston oder Bunyan verwenden. Weitere Informationen zu diesem Thema finden Sie unter Production best practices: performance and reliability.

Webserver können häufig die HTTP-Antwort komprimieren, die an einen Client zurückgesendet wird, wodurch die Zeit, die erforderlich ist, damit der Client die Seite erhält und lädt, erheblich reduziert wird. Die verwendete Komprimierungsmethode hängt von den Dekomprimierungsmethoden ab, die der Client bei der Anfrage angibt (die Antwort wird unkomprimiert gesendet, wenn keine Komprimierungsmethoden unterstützt werden).

Fügen Sie dies Ihrer Site hinzu, indem Sie compression Middleware verwenden. Installieren Sie dies im Stammverzeichnis Ihres Projekts durch Ausführen des folgenden Befehls:

npm install compression

Öffnen Sie ./app.js und binden Sie die compression-Bibliothek ein, wie gezeigt. Fügen Sie die compression-Bibliothek mit der use()-Methode zur Middleware-Kette hinzu (dies sollte vor allen Routen erscheinen, die Sie komprimieren möchten — in diesem Fall alle!)

const catalogRouter = require("./routes/catalog"); // Import routes for "catalog" area of site
const compression = require("compression");

// Create the Express application object
const app = express();

// …

app.use(compression()); // Compress all routes

app.use(express.static(path.join(__dirname, "public")));

app.use("/", indexRouter);
app.use("/users", usersRouter);
app.use("/catalog", catalogRouter); // Add catalog routes to middleware chain.

// …

Helmet ist ein Middleware-Paket. Es kann geeignete HTTP-Header setzen, die Ihre App gegen bekannte Web-Schwachstellen schützen (siehe die Dokumentation für weitere Informationen zu den von ihm gesetzten Headern und den Schwachstellen, die es schützt).

Installieren Sie dies im Stammverzeichnis Ihres Projekts durch Ausführen des folgenden Befehls:

npm install helmet

Öffnen Sie ./app.js und binden Sie die helmet-Bibliothek ein, wie gezeigt. Fügen Sie dann das Modul mit der use()-Methode zur Middleware-Kette hinzu.

const compression = require("compression");
const helmet = require("helmet");

// Create the Express application object
const app = express();

// Add helmet to the middleware chain.
// Set CSP headers to allow our Bootstrap and Jquery to be served
app.use(
  helmet.contentSecurityPolicy({
    directives: {
      "script-src": ["'self'", "code.jquery.com", "cdn.jsdelivr.net"],
    },
  }),
);

// …

Normalerweise hätten wir einfach app.use(helmet()); eingefügt, um den Subset der sicherheitsbezogenen Header hinzuzufügen, die für die meisten Websites sinnvoll sind. In der LocalLibrary-Basistemplate haben wir jedoch einige Bootstrap- und jQuery-Skripte aufgenommen. Diese verletzen die default Content Security Policy (CSP) von helmet, die das Laden von Skripten über Kreuzseiten verbietet. Um das Laden dieser Skripte zu ermöglichen, modifizieren wir die helmet-Konfiguration, sodass sie CSP-Direktiven setzt, die das Laden von Skripten von den angegebenen Domains erlauben. Für Ihren eigenen Server können Sie spezifische Header nach Bedarf hinzufügen/deaktivieren, indem Sie den Anleitungen zur Verwendung von helmet hier folgen.

Express-rate-limit ist ein Middleware-Paket, das verwendet werden kann, um wiederholte Anfragen an APIs und Endpunkte zu begrenzen. Es gibt viele Gründe, warum übermäßig viele Anfragen an Ihre Site gesendet werden könnten, wie etwa Denial-of-Service-Angriffe, Brute-Force-Angriffe oder sogar nur ein Client oder Skript, das sich nicht wie erwartet verhält. Abgesehen von Leistungsproblemen, die durch zu viele Anfragen entstehen können, die Ihren Server verlangsamen, können Ihnen auch die zusätzlichen Traffic-Kosten in Rechnung gestellt werden. Dieses Paket kann verwendet werden, um die Anzahl der Anfragen zu begrenzen, die an eine bestimmte Route oder eine Gruppe von Routen gesendet werden können.

Installieren Sie dies im Stammverzeichnis Ihres Projekts durch Ausführen des folgenden Befehls:

npm install express-rate-limit

Öffnen Sie ./app.js und binden Sie die express-rate-limit-Bibliothek ein, wie gezeigt. Fügen Sie dann das Modul mit der use()-Methode zur Middleware-Kette hinzu.

const compression = require("compression");
const helmet = require("helmet");

const app = express();

// Set up rate limiter: maximum of twenty requests per minute
const RateLimit = require("express-rate-limit");
const limiter = RateLimit({
  windowMs: 1 * 60 * 1000, // 1 minute
  max: 20,
});
// Apply rate limiter to all requests
app.use(limiter);

// …

Der obige Befehl begrenzt alle Anfragen auf 20 pro Minute (Sie können dies nach Bedarf ändern).

Node-Version festlegen

Für Node-Anwendungen, einschließlich Express, enthält die package.json-Datei alles, was ein Hosting-Anbieter benötigt, um die Anwendungsabhängigkeiten und das Einstiegsdatei zu ermitteln.

Die einzige wichtige Information, die in unserer aktuellen package.json fehlt, ist die Version von node, die von der Bibliothek benötigt wird. Sie können die Version von node herausfinden, die für die Entwicklung verwendet wurde, indem Sie den folgenden Befehl eingeben:

>node --version
v16.17.1

Öffnen Sie package.json und fügen Sie diese Information als engines > node hinzu, wie gezeigt (verwenden Sie die Versionsnummer Ihres Systems).

  "engines": {
    "node": ">=16.17.1"
  },

Der Hosting-Service unterstützt möglicherweise nicht die spezifisch angegebene Version von node, aber diese Änderung sollte sicherstellen, dass er versucht, eine Version mit derselben Hauptversionsnummer oder eine neuere Version zu verwenden.

Beachten Sie, dass es noch andere Möglichkeiten gibt, die Node-Version auf verschiedenen Hosting-Diensten anzugeben, aber der package.json-Ansatz wird weithin unterstützt.

Abhängigkeiten holen und erneut testen

Bevor wir fortfahren, lassen Sie uns die Site erneut testen und sicherstellen, dass sie nicht durch eines unserer Änderungen beeinträchtigt wurde.

Zuerst müssen wir unsere Abhängigkeiten abrufen. Sie können dies tun, indem Sie den folgenden Befehl in Ihrem Terminal im Stammverzeichnis des Projekts ausführen:

npm install

Führen Sie nun die Site aus (siehe Testing the routes für die entsprechenden Befehle) und überprüfen Sie, ob sich die Site weiterhin wie erwartet verhält.

Viele Hosting-Dienste ermöglichen es Ihnen, Projekte aus einem lokalen Repository oder aus Cloud-basierten Plattformen zur Quellcodeverwaltung zu importieren und/oder zu synchronisieren. Dies kann die Bereitstellung und iterative Entwicklung erheblich erleichtern.

Für dieses Tutorial richten wir ein GitHub-Konto und ein Repository für die Bibliothek ein und verwenden das git-Tool, um unseren Quellcode hochzuladen.

Die Schritte sind:

1. Besuchen Sie https://github.com/ und erstellen Sie ein Konto.

2. Sobald Sie angemeldet sind, klicken Sie auf den +-Link in der oberen Symbolleiste und wählen Sie Neues Repository.

3. Füllen Sie alle Felder in diesem Formular aus. Während diese nicht verpflichtend sind, werden sie dringend empfohlen.

   • Geben Sie einen neuen Repository-Namen ein (z.B. express-locallibrary-tutorial) und eine Beschreibung (z.B. "Local Library website written in Express (Node)").

   • Wählen Sie Node in der Add .gitignore-Auswahlliste.

   • Wählen Sie Ihre bevorzugte Lizenz in der Add license-Auswahlliste.

   • Aktivieren Sie Initialize this repository with a README.

   Warnung: Der Standardzugriff "Öffentlich" macht allen Quellcode — einschließlich Ihres Datenbank-Benutzernamens und -Passworts — jedem im Internet sichtbar! Stellen Sie sicher, dass der Quellcode Anmeldeinformationen nur aus Umgebungsvariablen liest und keine Anmeldeinformationen fest codiert sind.

   Andernfalls wählen Sie die Option "Privat", um nur ausgewählten Personen die Einsicht in den Quellcode zu ermöglichen.

4. Drücken Sie Create repository.

5. Klicken Sie auf den grünen Clone or download-Button auf Ihrer neuen Repository-Seite.

6. Kopieren Sie den URL-Wert aus dem Textfeld im Dialogfeld, das erscheint. Wenn Sie den Repository-Namen "express-locallibrary-tutorial" verwendet haben, sollte die URL etwa folgendermaßen aussehen: https://github.com/<your_git_user_id>/express-locallibrary-tutorial.git.

Nun, da das Repository ("Repo") auf GitHub erstellt wurde, möchten wir es auf unseren lokalen Computer klonen (kopieren):

1. Installieren Sie git für Ihren lokalen Computer (Sie können Versionen für verschiedene Plattformen hier finden).

2. Öffnen Sie eine Eingabeaufforderung/ein Terminal und klonen Sie Ihr Repo mit der oben kopierten URL:

   bash

   git clone https://github.com/<your_git_user_id>/express-locallibrary-tutorial.git
   

   Dadurch wird das Repository im aktuellen Verzeichnis erstellt.

3. Navigieren Sie in den Repo-Ordner.

   bash

   cd express-locallibrary-tutorial
   

Kopieren Sie dann Ihre Anwendungsquellcodes in den Repo-Ordner, machen Sie sie mit git zu einem Teil des Repos und laden Sie sie auf GitHub hoch:

1. Kopieren Sie Ihre Express-Anwendung in diesen Ordner (ohne /node_modules, das Abhängigkeitsdateien enthält, die Sie bei Bedarf über npm abrufen sollten).

2. Öffnen Sie eine Eingabeaufforderung/ein Terminal und verwenden Sie den add-Befehl, um alle Dateien zu git hinzuzufügen.

   bash

   git add -A
   

3. Verwenden Sie den status-Befehl, um zu überprüfen, ob alle Dateien, die Sie commit werden korrekt sind (Sie möchten Quellcode-Dateien einbeziehen, nicht Binärdateien, temporäre Dateien usw.). Es sollte ungefähr so aussehen wie die unten stehende Liste.

   bash

   git status
   

   On branch main
   Your branch is up-to-date with 'origin/main'.
   Changes to be committed:
     (use "git reset HEAD <file>..." to unstage)
   
           new file:   ...
   

4. Wenn Sie zufrieden sind, commit-ten Sie die Dateien in ihrem lokalen Repo. Das ist gleichbedeutend mit der Unterzeichnung der Änderungen und macht sie zu einem offiziellen Teil des lokalen Repos.

   bash

   git commit -m "First version of application moved into GitHub"
   

5. Zu diesem Zeitpunkt wurde das Remote-Repo nicht geändert. Der letzte Schritt besteht darin, Ihr lokales Repo mit dem Remote-GitHub-Repo zu synchronisieren (push) mit dem folgenden Befehl:

   bash

   git push origin main
   

Wenn dieser Vorgang abgeschlossen ist, sollten Sie zurück zu der Seite auf GitHub gehen können, auf der Sie Ihr Repo erstellt haben, die Seite aktualisieren und sehen, dass Ihre gesamte Anwendung nun hochgeladen wurde. Sie können Ihr Repo weiterhin aktualisieren, wenn sich Dateien ändern, indem Sie diesen Add/Commit/Push-Zyklus ausführen.

Dies ist ein guter Zeitpunkt, um eine Sicherungskopie Ihres "Vanille"-Projekts zu erstellen — während einige der Änderungen, die wir in den folgenden Abschnitten vornehmen werden, nützlich für die Bereitstellung auf jedem Hosting-Service (oder zur Entwicklung) sein könnten, könnten andere dies nicht sein. Sie können dies mit git an der Befehlszeile tun:

# Create branch vanilla_deployment from the current branch (main)
git checkout -b vanilla_deployment

# Push the new branch to GitHub
git push origin vanilla_deployment

# Switch back to main
git checkout main

# Make any further changes in a new branch
git pull upstream main # Merge the latest changes from GitHub
git checkout -b my_changes # Create a new branch

Dieser Abschnitt bietet eine praktische Demonstration, wie man die LocalLibrary auf Glitch hostet.

Wir wählen Glitch aus mehreren Gründen:

• Glitch hat einen kostenlosen Starter-Plan, der wirklich kostenlos ist, wenn auch mit einigen Einschränkungen. Die Tatsache, dass es für alle Entwickler erschwinglich ist, ist wirklich wichtig für MDN!

• Glitch kümmert sich um die Infrastruktur, damit Sie es nicht müssen. Sich nicht um Server, Load Balancer, Reverse Proxys usw. kümmern zu müssen, macht es viel einfacher, loszulegen.

• Die Fähigkeiten und Konzepte, die Sie beim Einsatz von Glitch erlernen, sind übertragbar.

• Die Beschränkungen des Dienstes und des Plans haben keine wirklichen Auswirkungen auf die Verwendung von Glitch für das Tutorial. Beispielsweise:

  • Der Starter-Plan bietet nur 1000 "Projektstunden" pro Monat, die monatlich zurückgesetzt werden. Dies wird verwendet, wenn Sie aktiv an der Site arbeiten oder wenn jemand darauf zugreift. Wenn niemand auf die Site zugreift oder sie bearbeitet, wird sie in den Ruhezustand versetzt.
  • Die Starter-Plan-Umgebung hat eine begrenzte Menge an Container-RAM und Speicherplatz. Für das Tutorial ist mehr als genug vorhanden, insbesondere weil unsere Datenbank anderswo gehostet wird.
  • Benutzerdefinierte Domänen werden nicht gut unterstützt (zum Zeitpunkt des Schreibens).
  • Weitere Einschränkungen finden Sie auf der Glitch Technical Restrictions Page.

Während Glitch geeignet ist, um diese Demonstration zu hosten, sollten Sie sich die Zeit nehmen, zu ermitteln, ob es für Ihre eigene Website geeignet ist.

Glitch bietet eine webbasierte Oberfläche, in der Sie Projekte aus Starter-Templates erstellen oder aus GitHub importieren und dann die Projektdateien hinzufügen und bearbeiten können. Während Sie Änderungen vornehmen, wird das Projekt in seinem eigenen isolierten und unabhängigen virtualisierten Container aufgebaut und ausgeführt.

Wie das alles "unter der Haube" funktioniert, ist ein Rätsel - Glitch sagt es nicht. Was klar ist, ist, dass solange Sie eine ziemlich standardmäßige Nodejs-Webanwendung erstellen (zum Beispiel unter Verwendung von package.json für Ihre Abhängigkeiten), und nicht mehr Ressourcen verbrauchen als in den technischen Einschränkungen aufgeführt, Ihre Anwendung "einfach funktionieren" sollte.

Sobald die Anwendung ausgeführt wird, kann sie für die Produktion mit privaten Daten konfiguriert werden, die in einer .env-Datei bereitgestellt werden. Die Werte in den geheimen Daten werden von der Anwendung als Umgebungsvariablen gelesen, die, wie Sie sich aus einem früheren Abschnitt erinnern werden, die Art und Weise ist, wie wir unsere Anwendung konfiguriert haben, um ihre Datenbank-URL zu erhalten. Beachten Sie, dass die Variablen geheim sind: die .env sollte nicht in Ihrem GitHub-Repository enthalten sein.

Die Glitch-Bearbeitungsansicht bietet auch Terminalzugriff auf die Web-App-Umgebung, die Sie verwenden können, um mit der Web-App so zu arbeiten, als würde sie auf Ihrem lokalen Computer laufen.

Das ist alles, was Sie an Überblick benötigen, um zu beginnen. Als nächstes richten wir ein Glitch-Konto ein, laden das Bibliotheksprojekt von GitHub hoch und verbinden es mit einer Datenbank.

Um Glitch zu verwenden, müssen Sie zuerst ein Konto erstellen:

• Gehen Sie zu glitch.com und klicken Sie auf die Schaltfläche Anmelden in der oberen Symbolleiste.
• Wählen Sie in der Popup-Datei GitHub, um sich mit Ihren GitHub-Anmeldedaten zu registrieren.
• Dann werden Sie in das Glitch-Dashboard: https://glitch.com/dashboard eingeloggt.

Hosting-Anbieter unterstützen in der Regel einige große Versionen der kürzlich veröffentlichten Node.js-Versionen. Ist die exakte in Ihrer package.json-Datei angegebene "kleine" Version nicht unterstützt, wird sie in der Regel auf die nächste von ihnen unterstützte Version zurückfallen (und oft wird das einfach funktionieren).

Leider ist zum Zeitpunkt des Schreibens die höchste unterstützte Version auf Glitch Node.js 16. Wenn Sie mit Node.js 17 oder höher entwickelt haben, sollten Sie die Version von Node.js in Ihrer package.json-Datei wie gezeigt reduzieren. Sie müssen auch erneut testen:

  "engines": {
    "node": ">=v16"
  },

Glitch plant, Node.js zu aktualisieren und in Zukunft besser auf dem neuesten Stand zu halten — und es kann sein, dass das Versionslimit nicht mehr besteht, bis Sie dies lesen. Statt die node-Version herabzusetzen, könnten Sie Ihr Projekt hochladen, um zu sehen, ob es bauen kann. Wenn es Fehler gibt und Ihre Anwendung nicht geladen wird, sollten Sie versuchen, die node-Version auf >=v16 in Ihrer package.json-Datei im Glitch-Editor zu setzen.

ls -l /opt/nvm/versions/node | grep '^d' | awk '{ print $9 }'

Als nächstes werden wir das Bibliotheksprojekt von GitHub importieren. Wählen Sie zuerst die Dashboard-Option aus dem oberen Menü der Website und dann die Schaltfläche Neues Projekt aus. Glitch zeigt eine Liste von Optionen für das neue Projekt an; wählen Sie Import von GitHub.

Ein Popup wird angezeigt. Geben Sie die URL Ihres GitHub-Bibliotheksrepositorys in das Popup ein und drücken Sie OK. Unten haben wir das Repo für das fertiggearbeitete Projekt eingegeben.

Glitch importiert dann das Projekt und zeigt Benachrichtigungen über den Fortschritt an. Nach Fertigstellung wird die Bearbeitungsansicht für das neue Projekt angezeigt, wie unten gezeigt wird.

Sie können die URL Ihrer Live-Site abrufen, indem Sie die Schaltfläche Teilen auswählen.

Öffnen Sie einen neuen Browser-Tab und kopieren Sie den Link für die Live-Site in die Adressleiste. Die lokale Bibliotheksseite sollte geöffnet werden und Daten aus der Entwicklungsdatenbank anzeigen.

Sie sollten eine andere Datenbank für die Produktion als für die Entwicklung einrichten. Während Glitch nur SQLite-Datenbanken hostet (und wir MongoDB eingerichtet haben), bieten viele andere Websites MongoDB-Datenbanken als Dienst an.

Eine Möglichkeit ist es, den Einrichtung der MongoDB-Datenbank-Anweisungen aus einem früheren Teil des Tutorials zu folgen, um eine neue Produktionsdatenbank einzurichten.

Um die Produktionsdatenbank für die Bibliotheksanwendung zugänglich zu machen, öffnen Sie die Datei .env in der Bearbeitungsansicht des Projekts. Geben Sie die Variablen MONGODB_URI und die URL Ihrer Produktionsdatenbank ein. Die Seite wird aktualisiert, während Sie Werte in den Editor eingeben.

Sie erinnern sich aus einem vorangegangenen Abschnitt, dass wir über die Notwendigkeit gesprochen haben, NODE_ENV auf 'production' zu setzen, um unsere Leistung zu verbessern und weniger ausführliche Fehlermeldungen zu erzeugen. Wir machen dies in derselben Datei, in der wir die Variablen MONGODB_URI setzen.

Öffnen Sie .env und fügen Sie eine Variable NODE_ENV mit dem Wert production hinzu (siehe den Screenshot im vorherigen Abschnitt).

Die Bibliotheksanwendung ist nun eingerichtet und für den Produktionsbetrieb konfiguriert. Sie können über die Website-Oberfläche Daten hinzufügen, und es sollte wie in der Entwicklung funktionieren (allerdings mit weniger Debug-Informationen, die bei ungültigen Seiten exponiert werden).

Glitch ermöglicht effektives Debuggen. Einige der Dinge, die Sie tun können, sind:

• Wählen Sie die Protokollschaltfläche unten in der Bearbeitungsansicht aus, um Protokollinformationen von Ihrem Server anzuzeigen, wie z.B. Konsolen-Protokollausgaben.
• Wählen Sie die Terminals-Schaltfläche unten in der Bearbeitungsansicht aus, um ein Terminal in der Hosting-Umgebung zu öffnen. Sie können dies verwenden, um Befehle und Werkzeuge in der Umgebung auszuführen. Zum Beispiel könnten Sie node -v verwenden, um die Version von Node zu überprüfen.
• Interaktives Debuggen in VSCode mit der GLITCH-Erweiterung für VSCode.

Dieser Abschnitt bietet eine praktische Demonstration, wie man die LocalLibrary auf Railway installiert.

Railway ist aus mehreren Gründen ein attraktives Hosting-Angebot:

• Railway übernimmt den Großteil der Infrastruktur, sodass Sie es nicht müssen. Sich nicht um Server, Load Balancer, Reverse Proxys usw. kümmern zu müssen, macht es viel einfacher, loszulegen.
• Railway hat einen Schwerpunkt auf die Entwicklererfahrung für Entwicklung und Bereitstellung, was zu einer schnelleren und sanfteren Lernkurve führt als viele andere Alternativen.
• Die Fähigkeiten und Konzepte, die Sie beim Einsatz von Railway erlernen, sind übertragbar. Während Railway einige hervorragende neue Funktionen hat, verwenden andere beliebte Hosting-Dienste viele der gleichen Ideen und Ansätze.
• Railway-Dokumentation ist klar und umfassend.
• Der Dienst scheint sehr zuverlässig zu sein, und wenn Sie ihn lieben, sind die Preise vorhersehbar, und das Skalieren Ihrer App ist sehr einfach.

Sie sollten sich die Zeit nehmen, um herauszufinden, ob Railway für Ihre eigene Website geeignet ist.

Webanwendungen werden jeweils in ihrem eigenen isolierten und unabhängigen virtualisierten Container ausgeführt. Um Ihre Anwendung auszuführen, muss Railway die geeignete Umgebung und Abhängigkeiten konfigurieren und auch verstehen, wie sie gestartet wird.

Railway macht dies einfach, da es viele verschiedene Webanwendungs-Frameworks und -Umgebungen basierend auf ihrer Verwendung "gemeinsamer Konventionen" automatisch erkennen und installieren kann. Railway erkennt beispielsweise Node-Anwendungen, weil sie eine package.json-Datei haben, und kann den verwendeten Paketmanager zum Aufbau anhand der "Lock"-Datei bestimmen. Wenn die Anwendung beispielsweise die Datei package-lock.json enthält, weiß Railway, dass npm zur Installation der Pakete verwendet werden soll, während es bei yarn.lock weiß, dass yarn verwendet werden soll. Nach der Installation aller Abhängigkeiten wird Railway nach Skripten mit dem Namen "build" und "start" in der Paketdatei suchen und diese verwenden, um den Code zu erstellen und auszuführen.

Sobald die Anwendung läuft, kann sie sich selbst unter Verwendung von Informationen konfigurieren, die in Umgebungsvariablen bereitgestellt werden. Beispielsweise muss eine Anwendung, die eine Datenbank verwendet, die Adresse über eine Variable erhalten. Der Datenbankdienst selbst kann von Railway oder einem anderen Anbieter gehostet werden.

Entwickler interagieren mit Railway über die Railway-Website und ein spezielles Command Line Interface (CLI)-Tool. Das CLI ermöglicht es Ihnen, ein lokales GitHub-Repository mit einem Railway-Projekt zu verknüpfen, das Repository von der lokalen Branch auf die Live-Site hochzuladen, die Protokolle des laufenden Prozesses zu inspizieren, Konfigurationsvariablen zu setzen und abzurufen und vieles mehr. Eine der nützlichsten Funktionen ist, dass Sie das CLI verwenden können, um Ihr lokales Projekt mit denselben Umgebungsvariablen wie das Live-Projekt auszuführen.

Das ist alles, was Sie als Überblick benötigen, um die App bei Railway bereitzustellen. Als nächstes richten wir ein Railway-Konto ein, installieren unsere Website und eine Datenbank und probieren den Railway-Client aus.

Um Railway zu nutzen, müssen Sie zunächst ein Konto einrichten:

• Gehen Sie zu railway.app und klicken Sie auf den Login-Link in der oberen Symbolleiste.
• Wählen Sie in der Popup-Datei GitHub, um sich mit Ihren GitHub-Anmeldedaten anzumelden
• Möglicherweise müssen Sie dann zu Ihrer E-Mail gehen und Ihr Konto verifizieren.
• Dann werden Sie schließlich in das Railway.app-Dashboard: https://railway.app/dashboard eingeloggt.

Als nächstes werden wir Railway einrichten, um unsere Bibliothek von GitHub bereitzustellen. Wählen Sie zuerst die Dashboard-Option aus dem oberen Website-Menü, und dann die Schaltfläche Neues Projekt:

Railway zeigt eine Liste von Optionen für das neue Projekt an, darunter die Möglichkeit, ein Projekt aus einer Vorlage zu erstellen, die zuerst in Ihrem GitHub-Konto erstellt wurde, und eine Reihe von Datenbanken. Wählen Sie Bereitstellung von GitHub-Repo.

Alle Projekte in den GitHub-Repos, die Sie mit Railway geteilt haben, werden angezeigt. Wählen Sie Ihr GitHub-Repository für die lokale Bibliothek aus: <Benutzername>/express-locallibrary-tutorial.

Bestätigen Sie Ihre Bereitstellung, indem Sie Jetzt bereitstellen auswählen.

Railway wird dann Ihr Projekt laden und bereitstellen und Fortschrittsanzeigen im Bereich Bereitstellungen anzeigen. Nach erfolgreichem Abschluss der Bereitstellung sehen Sie einen Bildschirm wie den unten gezeigten.

Wählen Sie nun die Registerkarte Einstellungen aus, scrollen Sie dann zum Abschnitt Domains und drücken Sie die Schaltfläche Domain generieren.

Dies veröffentlicht die Seite und platziert die Domain anstelle der Schaltfläche, wie unten gezeigt.

Wählen Sie die Domain-URL, um Ihre Bibliotheksanwendung zu öffnen. Da wir keine Produktionsdatenbank angegeben haben, wird die lokale Bibliothek mit Ihren Entwicklungsdaten geöffnet.

Anstatt unsere Entwicklungsdaten zu verwenden, lassen Sie uns eine Produktions-MongoDB-Datenbank erstellen, um sie stattdessen zu verwenden. Wir werden die Datenbank als Teil des Railway-Anwendungsprojekts erstellen, obwohl nichts dagegen spricht, sie in einem eigenen separaten Projekt zu erstellen oder tatsächlich eine MongoDB Atlas-Datenbank für Produktionsdaten zu verwenden, wie Sie es für die Entwicklungsdatenbank getan haben.

Wählen Sie auf Railway die Dashboard-Option aus dem oberen Menü der Website aus und dann Ihr Anwendungsprojekt. Zu diesem Zeitpunkt enthält es nur einen Dienst für Ihre Anwendung (dieser kann ausgewählt werden, um Variablen und andere Dienstdetails einzustellen). Wählen Sie die Schaltfläche Neu aus, die zum Hinzufügen von Diensten zum aktuellen Projekt verwendet wird.

Wählen Sie Datenbank aus, wenn Sie gefragt werden, welche Art von Dienst hinzugefügt werden soll:

Wählen Sie dann MongoDB hinzufügen aus, um das Hinzufügen der Datenbank zu starten

Railway wird dann einen Dienst, der eine leere Datenbank im selben Projekt enthält, bereitstellen. Nach Abschluss sehen Sie jetzt sowohl die Anwendung als auch die Datenbankdienste in der Projektansicht.

Wählen Sie den MongoDB-Dienst aus, um Informationen über die Datenbank anzuzeigen. Öffnen Sie die Registerkarte Variabeln und kopieren Sie die "Mongo_URL" (dies ist die Adresse der Datenbank).

Um dies für die Bibliotheksanwendung zugänglich zu machen, müssen wir es dem Anwendungsprozess mit einer Umgebungsvariable hinzufügen. Öffnen Sie zunächst den Anwendungsdienst. Wählen Sie dann die Registerkarte Variabeln aus und drücken Sie die Neue Variable-Schaltfläche.

Geben Sie den Variablennamen MONGODB_URI und die kopierte Verbindungs-URL der Datenbank ein (MONGODB_URI ist der Name der Umgebungsvariablen, aus der wir die Anwendung konfiguriert haben, um die Datenbankadresse zu lesen). Dies sollte wie der unten gezeigte Bildschirm aussehen.

Wählen Sie Hinzufügen aus, um die Variable hinzuzufügen.

Railway startet Ihre App neu, wenn es Variablen aktualisiert. Wenn Sie jetzt die Startseite überprüfen, sollte sie Nullwerte für Ihre Objektscounts anzeigen, da die oben genannten Änderungen bedeuten, dass wir jetzt eine neue (leere) Datenbank verwenden.

Sie erinnern sich aus einem früheren Abschnitt, dass wir darüber gesprochen haben, NODE_ENV auf 'production' zu setzen, um unsere Leistung zu verbessern und weniger ausführliche Fehlermeldungen zu erzeugen. Wir können dies auf demselben Bildschirm tun, wo wir die Variable MONGODB_URI eingerichtet haben.

Öffnen Sie den Anwendungsdienst. Wählen Sie dann die Registerkarte Variabeln aus, wo Sie sehen werden, dass MONGODB_URI bereits definiert ist, und drücken Sie die Neue Variable-Schaltfläche.

Geben Sie NODE_ENV als Namen der neuen Variable und production als Namen der Umgebung ein. Drücken Sie anschließend die Hinzufügen-Schaltfläche.

Die Bibliotheksanwendung ist nun eingerichtet und für den Produktionsbetrieb konfiguriert. Sie können über die Website-Oberfläche Daten hinzufügen und es sollte auf die gleiche Weise funktionieren, wie es während der Entwicklung tat (wenn auch mit weniger Debug-Informationen für ungültige Seiten offen gelegt).

Laden Sie den Railway-Client für Ihr lokales Betriebssystem herunter und installieren Sie ihn, indem Sie den Anweisungen hier folgen.

Nachdem der Client installiert ist, können Sie Befehle ausführen. Zu den wichtigeren Operationen gehört die Bereitstellung des aktuellen Verzeichnisses Ihres Computers für ein zugehöriges Railway-Projekt (ohne dass Sie es auf GitHub hochladen müssen), und das lokale Ausführen Ihres Projekts mit denselben Einstellungen wie auf dem Produktionsserver.

Sie können eine Liste aller möglichen Befehle erhalten, indem Sie das folgende in einem Terminal eingeben.

railway help

Der Railway-Client bietet den Befehl logs zum Anzeigen der Protokoll-Endungen (ein umfassenderes Protokoll ist auf der Website für jedes Projekt verfügbar):

railway logs

Das ist das Ende dieses Tutorials über das Einrichten von Express-Apps in der Produktion, und auch die Serie von Tutorials über die Arbeit mit Express. Wir hoffen, dass Sie es nützlich gefunden haben. Sie können eine vollständig durchgearbeitete Version des Quellcodes hier auf GitHub ansehen.

• Production best practices: performance and reliability (Express-Dokumentation)

• Production Best Practices: Security (Express-Dokumentation)

• Railway-Dokumentation

  • CLI

• Digital Ocean

  • Express Tutorials
  • Node.js Tutorials

• Heroku

  • Getting Started on Heroku with Node.js (Heroku-Dokumentation)
  • Deploying Node.js Applications on Heroku (Heroku-Dokumentation)
  • Heroku Node.js Support (Heroku-Dokumentation)
  • Optimizing Node.js Application Concurrency (Heroku-Dokumentation)
  • How Heroku works (Heroku-Dokumentation)
  • Dynos and the Dyno Manager (Heroku-Dokumentation)
  • Configuration and Config Vars (Heroku-Dokumentation)
  • Limits (Heroku-Dokumentation)

• Zurück
• Übersicht: Express Web Framework (Node.js/JavaScript)