Ein Quick-Start für das Hosting von Express auf Upsun
Willkommen zu unserer Quick-Start-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.
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"
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(`Example app listening on port ${port}`)
})
Übertragen Sie dann Ihre Datei mit den folgenden Befehlen:
git add index.js
git commit -m "adding a 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 Remote 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]
└── <project sources>
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
Welcome to Upsun!
Let's get started with a few questions.
We need to know a bit more about your project. This will only take a minute!
✓ Detected stack: Express
✓ Detected runtime: JavaScript/Node.js
✓ Detected dependency managers: Npm
Tell us your project name: [app]
(\_/)
We're almost done... =(^.^)=
Last but not least, unless you're creating a static website, your project uses services. Let's define them:
Select all the services you are using: []
You have not selected any service, would you like to proceed anyway? [Yes]
┌───────────────────────────────────────────────────┐
│ CONGRATULATIONS! │
│ │
│ We have created the following files for your: │
│ - .upsun/config.yaml │
│ │
│ We're jumping for joy! ⍢ │
└───────────────────────────────────────────────────┘
│ /
│/
│
(\ /)
( . .)
o (_(")(")
You can now deploy your application to Upsun!
To do so, commit your files and deploy your application using the Upsun CLI:
$ 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:
# Complete list of all available properties: 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
# Full list of available services: https://docs.upsun.com/add-services.html#available-services
#services:
# db:
# type: postgresql:15 # All available versions are: 15, 14, 13, 12, 11
# The routes of the project.
# More information: 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
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
Ihr größtes Werk
steht vor der Tür
