Node.js Image API (Express)¶

📌 1. Ziel der Aufgabe¶

In dieser Aufgabe haben wir eine einfache Bild-API mit Node.js und dem Framework Express erstellt. Ziel war es, statische Dateien (wie Bilder und HTML-Seiten) über einen Server bereitzustellen und im Frontend anzuzeigen.

✏️ 2. Umsetzung: Der Code¶

Ich habe den Code lokal auf meinem Laptop im Verzeichnis projects/node-image-api entwickelt.

Projektinitialisierung¶

Zuerst habe ich das Projekt initialisiert und Express installiert:

npm init -y
npm install express

Ordnerstruktur¶

Die vorgegebene Dateistruktur sieht so aus:

- node-image-api
  - public
    - images
      - bild.jpg
  - server.js
  - index.html

`server.js`¶

Dies ist der Setup-Code für den Express-Server. Mit express.static gebe ich den Ordner public für direkte Zugriffe frei. Zudem habe ich eine explizite Route für /image konfiguriert.

const express = require('express');
const path = require('path');

const app = express();
const port = 3000;

// Statischer Dateiserver für den "public" Ordner
app.use(express.static(path.join(__dirname, 'public')));

// Route für das Hauptdokument (HTML)
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

// Route für das Bild
app.get('/image', (req, res) => {
    res.sendFile(path.join(__dirname, 'public/images/bild.jpg'));
});

// '0.0.0.0' sorgt für Erreichbarkeit im ganzen Netzwerk
app.listen(port, '0.0.0.0', () => {
    console.log(`Server is running at http://localhost:${port}`);
});

`index.html`¶

Das HTML-Dokument bindet das Bild über localhost ein (da das HTML selbst vom Server ausgeliefert wird).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Display</title>
</head>
<body>
  <h1>Willkommen zur Bild-API!</h1>
  <img src="http://localhost:3000/image" alt="Mein API Bild" style="max-width: 100%; height: auto;">
</body>
</html>

🚀 3. Deployment auf dem Raspberry Pi¶

Dateitransfer¶

Ich lade die Projektdateien auf meinen Raspberry Pi (IP: 10.27.160.12). Davor stelle ich sicher, dass ich im Terminal in das korrekte Dokumentationsverzeichnis navigiert habe:

cd "C:\Users\joelm\OneDrive - Kt. SG BLD\2. Schuljahr\1. Semester\Module\V293\meine-dokumentation"

# Den gesamten Projektordner kopieren (rekursiv mit -r):
scp -r projects/node-image-api m295@10.27.160.12:/home/m295/class/joel/

Zum Beweis, dass das Bild bild.jpg erfolgreich auf den Raspberry Pi kopiert wurde:

Installations-Probleme verhindern¶

WICHTIG: Den Ordner node_modules sollte man eigentlich nicht per scp kopieren. Auf dem Pi müssen im geklonten Ordner die Abhängigkeiten einmal via npm install neu aufgebaut werden (falls eine package.json Datei im Ordner node-image-api existiert).

ssh m295@10.27.160.12
cd /home/m295/class/joel/node-image-api
npm install
node server.js

Testen & Resultat¶

Ich kann das Bild nun in meinem Browser betrachten, indem ich die Raspberry Pi IP samt dem Port eingebe (Beispiel für Port-Mapping 4011):

http://10.27.160.12:4011/

🌐 4. Zugriff durch andere Lernende¶

Auch dieses Projekt ist für andere im Schulnetzwerk unter meinem Link erreichbar:

Test-Link für Mitschüler: http://10.27.160.12:4011/

Anforderungs-Checkliste¶

Projekt via npm init initialisiert
Express Framework via npm install express installiert
Spezifische Public-Ordnerstruktur eingehalten
server.js mit express.static-Setup geschrieben
HTML-Frontend index.html mit korrekt verlinktem img-Tag erstellt
Doku hochgeladen