Serviere statische Dateien in Express

Um statische Dateien wie Bilder, CSS-Dateien und JavaScript-Dateien bereitzustellen, verwenden Sie die in Express integrierte Middleware-Funktion express.static.

Die Funktionssignatur ist:

express.static(root, [options]);

Das root Argument gibt das Wurzelverzeichnis an, von dem aus statische Assets ausgeliefert werden sollen. Für weitere Informationen zum Argument options siehe express.static.

Verwenden Sie zum Beispiel den folgenden Code, um Bilder, CSS-Dateien und JavaScript-Dateien in einem Verzeichnis mit dem Namen public auszugeben:

app.use(express.static('public'));

Jetzt kannst du die Dateien im public Verzeichnis laden:

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

Note

Express sucht die Dateien relativ zum statischen Verzeichnis, so dass der Name des statischen Verzeichnisses nicht Teil der URL ist.

Um mehrere statische Asset-Verzeichnisse zu verwenden, rufen Sie die express.static Middleware-Funktion mehrmals auf:

app.use(express.static('public'));
app.use(express.static('files'));

Express sucht die Dateien in der Reihenfolge, in der du die statischen Verzeichnisse mit der Middleware-Funktion express.static gesetzt hast.

Note

Für beste Ergebnisse Benutze einen Reverse Proxy Cache um die Leistung von zu verbessern und statische Assets zu bedienen.

Um einen virtuellen Pfad-Präfix zu erstellen (wo der Pfad existiert eigentlich nicht im Dateisystem) für Dateien, die durch die express. tatic Funktion, einen Mount-Pfad angeben für das statische Verzeichnis angeben, wie unten angezeigt:

app.use('/static', express.static('public'));

Nun kannst du die Dateien, die sich im public Verzeichnis befinden, aus dem /static Pfadpräfix laden.

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

Der Pfad, den du der express.static Funktion zur Verfügung stellst, ist jedoch relativ zu dem Verzeichnis, von dem aus du deinen node Prozess startest. Wenn Sie die Express-App aus einem anderen Verzeichnis ausführen, ist es sicherer, den absoluten Pfad des Verzeichnisses zu verwenden, das Sie verwenden möchten:

const path = require('path');
app.use('/static', express.static(path.join(__dirname, 'public')));

Weitere Informationen über die serve-static Funktion und ihre Optionen finden Sie unter serve-static.