Eine Kurzanleitung für das Hosting von Express auf Upsun

KonfigurationGitHubPostgreSQLExpress

Teilen Sie

Willkommen zu unserer Schnellstart-Anleitung für das Hosting von Express (zum Zeitpunkt der Erstellung dieses Artikels ist die aktuellste Version von Express 4.18.2) auf Upsun, in der wir zeigen, wie einfach es ist, Ihre Express-Projekte auf unserem PaaS zu hosten.

Bevor wir loslegen, gehen wir davon aus, dass Sie die Upsun CLI bereits lokal installiert haben.

Haben Sie schon die Upsun-Demo gesehen? Sie ist der perfekte Ort, um herauszufinden, wie Upsun funktioniert und um ein besseres Verständnis für unser Angebot zu bekommen. Um es auszuprobieren, erstellen Sie ein neues Projekt und wählen Sie "Deploy demo project".

Starten Sie lokal

Wenn Sie bereits über ein bestehendes GitHub-Repository mit funktionierendem Express-Quellcode verfügen, klonen Sie es lokal mit dem folgenden Befehl und springen Sie dann zum zweiten Schritt: Konfigurieren Sie Ihr Projekt.

git clone git@github.com:<IhreRepoUrl>.git

Initialisieren Sie Ihr lokales Projekt

Das Wichtigste zuerst: Wenn Sie noch kein lokales Express-Projekt haben, müssen Sie ein neues Projekt lokal gemäß der Express-Installationsanleitung erstellen. Bitte lesen Sie alle Schritte der Installationsanleitung, um alle Details zu erfahren. Zusammengefasst sind dies die vier Befehle, die benötigt werden, um eine lokale Express-Anwendung zu erstellen (siehe unten):

mkdir my-express-app cd my-express-app npm init npm install express

Initialisieren Sie Ihr Git-Repository

Sobald Sie ein neues Express-Projekt lokal erstellt haben, ist es an der Zeit, das lokale Git-Repository zu initialisieren und lokale Dateien mit dem folgenden Befehl zu übertragen:

git init git add package.json package-lock.json git commit -m "Init Express application"

Hinweis: Sie können das Hinzufügen des Ordners node_modules zum Git-Repository ignorieren und stattdessen die folgenden Befehle verwenden:

echo "/node_modules" >> .gitignore git add .gitignore && git commit -m "adding node_modules folder in .gitignore file"

Hinzufügen einer Hello World-Route

Um sicherzustellen, dass Ihre Express-Anwendung leicht zu testen ist, müssen Sie Ihre erste Express-Seite erstellen. Dazu erstellen Sie eine neue index.js-Datei im Stammverzeichnis Ihres Quellcodes, die ein einfaches Hello World-Skript enthält, wie unten zu sehen:

const express = require('express') const app = express() var port = (process.env.PORT || '3000'); app.get('/', (req, res) => { res.send('Hello World!') }) app.listen(port, () => { console.log(`Beispielanwendung hört auf Port ${port}`) })

Übertragen Sie dann Ihre Datei mit den folgenden Befehlen:

git add index.js git commit -m "Hinzufügen eines Hello World"

Erstellen Sie Ihr GitHub-Repository

Der nächste Schritt besteht darin, ein GitHub-Repository zu erstellen. Folgen Sie dazu der offiziellen GitHub-Anleitung, die alle erforderlichen Informationen enthält.

Übertragen Sie den Quellcode in Ihr entferntes Repository

Der letzte Schritt der lokalen Einrichtung besteht darin, Ihren Quellcode mit dem folgenden Befehl in Ihr entferntes GitHub-Repository zu übertragen:

git remote add origin https://github.com/OWNER/REPOSITORY.git git push -u origin main

Konfigurieren Sie Ihr Projekt

Um Ihre Express-Anwendung auf Upsun zu hosten, werden einige YAML-Konfigurationsdateien im Stammverzeichnis Ihres Projekts benötigt, um das Verhalten Ihrer Anwendung zu steuern. Der Code zur automatischen Generierung dieser Dateien ist weiter unten zu finden. Diese YAML-Konfigurationsdateien befinden sich in einem .upsun/-Ordner im Stammverzeichnis Ihres Quellcodes, dessen Architektur wie folgt aussehen wird:

my-express-app ├── .upsun │ └── config.yaml ├── [.environment] └── <Projektquellen>

Bitte beachten Sie: Eine zusätzliche .environment-Datei kann sich auch im Stammverzeichnis Ihres Quellcodes befinden, diese Datei kann Upsun-spezifische Umgebungsvariablen enthalten.

Um diese YAML-Dateien zu generieren, führen Sie den Befehl upsun project:init aus dem Stammverzeichnis Ihres Express-Projekts aus und folgen Sie den Anweisungen, wie Sie unten sehen können:

upsun project:init Willkommen bei Upsun! Lassen Sie uns mit ein paar Fragen beginnen. Wir müssen ein wenig mehr über Ihr Projekt wissen. Dies wird nur eine Minute dauern! ✓ Erkannter Stack: Express ✓ Erkannte Laufzeit: JavaScript/Node.js ✓ Ermittelte Abhängigkeitsmanager: Npm Sagen Sie uns Ihren Projektnamen: [app] (\_/) Wir sind fast fertig... =(^.^)= Zu guter Letzt, sofern Sie keine statische Website erstellen, verwendet Ihr Projekt Dienste. Lassen Sie uns diese definieren: Wählen Sie alle Dienste aus, die Sie verwenden: [] Sie haben keinen Dienst ausgewählt, möchten Sie trotzdem fortfahren? [Ja] ┌───────────────────────────────────────────────────┐ │ GLÜCKWUNSCH!                                │ │ │ │ Wir haben die folgenden Dateien für Sie erstellt:   │ │ - .upsun/config.yaml │ │ │ │ Wir freuen uns riesig! ⍢ │ └───────────────────────────────────────────────────┘ │ / │/ │ (\ /) ( . .) o (_(")(") Sie können nun Ihre Anwendung auf Upsun bereitstellen! Um dies zu tun, übertragen Sie Ihre Dateien und stellen Sie Ihre Anwendung mit der Upsun CLI bereit: $ git add . $ git commit -m 'Add Upsun configuration files' $ upsun push

Der Befehl upsun project:init erkennt automatisch, dass Sie einen Express-Stack verwenden, fragt Sie, ob Sie Dienste hinzufügen möchten (bitte fügen Sie vorerst keine hinzu) und generiert die entsprechenden .upsun/config.yaml YAML-Dateien, etwa so:

# Vollständige Liste aller verfügbaren Eigenschaften: https://docs.upsun.com/create-apps/app-reference.html applications: app: source: root: "/" type: "nodejs:20" mounts: "/.npm": source: "storage" source_path: "npm" web: commands: start: "node index.js" upstream: socket_family: tcp locations: "/": passthru: true build: flavor: none hooks: build: | set -eux npm i # Vollständige Liste der verfügbaren Dienste: https://docs.upsun.com/add-services.html#available-services #services: # db: # type: postgresql:15 # Alle verfügbaren Versionen sind: 15, 14, 13, 12, 11 # Die Routen des Projekts. # Weitere Informationen: https://docs.upsun.com/define-routes.html routes: "https://{default}/": type: upstream upstream: "app:http" "https://www.{default}/": type: redirect to: "https://{default}/"

Übertragen Sie dann Ihre neuen Dateien mit dem folgenden Befehl, und die Projektkonfiguration ist abgeschlossen:

git add .upsun/config.yaml git commit -m "Upsun config files" git push

Erstellen Sie ein neues Upsun-Projekt

Bitte beachten Sie: Wenn Sie noch kein Upsun-Konto haben, erstellen Sie bitte eines, um die folgenden Schritte abzuschließen.

Der nächste Schritt bei der Einrichtung von Express auf Upsun besteht darin, ein Projekt zu erstellen, was über die Konsole einfach zu bewerkstelligen ist. Klicken Sie auf der Startseite der Konsole (alle Projekte) in der oberen rechten Ecke auf die Schaltfläche " Projekt erstellen", wie unten dargestellt:

Wenn Sie noch keine Organisation für das Projekt erstellt haben, werden Sie zunächst aufgefordert, eine solche zu erstellen. Sobald Sie dies getan haben, wählen Sie diese Organisation aus dem Dropdown-Menü aus, und wählen Sie dann Bereitstellen mit GitHub, wie auf dem Bildschirm unten zu sehen:

Wählen Sie dann aus den angebotenen Optionen die Option Mit GitHub verbinden aus, wie hier zu sehen:

Im nächsten Formular, das angezeigt wird, wählen Sie Ihre GitHub-Organisation aus der ersten Dropdown-Liste aus, wählen dann Installieren & Autorisieren und geben die GitHub-Anmeldedaten ein. Wählen Sie Ihre GitHub-Organisation und das zuvor erstellte GitHub-Repository aus und klicken Sie auf Weiter.

Sie werden dann zu Schritt drei der Einrichtung weitergeleitet - wie unten zu sehen -, wo Sie verschiedene Details wie Projektname, Umgebungsname und Region eingeben müssen. Wählen Sie anschließend Projekt erstellen.

Auf der nächsten Seite sehen Sie auf der linken Seite weitere Einrichtungsanweisungen, falls Sie diese benötigen, während der Prozess der Projekterstellung im Hintergrund weiterläuft. Auf der rechten Seite können Sie den Prozess der Projekterstellung verfolgen und werden informiert, wenn er abgeschlossen ist, wie auf dem Bildschirm unten zu sehen:

Sobald Ihr Projekt erstellt wurde, wird der GitHub-Integrationsprozess Ihre Anwendung automatisch auf der Grundlage des Quellcodes Ihres GitHub-Repositorys bereitstellen. Warten Sie, bis die Integration die Bereitstellung abgeschlossen hat. Anschließend werden die Informationen zu Ihrer Anwendung angezeigt, die Sie in der folgenden Abbildung sehen können:

Am Ende des Prozesses führen Sie bitte den folgenden Befehl aus, um die Remote zu setzen, indem Sie die Upsun CLI verwenden:

upsun project:set-remote <ProjectID>

Zeit für die Bereitstellung, richtig?

Und genau so ist es Zeit für den Einsatz! Doch halt...

Da Sie bereits im Abschnitt zur Projektkonfiguration sichergestellt haben, dass Ihr Quellcode Upsun-ready ist, wurde Ihr Projekt bei der Projekterstellung automatisch bereitgestellt und Ihre Anwendung ist bereits live, ohne dass eine Bereitstellung erforderlich ist. Überprüfen Sie Ihre neue Projekt-URL am unteren Rand der Konsolenoberfläche.

Als Nächstes müssen Sie auf Ihre Projektkonsole zugreifen, indem Sie unten auf der Einrichtungsseite auf die Schaltfläche " Projekt anzeigen" klicken. Und schon ist Ihre Express-Anwendung live und Sie können mit ihr spielen und viele neue Funktionen hinzufügen!

Nützliche Links

Wie Sie die Ressourcenzuweisung und Cloud-Datenbankdienste für Express-Anwendungen optimieren können