{"id":19979,"date":"2023-01-22T04:31:36","date_gmt":"2023-01-22T03:31:36","guid":{"rendered":"http:\/\/blog.wenzlaff.de\/?p=19979"},"modified":"2023-01-21T18:54:17","modified_gmt":"2023-01-21T17:54:17","slug":"rest-server-mit-statischen-html-seiten-bzw-bildern-in-5-minuten-erstellen","status":"publish","type":"post","link":"http:\/\/blog.wenzlaff.de\/?p=19979","title":{"rendered":"REST-Server mit statischen HTML Seiten bzw. Bildern in 5 Minuten erstellen"},"content":{"rendered":"

Wie in diesem Beitrag<\/a> 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<\/a>. Wer weitere 5 Minuten hat, kann auch auf ein Verzeichnis mit statischen Resourcen zugreifen.<\/p>\n

\"\"<\/p>\n

Eine statische Webseite ist eine Art von Webseite, bei der die Inhalte f\u00fcr 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 \u00e4ndert, es sei denn, jemand bearbeitet manuell die HTML-Dateien, die die Seiten darstellen.<\/p>\n

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. <\/p>\n

Ein Vorteil von statischen Webseiten ist, dass sie in der Regel schneller geladen werden als dynamische Webseiten, da keine Rechenleistung f\u00fcr die Generierung von Inhalten ben\u00f6tigt wird. Sie sind auch sicherer, da sie weniger anf\u00e4llig f\u00fcr Hackerangriffe sind und weniger Ressourcen ben\u00f6tigen.<\/p>\n

Ein Nachteil von statischen Webseiten ist jedoch, dass sie nicht interaktiv sind und keine M\u00f6glichkeit bieten, Inhalte dynamisch zu generieren oder zu aktualisieren, ohne manuell die HTML-Dateien zu bearbeiten.<\/p>\n

F\u00fcr 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.<\/p>\n

In der Regel werden statische Webseiten auf einem Webserver gehostet und k\u00f6nnen \u00fcber das HTTP-Protokoll aufgerufen werden. Eine weitere M\u00f6glichkeit ist es statische Ressourcen auf Content Delivery Networks (CDN) zu hosten, was die Ladezeiten weiter verbessert und die Last auf dem eigenen Server reduziert.<\/p>\n

Wir erstellen im Hauptverzeichnis des angelegten Projektes<\/a> ein neues Verzeichnis mit Namen public<\/strong>. Dort kopieren wir z.B. ein Bild mit Namen silbersee.jpeg<\/a><\/strong> rein. Dann erstellen wir in der index.js<\/strong> die Zeilen:<\/p>\n

\r\n\r\n\/\/ das public Verzeichnis einbinden\r\napp.use(express.static(\"public\"));\r\n\r\n\/\/ den REST-Point \/bild an das Bild binden\r\napp.get('\/bild', (req, res) => {\r\n  res.sendFile(__dirname + '\/public\/silbersee.jpeg');\r\n});<\/pre>\n
Nach dem starten des Servers mit node index.js<\/strong> und aufrufen der URL:<\/p>\n
http:\/\/localhost:5500\/silbersee.jpeg<\/strong><\/p>\n
wird das Bild angezeigt. Oder auch \u00fcber den REST-Point \/bild<\/strong><\/p>\n
http:\/\/localhost:5500\/bild<\/strong> <\/p>\n
Hier noch der ganze Beispielcode der index.js<\/strong> <\/p>\n
\r\n\r\nconst express = require(\"express\");\r\nconst helmet = require('helmet');\r\nconst app = express();\r\n\r\napp.use(express.json());\r\napp.use(helmet());\r\n\r\n\/\/ http:\/\/localhost:5500\/silbersee.jpeg  Datei muss im \/public Verzeichnis liegen\r\napp.use(express.static(\"public\"));\r\n\r\n\/\/ http:\/\/localhost:5500\/bild Datei muss im \/public Verzeichnis liegen\r\napp.get('\/bild', (req, res) => {\r\n  res.sendFile(__dirname + '\/public\/silbersee.jpeg');\r\n});\r\n\r\n\r\napp.get(\"\/api\", function (req, res) {\r\n  res.status(200).json({ message: \"Hallo Kleinhirn.eu\" });\r\n});\r\napp.get(\"\/api\/info\", function (req, res) {\r\n  res.status(200).json({ message: \"Thomas Wenzlaff\" });\r\n});\r\napp.get(\"\/api\/pis\", (req, res) => {\r\n  const pis = [\r\n    { id: 1, name: \"Raspberry Pi W Zero\" },\r\n    { id: 2, name: \"Raspberry Pi 3\" },\r\n    { id: 3, name: \"Raspberry Pi 4\" },\r\n  ];\r\n  res.json(pis);\r\n});\r\n\r\nconst port = process.env.PORT || 5500;\r\n\r\napp.listen(port, () => console.log(`Server h\u00f6rt an Port: ${port}`));<\/pre>\n","protected":false},"excerpt":{"rendered":"
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\u00fcr … <\/p>\n
\u201eREST-Server mit statischen HTML Seiten bzw. Bildern in 5 Minuten erstellen\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[220,3137,808,5348,79,4960,3388],"tags":[5358,4953,4462,2487,4109,5121,83,1267,5357,5151],"class_list":["post-19979","post","type-post","status-publish","format-standard","hentry","category-anleitung","category-javascript","category-linux-2","category-openais-gpt-4","category-programmierung","category-react","category-script","tag-index-js","tag-js","tag-react","tag-rest","tag-rest-service","tag-rest-server","tag-server","tag-service","tag-statisch","tag-statische-webseiten"],"_links":{"self":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/19979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=19979"}],"version-history":[{"count":0,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/19979\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=19979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=19979"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=19979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}