REST-Server mit statischen HTML Seiten bzw. Bildern in 5 Minuten erstellen – Wenzlaff.de

Wie in diesem Beitrag beschrieben, kann leicht ein REST-Server in 5 Minuten erstellt werden. Auch die Sicherheit kann in 5 Minuten mit Helmet erweitert werden, wie hier beschrieben. Wer weitere 5 Minuten hat, kann auch auf ein Verzeichnis mit statischen Resourcen zugreifen.

Eine statische Webseite ist eine Art von Webseite, bei der die Inhalte für jede Seite im Voraus erstellt werden und nicht dynamisch auf Anfrage generiert werden. Dies bedeutet, dass der Inhalt jeder Seite statisch ist und sich nicht ändert, es sei denn, jemand bearbeitet manuell die HTML-Dateien, die die Seiten darstellen.

Statische Webseiten werden oft verwendet, wenn der Inhalt der Seite selten oder nie aktualisiert wird, z.B. bei Landingpages, Informationsseiten oder Blogs mit selten aktualisierten Inhalten. Sie sind einfach zu erstellen und zu verwalten und erfordern keine spezielle Software oder Programmierkenntnisse.

Ein Vorteil von statischen Webseiten ist, dass sie in der Regel schneller geladen werden als dynamische Webseiten, da keine Rechenleistung für die Generierung von Inhalten benötigt wird. Sie sind auch sicherer, da sie weniger anfällig für Hackerangriffe sind und weniger Ressourcen benötigen.

Ein Nachteil von statischen Webseiten ist jedoch, dass sie nicht interaktiv sind und keine Möglichkeit bieten, Inhalte dynamisch zu generieren oder zu aktualisieren, ohne manuell die HTML-Dateien zu bearbeiten.

Für statische Webseiten gibt es mittlerweile auch viele statische Site Generator wie Jekyll, Hugo, Gatsby usw. die durch die Verwendung von Templates und Automatisierung Prozessen die Erstellung und Pflege von statischen Webseiten erleichtern.

In der Regel werden statische Webseiten auf einem Webserver gehostet und können über das HTTP-Protokoll aufgerufen werden. Eine weitere Möglichkeit ist es statische Ressourcen auf Content Delivery Networks (CDN) zu hosten, was die Ladezeiten weiter verbessert und die Last auf dem eigenen Server reduziert.

Wir erstellen im Hauptverzeichnis des angelegten Projektes ein neues Verzeichnis mit Namen public. Dort kopieren wir z.B. ein Bild mit Namen silbersee.jpeg rein. Dann erstellen wir in der index.js die Zeilen:

// das public Verzeichnis einbinden
app.use(express.static("public"));

// den REST-Point /bild an das Bild binden
app.get('/bild', (req, res) => {
  res.sendFile(__dirname + '/public/silbersee.jpeg');
});

// das public Verzeichnis einbinden

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

// den REST-Point /bild an das Bild binden

app.get('/bild', (req, res) => {

res.sendFile(__dirname + '/public/silbersee.jpeg');

});

Nach dem starten des Servers mit node index.js und aufrufen der URL:

http://localhost:5500/silbersee.jpeg

wird das Bild angezeigt. Oder auch über den REST-Point /bild

http://localhost:5500/bild

Hier noch der ganze Beispielcode der index.js

const express = require("express");
const helmet = require('helmet');
const app = express();

app.use(express.json());
app.use(helmet());

// http://localhost:5500/silbersee.jpeg  Datei muss im /public Verzeichnis liegen
app.use(express.static("public"));

// http://localhost:5500/bild Datei muss im /public Verzeichnis liegen
app.get('/bild', (req, res) => {
  res.sendFile(__dirname + '/public/silbersee.jpeg');
});


app.get("/api", function (req, res) {
  res.status(200).json({ message: "Hallo Kleinhirn.eu" });
});
app.get("/api/info", function (req, res) {
  res.status(200).json({ message: "Thomas Wenzlaff" });
});
app.get("/api/pis", (req, res) => {
  const pis = [
    { id: 1, name: "Raspberry Pi W Zero" },
    { id: 2, name: "Raspberry Pi 3" },
    { id: 3, name: "Raspberry Pi 4" },
  ];
  res.json(pis);
});

const port = process.env.PORT || 5500;

app.listen(port, () => console.log(`Server hört an Port: ${port}`));

const express = require("express");

const helmet = require('helmet');

const app = express();

app.use(express.json());

app.use(helmet());

// http://localhost:5500/silbersee.jpeg Datei muss im /public Verzeichnis liegen

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

// http://localhost:5500/bild Datei muss im /public Verzeichnis liegen

app.get('/bild', (req, res) => {

res.sendFile(__dirname + '/public/silbersee.jpeg');

});

app.get("/api", function (req, res) {

res.status(200).json({ message: "Hallo Kleinhirn.eu" });

});

app.get("/api/info", function (req, res) {

res.status(200).json({ message: "Thomas Wenzlaff" });

});

app.get("/api/pis", (req, res) => {

const pis = [

{ id: 1, name: "Raspberry Pi W Zero" },

{ id: 2, name: "Raspberry Pi 3" },

{ id: 3, name: "Raspberry Pi 4" },

];

res.json(pis);

});

const port = process.env.PORT || 5500;

app.listen(port, () => console.log(`Server hört an Port: ${port}`));