CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld - Lernen Sie Webentwicklung | MDN</title><link rel="alternate" title="Express Tutorial Part 7: Deploying to production" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment" hrefLang="en"/><link rel="alternate" title="Express 教程 7：部署到生产环境" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment" hrefLang="zh"/><link rel="alternate" title="Express 教學 7: 佈署到生產環境" href="https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment" hrefLang="zh-Hant"/><link rel="alternate" title="Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld" href="https://developer.mozilla.org/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment" hrefLang="de"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="Nun, da Sie eine großartige LocalLibrary Website erstellt (und getestet) haben, möchten Sie sie auf einem öffentlichen Webserver installieren, damit Bibliotheksmitarbeiter und Mitglieder über das Internet darauf zugreifen können. Dieser Artikel bietet einen Überblick darüber, wie Sie einen Host zur Bereitstellung Ihrer Website finden können und was Sie tun müssen, um Ihre Website für den Produktionseinsatz bereit zu machen."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment"/><meta property="og:title" content="Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld - Lernen Sie Webentwicklung | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="Nun, da Sie eine großartige LocalLibrary Website erstellt (und getestet) haben, möchten Sie sie auf einem öffentlichen Webserver installieren, damit Bibliotheksmitarbeiter und Mitglieder über das Internet darauf zugreifen können. Dieser Artikel bietet einen Überblick darüber, wie Sie einen Host zur Bereitstellung Ihrer Website finden können und was Sie tun müssen, um Ihre Website für den Produktionseinsatz bereit zu machen."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-learn document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/de/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/de/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/de/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/de/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/de/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/de/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/de/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/de/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/de/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/de/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/de/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/de/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/de/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/de/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/de/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/de/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FExpress_Nodejs%2Fdeployment" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FExpress_Nodejs%2Fdeployment" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Lernen Sie Webentwicklung</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Extensions" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Erweiterungsmodule</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Extensions/Server-side" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Serverseitige Webprogrammierung</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Express Web Framework (Node.js/JavaScript)</span></a><meta property="position" content="4"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</span></a><meta property="position" content="5"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>Deutsch<span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment" class="button submenu-item"><span>中文 (简体)</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment" class="button submenu-item"><span>正體中文 (繁體)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard experimental localized-content-note"><p><a href="https://github.com/orgs/mdn/discussions/741" class="external"><strong>Experiment</strong>: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#übersicht">Übersicht</a></li><li class="document-toc-item "><a class="document-toc-link" href="#was_ist_eine_produktionsumgebung">Was ist eine Produktionsumgebung?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#auswahl_eines_hosting-anbieters">Auswahl eines Hosting-Anbieters</a></li><li class="document-toc-item "><a class="document-toc-link" href="#ihre_website_bereit_zur_veröffentlichung_machen">Ihre Website bereit zur Veröffentlichung machen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#beispiel_hosting_auf_glitch">Beispiel: Hosting auf Glitch</a></li><li class="document-toc-item "><a class="document-toc-link" href="#beispiel_hosting_auf_railway">Beispiel: Hosting auf Railway</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li><li class="document-toc-item "><a class="document-toc-link" href="#siehe_auch">Siehe auch</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/de/docs/Learn_web_development/Getting_started">Einstiegsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup">Umgebung einrichten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">Installation grundlegender Software</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">Surfen im Web</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">Code-Editor</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">Umgang mit Dateien</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website">Ihre erste Website</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">Wie wird Ihre Website aussehen?</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: Erstellen der Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: Gestaltung des Inhalts</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: Interaktivität hinzufügen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Web_standards">Webstandards</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">How the web works</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">Das Modell der Webstandards</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">Wie Browser Websites laden</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills">Soziale Kompetenzen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">Forschung und Lernen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">Zusammenarbeit und Teamarbeit</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">Workflows und Prozesse</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn_web_development/Core">Kernmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Structuring_content">Inhalte mit HTML strukturieren</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">Grundlegende HTML-Syntax</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">Überschriften und Absätze in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">Hervorhebung und Wichtigkeit</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Lists">Listen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">Strukturierung von Dokumenten</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">Erweiterte Textfunktionen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Creating_links">Erstellen von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML-Bilder</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">HTML video und audio</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Herausforderung: Mozilla Splash-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">Grundlagen von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">Barrierefreiheit von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms">Formulare und Schaltflächen in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">Debugging von HTML</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Styling_basics">Grundlagen des CSS-Stylings</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">Was ist CSS?</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Getting_started">Einstieg in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">Grundlagen der CSS-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">Attribut-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">Pseudoklassen und Pseudoelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Combinators">Kombinatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Box_model">Das Box-Modell</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">Umgang mit Konflikten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS-Werte und -Einheiten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Sizing">Größenbestimmung von Elementen in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">Hintergründe und Rahmen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Overflow">Überlaufender Inhalt</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">Bilder, Medien und Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Tables">Tabellen stylen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">Debugging CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Text_styling">CSS-Textgestaltung</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Fundamentals">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_lists">Listen gestalten</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_links">Gestaltung von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Web_fonts">Webfonts</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/CSS_layout">CSS-Layout</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Introduction">Einführung in CSS-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Floats">Floats</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Positioning">Platzierung</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Grids">CSS-Grid-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">Responsives Design</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Media_queries">Grundlagen von Media Query</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Scripting">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">Was ist JavaScript?</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/A_first_splash">Erster Einblick in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_went_wrong">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Variables">Speichern der benötigten Informationen — Variablen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Math">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Strings">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods">Nützliche String-Methoden</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Arrays">Arrays</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Conditionals">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Loops">Code-Schleifen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Functions">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function">Erstellen Sie Ihre eigene Funktion</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Return_values">Funktionsrückgabewerte</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Events">Einführung in Ereignisse</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Event_bubbling">Ereignis-Bubbling</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Image_gallery">Herausforderung: Bildergalerie</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript-Objektgrundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/DOM_scripting">Einführung in DOM-Scripting</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Network_requests">Netzwerkanfragen mit JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/JSON">Arbeiten mit JSON</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">Debugging JavaScript and handling errors</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">Einführung in client-seitige Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">Hauptmerkmale von Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">Erste Schritte mit React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">Beginn unserer React To-Do-Liste</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components">Komponenten in unserer React-App erstellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React Interaktivität: Events und State</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">Barrierefreiheit in React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React-Ressourcen</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Accessibility">Barrierefreiheit</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">Was ist Barrierefreiheit?</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Tooling">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/HTML">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA Grundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Multimedia">Barrierefreie Multimedia-Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Mobile">Mobile Accessibility</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Core/Design_for_developers">Design für Entwickler:innen</a></li><li><a href="/de/docs/Learn_web_development/Core/Version_control">Versionskontrolle</a></li><li class="section"><a href="/de/docs/Learn_web_development/Extensions">Erweiterungsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">Objektprototypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">Objektorientierte Programmierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">Klassen in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">Objektbaupraxis</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs">Client-seitige Web-APIs</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Einführung in Web-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">Video- und Audio-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">Zeichnen von Grafiken</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">Client-seitiger Speicher</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">Third-party APIs</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Async_JS">Asynchrones JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing">Einführung in asynchrones JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Promises">Anleitung zur Verwendung von Promises</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">Wie man eine Promise-basierte API implementiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">Einführung in Worker</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Forms">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Your_first_form">Ihr erstes Formular</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">Wie man ein Webformular strukturiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">Grundlegende native Formularsteuerungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">Die HTML5-Eingabetypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls">Andere Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">Styling von Webformularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">Fortgeschrittenes Formular-Styling</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI-Pseudoklassen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Form_validation">Client-seitige Formularvalidierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">Senden von Formulardaten</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools">Verständnis für clientseitige Tools</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview">Überblick über Client-seitige Tools</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">Grundlagen des Paketmanagements</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">Einführung in eine vollständige Werkzeugkette</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">Bereitstellung unserer App</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side">Serverseitige Programmierung</a></summary><ol><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps">Erste Schritte auf der Serverseite</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">Einführung in die Server-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">Überblick über Client-Server</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">Server-seitige Web-Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">Website-Sicherheit</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django">Django Web-Framework (Python)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Einführung in Django</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django Webanwendungssicherheit</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express Web-Framework (Node.js)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Einführung in Express/Node</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><em><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment" aria-current="page">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></em></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Performance">Web-Performance</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Performance/why_web_performance">Das "Warum" der Web-Performance</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">Was ist Web-Performance?</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance">Wahrgenommene Leistung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance">Leistungsmessung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Multimedia">Multimedia: Bilder</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/video">Multimedia: video</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/HTML">HTML-Performance-Optimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/CSS">CSS-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Testing">Tests</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Introduction">Einführung in das Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies">Strategien zur Durchführung von Tests</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Feature_detection">Implementierung der Funktionsprüfung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Automated_testing">Einführung in automatisiertes Testen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Extensions/Transform_animate">CSS transformieren und animieren</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Security_privacy">Sicherheit und Datenschutz</a></li><li class="section">Weitere Ressourcen</li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Howto">Häufige Probleme lösen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Howto/Solve_HTML_problems">Häufige HTML-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_CSS_problems">Häufige CSS-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems">Häufige JavaScript-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Web_mechanics">Webmechanik</a></li><li><a href="/de/docs/Learn_web_development/Howto/Tools_and_setup">Tools und Einrichtung</a></li><li><a href="/de/docs/Learn_web_development/Howto/Design_and_accessibility">Design und Barrierefreiheit</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/About">Über</a></li><li><a href="/de/docs/Learn_web_development/Educators">Ressourcen für Lehrkräfte</a></li><li><a href="/de/docs/Learn_web_development/Changelog">Änderungsprotokoll</a></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#übersicht">Übersicht</a></li><li class="document-toc-item "><a class="document-toc-link" href="#was_ist_eine_produktionsumgebung">Was ist eine Produktionsumgebung?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#auswahl_eines_hosting-anbieters">Auswahl eines Hosting-Anbieters</a></li><li class="document-toc-item "><a class="document-toc-link" href="#ihre_website_bereit_zur_veröffentlichung_machen">Ihre Website bereit zur Veröffentlichung machen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#beispiel_hosting_auf_glitch">Beispiel: Hosting auf Glitch</a></li><li class="document-toc-item "><a class="document-toc-link" href="#beispiel_hosting_auf_railway">Beispiel: Hosting auf Railway</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li><li class="document-toc-item "><a class="document-toc-link" href="#siehe_auch">Siehe auch</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="de"><header><h1>Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms"><span class="button-wrap"> Zurück </span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs"><span class="button-wrap"> Übersicht: Express Web Framework (Node.js/JavaScript)</span></a></li></ul> <p>Nun, da Sie eine großartige <a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a> Website erstellt (und getestet) haben, möchten Sie sie auf einem öffentlichen Webserver installieren, damit Bibliotheksmitarbeiter und Mitglieder über das Internet darauf zugreifen können. Dieser Artikel bietet einen Überblick darüber, wie Sie einen Host zur Bereitstellung Ihrer Website finden können und was Sie tun müssen, um Ihre Website für den Produktionseinsatz bereit zu machen.</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">Voraussetzungen:</th> <td> Schließen Sie alle vorherigen Themen des Tutorials ab, einschließlich <a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express Tutorial Teil 6: Arbeiten mit Formularen</a>. </td> </tr> <tr> <th scope="row">Ziel:</th> <td> Lernen, wo und wie Sie eine Express-App für die Produktion bereitstellen können. </td> </tr> </tbody> </table></figure></div><section aria-labelledby="übersicht"><h2 id="übersicht"><a href="#übersicht">Übersicht</a></h2><div class="section-content"><p>Sobald Ihre Website fertig ist (oder fertig genug für öffentliche Tests), müssen Sie sie auf einem öffentlich zugänglichen und zugänglicheren Ort als Ihrem persönlichen Entwicklungscomputer hosten.</p> <p>Bis jetzt haben Sie in einer <a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Entwicklungsumgebung</a> gearbeitet, Express/Node als Webserver verwendet, um Ihre Website mit dem lokalen Browser/Netzwerk zu teilen, und Ihre Website mit (unsicheren) Entwicklereinstellungen betrieben, die Debugging und andere private Informationen offenlegen. Bevor Sie eine Website extern hosten können, müssen Sie zuerst:</p> <ul> <li>Eine Umgebung für das Hosting der Express-App auswählen.</li> <li>Einige Änderungen an Ihren Projekteinstellungen vornehmen.</li> <li>Eine Produktionsinfrastruktur für die Bereitstellung Ihrer Website einrichten.</li> </ul> <p>Dieses Tutorial bietet einige Anleitungen zu Ihren Optionen für die Auswahl einer Hosting-Site, einen kurzen Überblick darüber, was Sie tun müssen, um Ihre Express-App für die Produktion bereitzumachen, und ein funktionierendes Beispiel, wie die LocalLibrary-Website auf dem <a href="https://railway.app/" class="external" target="_blank">Railway</a>-Cloud-Hosting-Dienst installiert wird.</p></div></section><section aria-labelledby="was_ist_eine_produktionsumgebung"><h2 id="was_ist_eine_produktionsumgebung"><a href="#was_ist_eine_produktionsumgebung">Was ist eine Produktionsumgebung?</a></h2><div class="section-content"><p>Die Produktionsumgebung ist die Umgebung, die vom Server-Computer bereitgestellt wird, auf dem Sie Ihre Website für den externen Verbrauch betreiben. Die Umgebung umfasst:</p> <ul> <li>Computer-Hardware, auf der die Website läuft.</li> <li>Betriebssystem (z.B. Linux oder Windows).</li> <li>Programmiersprachen-Runtime und Framework-Bibliotheken, auf denen Ihre Website geschrieben ist.</li> <li>Webserver-Infrastruktur, möglicherweise einschließlich eines Webservers, Reverse-Proxys, Load Balancers usw.</li> <li>Datenbanken, von denen Ihre Website abhängt.</li> </ul> <p>Der Server-Computer könnte sich auf Ihrem Gelände befinden und über eine schnelle Verbindung mit dem Internet verbunden sein, aber es ist viel üblicher, einen Computer zu verwenden, der "in der Cloud" gehostet wird. Das bedeutet in der Praxis, dass Ihr Code auf einem entfernten Computer (oder möglicherweise einem "virtuellen" Computer) im/den Rechenzentrum(en) Ihres Hosting-Unternehmens ausgeführt wird. Der Remote-Server bietet in der Regel ein garantiertes Niveau an Rechenressourcen (z.B. CPU, RAM, Speicherkapazität usw.) und Internetkonnektivität zu einem bestimmten Preis.</p> <p>Diese Art von ferngesteuerten Rechen-/Netzwerk-Hardware wird als <em>Infrastructure as a Service (IaaS)</em> bezeichnet. Viele IaaS-Anbieter bieten Optionen an, ein bestimmtes Betriebssystem vorzuinstallieren, auf das Sie die anderen Komponenten Ihrer Produktionsumgebung installieren müssen. Andere Anbieter erlauben Ihnen, vollständigere Umgebungen auszuwählen, die möglicherweise eine komplette Node-Einrichtung enthalten.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Vorgefertigte Umgebungen können die Einrichtung Ihrer Website sehr einfach machen, da sie die Konfiguration reduzieren. Allerdings können die verfügbaren Optionen Sie möglicherweise auf einen unbekannten Server (oder andere Komponenten) beschränken und auf einer älteren Version des Betriebssystems basieren. Oft ist es besser, die Komponenten selbst zu installieren, damit Sie die gewünschten erhalten, und wenn Sie Teile des Systems aktualisieren müssen, wissen Sie, wo Sie anfangen müssen!</p> </div> <p>Andere Hosting-Anbieter unterstützen Express als Teil eines <em>Platform as a Service</em> (<em>PaaS</em>)-Angebots. Bei Verwendung dieser Art von Hosting müssen Sie sich um den größten Teil Ihres Produktionsumfeldes (Server, Load Balancer usw.) nicht kümmern, da die Hostplattform diese für Sie übernimmt. Dadurch wird die Bereitstellung recht einfach, da Sie sich nur auf Ihre Webanwendung konzentrieren müssen und nicht auf andere Serverinfrastruktur.</p> <p>Einige Entwickler wählen die erhöhte Flexibilität, die IaaS gegenüber PaaS bietet, während andere die reduzierte Wartungsbelastung und das einfachere Skalieren von PaaS schätzen. Wenn Sie gerade erst anfangen, ist die Einrichtung Ihrer Website auf einem PaaS-System viel einfacher, und genau das werden wir in diesem Tutorial tun.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie sich für einen Node/Express-freundlichen Hosting-Anbieter entscheiden, sollte er Anleitungen zur Einrichtung einer Express-Website mit verschiedenen Konfigurationen von Webserver, Anwendungsserver, Reverse-Proxy usw. bereitstellen. Zum Beispiel gibt es viele Schritt-für-Schritt-Anleitungen für verschiedene Konfigurationen in den <a href="https://www.digitalocean.com/community/tutorials?q=node" class="external" target="_blank">DigitalOcean Node Community-Dokumentationen</a>.</p> </div></div></section><section aria-labelledby="auswahl_eines_hosting-anbieters"><h2 id="auswahl_eines_hosting-anbieters"><a href="#auswahl_eines_hosting-anbieters">Auswahl eines Hosting-Anbieters</a></h2><div class="section-content"><p>Es gibt zahlreiche Hosting-Anbieter, die entweder aktiv Unterstützung bieten oder gut mit <em>Node</em> (und <em>Express</em>) funktionieren. Diese Anbieter bieten verschiedene Arten von Umgebungen (IaaS, PaaS) und verschiedene Ebenen von Rechen- und Netzwerkressourcen zu unterschiedlichen Preisen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Es gibt viele Hosting-Lösungen, und ihre Dienste und Preise können sich im Laufe der Zeit ändern. Während wir unten einige Optionen vorstellen, lohnt es sich, sowohl diese als auch andere Optionen zu überprüfen, bevor Sie einen Hosting-Anbieter auswählen.</p> </div> <p>Einige der Dinge, die Sie bei der Auswahl eines Hosts berücksichtigen sollten:</p> <ul> <li>Wie ausgelastet Ihre Website voraussichtlich sein wird und die Kosten für die benötigten Daten- und Rechenressourcen, um diese Nachfrage zu decken.</li> <li>Grad der Unterstützung für horizontales (Hinzufügen weiterer Maschinen) und vertikales (Upgrade auf leistungsstärkere Maschinen) Skalieren und die Kosten dafür.</li> <li>Die Standorte, an denen der Anbieter Rechenzentren hat, und wo der Zugriff daher am schnellsten sein dürfte.</li> <li>Historische Leistungswerte des Hosts in Bezug auf Betriebszeit und Ausfallzeiten.</li> <li>Tools zur Verwaltung der Website - sind sie einfach zu bedienen und sicher (z.B. SFTP vs. FTP)?</li> <li>Integrierte Frameworks zur Überwachung Ihres Servers.</li> <li>Bekannte Einschränkungen. Einige Hosts blockieren absichtlich bestimmte Dienste (z.B. E-Mail). Andere bieten nur eine bestimmte Anzahl von Stunden "Live-Zeit" in einigen Preisklassen oder nur eine geringe Speichermenge an.</li> <li>Zusätzliche Vorteile. Einige Anbieter bieten kostenlose Domainnamen und Unterstützung für TLS-Zertifikate an, die Sie sonst bezahlen müssten.</li> <li>Ob der "kostenlose" Tarif, auf den Sie sich verlassen, im Laufe der Zeit abläuft und ob die Kosten für den Umstieg auf einen teureren Tarif bedeuten, dass Sie von Anfang an besser einen anderen Dienst hätten nutzen sollen!</li> </ul> <p>Die gute Nachricht ist, dass es zu Beginn ziemlich viele Sites gibt, die "kostenlose" Rechenumgebungen bieten, die für Evaluierung und Testen vorgesehen sind. Diese sind in der Regel ressourcenbeschränkte bzw. -begrenzte Umgebungen, und Sie müssen sich bewusst sein, dass sie nach einer Einführungszeit ablaufen oder andere Einschränkungen haben können. Sie sind jedoch hervorragend zum Testen von Low-Traffic-Sites in einer gehosteten Umgebung geeignet und bieten eine einfache Migration zu mehr Ressourcen, wenn Ihre Site häufiger besucht wird. Beliebte Optionen in dieser Kategorie sind <a href="https://glitch.com/" class="external" target="_blank">Glitch</a>, <a href="https://www.pythonanywhere.com/" class="external" target="_blank">Python Anywhere</a>, <a href="https://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html" class="external" target="_blank">Amazon Web Services</a>, <a href="https://azure.microsoft.com/en-us/pricing/details/app-service/linux/" class="external" target="_blank">Microsoft Azure</a> usw.</p> <p>Die meisten Anbieter bieten auch einen "Basic" oder "Hobby"-Tarif an, der für kleinere Produktionsstätten gedacht ist und nützlichere Rechenleistung und weniger Einschränkungen bietet. <a href="https://railway.app/" class="external" target="_blank">Railway</a>, <a href="https://www.heroku.com/" class="external" target="_blank">Heroku</a>, <a href="https://www.digitalocean.com/" class="external" target="_blank">DigitalOcean</a> und <a href="https://www.pythonanywhere.com/" class="external" target="_blank">Python Anywhere</a> sind Beispiele für beliebte Hosting-Anbieter, die einen relativ günstigen Basistarif für Computing bieten (im Bereich von 5 bis 10 US-Dollar pro Monat).</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Denken Sie daran, dass der Preis nicht das einzige Auswahlkriterium ist. Wenn Ihre Website erfolgreich ist, könnte sich herausstellen, dass Skalierbarkeit der wichtigste Faktor ist.</p> </div></div></section><section aria-labelledby="ihre_website_bereit_zur_veröffentlichung_machen"><h2 id="ihre_website_bereit_zur_veröffentlichung_machen"><a href="#ihre_website_bereit_zur_veröffentlichung_machen">Ihre Website bereit zur Veröffentlichung machen</a></h2><div class="section-content"><p>Die Hauptaspekte, die Sie bei der Veröffentlichung Ihrer Website berücksichtigen sollten, sind Websicherheit und Leistung. Mindestens möchten Sie die Datenbankkonfiguration so ändern, dass Sie eine andere Datenbank für die Produktion verwenden können und deren Zugangsdaten sichern, die Stack-Traces, die während der Entwicklung auf Fehlerseiten enthalten sind, entfernen, Ihr Logging aufräumen und die entsprechenden Headers setzen, um viele gängige Sicherheitsbedrohungen zu vermeiden.</p> <p>In den folgenden Unterabschnitten skizzieren wir die wichtigsten Änderungen, die Sie an Ihrer App vornehmen sollten.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Weitere nützliche Tipps finden Sie in den Express-Dokumentationen – siehe <a href="https://expressjs.com/en/advanced/best-practice-performance.html" class="external" target="_blank">Produktionsbeste Praktiken: Leistung und Zuverlässigkeit</a> und <a href="https://expressjs.com/en/advanced/best-practice-security.html" class="external" target="_blank">Produktionsbeste Praktiken: Sicherheit</a>.</p> </div></div></section><section aria-labelledby="konfiguration_der_datenbank"><h3 id="konfiguration_der_datenbank"><a href="#konfiguration_der_datenbank">Konfiguration der Datenbank</a></h3><div class="section-content"><p>Im bisherigen Verlauf dieses Tutorials haben wir eine einzige Entwicklungsdatenbank verwendet, für die die Adresse und Zugangsdaten fest im <strong>app.js</strong> kodiert sind. Da die Entwicklungsdatenbank keine Informationen enthält, deren Offenlegung oder Beschädigung uns Sorgen macht, besteht kein besonderes Risiko, diese Details zu leaken. Wenn Sie jedoch mit echten Daten arbeiten, insbesondere mit persönlichen Benutzerinformationen, ist es sehr wichtig, Ihre Datenbank-Zugangsdaten zu schützen.</p> <p>Aus diesem Grund möchten wir eine andere Datenbank für die Produktion nutzen als die, die wir für die Entwicklung verwendet haben, und auch die Zugangsdaten der Produktionsdatenbank vom Quellcode trennen, damit sie ordnungsgemäß geschützt werden können.</p> <p>Wenn Ihr Hosting-Anbieter die Einstellung von Umgebungsvariablen über eine Weboberfläche unterstützt (wie viele dies tun), ist ein Weg, dies zu tun, den Server veranlassen, die Datenbank-URL aus einer Umgebungsvariablen zu beziehen. Unten ändern wir die LocalLibrary-Website, um die URI der Datenbank aus einer OS-Umgebungsvariablen zu beziehen, wenn sie definiert wurde, und ansonsten die URL der Entwicklungsdatenbank zu verwenden.</p> <p>Öffnen Sie <strong>app.js</strong> und finden Sie die Zeile, die die MongDB-Verbindungseinstellung setzt. Sie wird in etwa so aussehen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const mongoDB = "mongodb+srv://your_user_name:your_password@cluster0.cojoign.mongodb.net/local_library?retryWrites=true&w=majority"; </code></pre></div> <p>Ersetzen Sie die Zeile durch den folgenden Code, der <code>process.env.MONGODB_URI</code> verwendet, um die Verbindungszeichenfolge aus einer Umgebungsvariablen namens <code>MONGODB_URI</code> zu beziehen, falls diese gesetzt wurde (verwenden Sie Ihre eigene Datenbank-URL anstelle des Platzhalters unten).</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// Set up mongoose connection const mongoose = require("mongoose"); mongoose.set("strictQuery", false); const dev_db_url = "mongodb+srv://your_user_name:your_password@cluster0.cojoign.mongodb.net/local_library?retryWrites=true&w=majority"; const mongoDB = process.env.MONGODB_URI || dev_db_url; main().catch((err) => console.log(err)); async function main() { await mongoose.connect(mongoDB); } </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Eine weitere übliche Methode, um die Zugangsdaten der Produktionsdatenbank vom Quellcode zu trennen, besteht darin, sie aus einer <code>.env</code> Datei zu lesen, die separat auf das Dateisystem bereitgestellt wird (zum Beispiel könnten sie mit dem npm-Modul <a href="https://www.npmjs.com/package/dotenv" class="external" target="_blank">dotenv</a> gelesen werden).</p> </div></div></section><section aria-labelledby="setzen_sie_node_env_auf_production"><h3 id="setzen_sie_node_env_auf_production"><a href="#setzen_sie_node_env_auf_production">Setzen Sie NODE_ENV auf 'production'</a></h3><div class="section-content"><p>Wir können Stack-Traces auf Fehlerseiten entfernen, indem wir die <code>NODE_ENV</code> Umgebungsvariable auf <em>production</em> setzen (sie ist standardmäßig auf <em>development</em> gesetzt). Zusätzlich zur Erzeugung weniger ausführlicher Fehlermeldungen führt die Einstellung der Variable auf <em>production</em> dazu, dass Ansichts-Templates und CSS-Dateien, die aus CSS-Erweiterungen generiert wurden, im Cache gespeichert werden. Tests zeigen, dass die Einstellung von <code>NODE_ENV</code> auf <em>production</em> die Leistung der App um den Faktor drei verbessern kann!</p> <p>Diese Änderung kann entweder durch die Verwendung von <code>export</code>, einer Umgebungsdatei oder dem OS-Initialisierungssystem vorgenommen werden.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Dies ist eigentlich eine Änderung, die Sie in Ihrer Umgebungs-Einrichtung vornehmen, und nicht in Ihrer App, aber sie ist wichtig genug, um hier erwähnt zu werden! Wir zeigen, wie dies in unserem Hosting-Beispiel unten eingestellt wird.</p> </div></div></section><section aria-labelledby="angemessenes_logging"><h3 id="angemessenes_logging"><a href="#angemessenes_logging">Angemessenes Logging</a></h3><div class="section-content"><p>Logging-Aufrufe können sich auf eine stark frequentierte Website auswirken. In einer Produktionsumgebung müssen Sie möglicherweise die Website-Aktivität protokollieren (z.B. den Traffic verfolgen oder API-Aufrufe protokollieren), aber Sie sollten versuchen, das für Debugging-Zwecke hinzugefügte Logging auf ein Minimum zu beschränken.</p> <p>Eine Möglichkeit, das "Debug"-Logging in der Produktion zu minimieren, ist die Verwendung eines Moduls wie <a href="https://www.npmjs.com/package/debug" class="external" target="_blank">debug</a>, das es Ihnen ermöglicht zu kontrollieren, welches Logging durch die Einstellung einer Umgebungsvariable durchgeführt wird. Zum Beispiel zeigt der folgende Codeausschnitt, wie Sie das "author"-Logging einrichten könnten. Die Debug-Variable wird mit dem Namen 'author' deklariert, und das Präfix "author" wird automatisch für alle Logs von diesem Objekt angezeigt.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const debug = require("debug")("author"); // Display Author update form on GET. exports.author_update_get = asyncHandler(async (req, res, next) => { const author = await Author.findById(req.params.id).exec(); if (author === null) { // No results. debug(`id not found on update: ${req.params.id}`); const err = new Error("Author not found"); err.status = 404; return next(err); } res.render("author_form", { title: "Update Author", author: author }); }); </code></pre></div> <p>Sie können dann eine bestimmte Menge von Logs aktivieren, indem Sie sie als durch Kommas getrennte Liste in der <code>DEBUG</code> Umgebungsvariable angeben. Sie können die Variablen für die Anzeige von "author" und "book" Logs wie gezeigt einstellen (Wildcards werden ebenfalls unterstützt).</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>#Windows set DEBUG=author,book #Linux export DEBUG="author,book" </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Aufrufe von <code>debug</code> können das Logging ersetzen, das Sie möglicherweise zuvor mit <code>console.log()</code> oder <code>console.error()</code> durchgeführt haben. Ersetzen Sie alle <code>console.log()</code> Aufrufe in Ihrem Code durch Logging über das <a href="https://www.npmjs.com/package/debug" class="external" target="_blank">debug</a> Modul. Schalten Sie das Logging in Ihrer Entwicklungsumgebung ein und aus, indem Sie die DEBUG-Variable setzen und beobachten Sie, welchen Einfluss dies auf das Logging hat.</p> </div> <p>Wenn Sie die Aktivität der Website protokollieren müssen, können Sie eine Logging-Bibliothek wie <em>Winston</em> oder <em>Bunyan</em> verwenden. Weitere Informationen zu diesem Thema finden Sie unter: <a href="https://expressjs.com/en/advanced/best-practice-performance.html" class="external" target="_blank">Produktionsbeste-Praktiken: Leistung und Zuverlässigkeit</a>.</p></div></section><section aria-labelledby="verwenden_sie_gzipdeflate_komprimierung_für_antworten"><h3 id="verwenden_sie_gzipdeflate_komprimierung_für_antworten"><a href="#verwenden_sie_gzipdeflate_komprimierung_für_antworten">Verwenden Sie gzip/deflate Komprimierung für Antworten</a></h3><div class="section-content"><p>Webserver können oft die HTTP-Antworten, die an einen Client zurückgeschickt werden, komprimieren, was die Ladezeit der Seite für den Client erheblich reduziert. Die verwendete Kompressionsmethode hängt von den Dekompressionsmethoden ab, die der Client in der Anfrage angibt (die Antwort wird unkomprimiert gesendet, wenn keine Kompressionsmethoden unterstützt werden).</p> <p>Fügen Sie dies Ihrer Website mittels <a href="https://www.npmjs.com/package/compression" class="external" target="_blank">compression</a> Middleware hinzu. Installieren Sie dies im Wurzelverzeichnis Ihres Projekts, indem Sie den folgenden Befehl ausführen:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install compression </code></pre></div> <p>Öffnen Sie <strong>./app.js</strong> und fordern Sie die Komprimierungsbibliothek wie gezeigt an. Fügen Sie die Komprimierungsbibliothek mit der <code>use()</code> Methode der Middleware-Kette hinzu (dies sollte vor allen Routen erscheinen, die Sie komprimieren möchten - in diesem Fall alle!).</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const catalogRouter = require("./routes/catalog"); // Import routes for "catalog" area of site const compression = require("compression"); // Create the Express application object const app = express(); // … app.use(compression()); // Compress all routes app.use(express.static(path.join(__dirname, "public"))); app.use("/", indexRouter); app.use("/users", usersRouter); app.use("/catalog", catalogRouter); // Add catalog routes to middleware chain. // … </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Für eine stark frequentierte Website in Produktion würden Sie diese Middleware nicht verwenden. Stattdessen würden Sie einen Reverse Proxy wie <a href="https://nginx.org/" class="external" target="_blank">Nginx</a> verwenden.</p> </div></div></section><section aria-labelledby="verwenden_sie_helmet_um_gegen_bekannte_schwachstellen_zu_schützen"><h3 id="verwenden_sie_helmet_um_gegen_bekannte_schwachstellen_zu_schützen"><a href="#verwenden_sie_helmet_um_gegen_bekannte_schwachstellen_zu_schützen">Verwenden Sie Helmet, um gegen bekannte Schwachstellen zu schützen</a></h3><div class="section-content"><p><a href="https://www.npmjs.com/package/helmet" class="external" target="_blank">Helmet</a> ist ein Middleware-Paket. Es kann die richtigen HTTP-Header setzen, die Ihre App gegen bekannte Web-Schwachstellen schützen (siehe die <a href="https://helmetjs.github.io/" class="external" target="_blank">Dokumentation</a> für weitere Informationen darüber, welche Header gesetzt werden und vor welchen Schwachstellen es schützt).</p> <p>Installieren Sie dies im Wurzelverzeichnis Ihres Projekts, indem Sie den folgenden Befehl ausführen:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install helmet </code></pre></div> <p>Öffnen Sie <strong>./app.js</strong> und fordern Sie die <em>helmet</em> Bibliothek wie angegeben an. Fügen Sie dann das Modul mit der <code>use()</code> Methode der Middleware-Kette hinzu.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const compression = require("compression"); const helmet = require("helmet"); // Create the Express application object const app = express(); // Add helmet to the middleware chain. // Set CSP headers to allow our Bootstrap and jQuery to be served app.use( helmet.contentSecurityPolicy({ directives: { "script-src": ["'self'", "code.jquery.com", "cdn.jsdelivr.net"], }, }), ); // … </code></pre></div> <p>Üblicherweise hätten wir einfach <code>app.use(helmet());</code> eingefügt, um die <em>Teilmenge</em> der sicherheitsrelevanten Header hinzuzufügen, die für die meisten Sites sinnvoll sind. Im <a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template">LocalLibrary Basis-Template</a> fügen wir jedoch einige Bootstrap- und jQuery-Skripte ein. Diese verstoßen gegen die Standard-<a href="/de/docs/Web/HTTP/CSP">Content Security Policy (CSP)</a> von Helmet, die das Laden von Cross-Site-Skripts nicht erlaubt. Um das Laden dieser Skripte zu erlauben, modifizieren wir die Helmet-Konfiguration, so dass sie CSP-Direktiven festlegt, um das Laden von Skripten von den angegebenen Domains zu erlauben. Für Ihren eigenen Server können Sie spezifische Header hinzufügen/deaktivieren, wie in den <a href="https://www.npmjs.com/package/helmet" class="external" target="_blank">Anweisungen zur Verwendung von Helmet hier</a> beschrieben.</p></div></section><section aria-labelledby="fügen_sie_ratelimiting_zu_den_api-routen_hinzu"><h3 id="fügen_sie_ratelimiting_zu_den_api-routen_hinzu"><a href="#fügen_sie_ratelimiting_zu_den_api-routen_hinzu">Fügen Sie Ratelimiting zu den API-Routen hinzu</a></h3><div class="section-content"><p><a href="https://www.npmjs.com/package/express-rate-limit" class="external" target="_blank">Express-rate-limit</a> ist ein Middleware-Paket, das verwendet werden kann, um wiederholte Anfragen an APIs und Endpunkte zu begrenzen. Es gibt viele Gründe, warum zu viele Anfragen an Ihre Site gestellt werden könnten, wie z.B. Denial-of-Service-Angriffe, Brute-Force-Angriffe oder sogar einfach ein Client oder Skript, das sich nicht wie erwartet verhält. Abgesehen von den Leistungsproblemen, die durch zu viele Anfragen auftreten und Ihren Server verlangsamen können, könnten Ihnen auch zusätzliche Kosten für den zusätzlichen Traffic entstehen. Dieses Paket kann verwendet werden, um die Anzahl der Anfragen zu begrenzen, die zu einer bestimmten Route oder einer Reihe von Routen gemacht werden können.</p> <p>Installieren Sie dies im Wurzelverzeichnis Ihres Projekts, indem Sie den folgenden Befehl ausführen:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install express-rate-limit </code></pre></div> <p>Öffnen Sie <strong>./app.js</strong> und fordern Sie die <em>express-rate-limit</em> Bibliothek wie gezeigt an. Fügen Sie dann das Modul mit der <code>use()</code> Methode der Middleware-Kette hinzu.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const compression = require("compression"); const helmet = require("helmet"); const app = express(); // Set up rate limiter: maximum of twenty requests per minute const RateLimit = require("express-rate-limit"); const limiter = RateLimit({ windowMs: 1 * 60 * 1000, // 1 minute max: 20, }); // Apply rate limiter to all requests app.use(limiter); // … </code></pre></div> <p>Der obige Befehl begrenzt alle Anfragen auf 20 pro Minute (Sie können dies nach Bedarf ändern).</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Drittdienste wie <a href="https://www.cloudflare.com/" class="external" target="_blank">Cloudflare</a> können ebenfalls verwendet werden, wenn Sie fortschrittlichere Schutzmaßnahmen gegen Denial-of-Service oder andere Arten von Angriffen benötigen.</p> </div> <h4 id="node-version_festlegen">Node-Version festlegen</h4> <p>Für Node-Anwendungen, einschließlich Express, enthält die <strong>package.json</strong> Datei alles, was ein Hosting-Anbieter benötigt, um die Anwendungsabhängigkeiten und die Einstiegsdatei zu bestimmen.</p> <p>Die einzige wichtige Information, die in unserer aktuellen <strong>package.json</strong> fehlt, ist die von der Bibliothek benötigte Node-Version. Sie können die für die Entwicklung verwendete Node-Version herausfinden, indem Sie den folgenden Befehl eingeben:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>>node --version v16.17.1 </code></pre></div> <p>Öffnen Sie <strong>package.json</strong> und fügen Sie diese Information als <strong>engines > node</strong> wie gezeigt hinzu (verwenden Sie die Versionsnummer für Ihr System).</p> <div class="code-example"><div class="example-header"><span class="language-name">json</span></div><pre class="brush: json notranslate"><code> "engines": { "node": ">=16.17.1" }, </code></pre></div> <p>Der Hosting-Service unterstützt möglicherweise nicht die angegebene spezifische Version von Node, aber diese Änderung sollte sicherstellen, dass zumindest eine Version mit derselben Hauptversionsnummer oder eine neuere Version verwendet wird.</p> <p>Beachten Sie, dass es möglicherweise andere Möglichkeiten gibt, die Node-Version bei verschiedenen Hosting-Services anzugeben, aber der Ansatz mit <strong>package.json</strong> ist weit verbreitet.</p> <h4 id="abhängigkeiten_holen_und_erneut_testen">Abhängigkeiten holen und erneut testen</h4> <p>Bevor wir fortfahren, lassen Sie uns die Site erneut testen und sicherstellen, dass keine unserer Änderungen Auswirkungen hatte.</p> <p>Zuerst müssen wir unsere Abhängigkeiten abrufen. Sie können dies tun, indem Sie den folgenden Befehl in Ihrem Terminal im Wurzelverzeichnis des Projekts ausführen:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install </code></pre></div> <p>Starten Sie nun die Site (siehe <a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes#testing_the_routes">Testen der Routen</a> für die relevanten Befehle) und überprüfen Sie, ob die Site weiterhin wie erwartet funktioniert.</p></div></section><section aria-labelledby="ein_anwendungsrepository_in_github_erstellen"><h3 id="ein_anwendungsrepository_in_github_erstellen"><a href="#ein_anwendungsrepository_in_github_erstellen">Ein Anwendungsrepository in GitHub erstellen</a></h3><div class="section-content"><p>Viele Hosting-Dienste ermöglichen es Ihnen, Projekte aus einem lokalen Repository oder von cloudbasierten Versionskontrollplattformen zu importieren und/oder zu synchronisieren. Dies kann die Bereitstellung und iterative Entwicklung erheblich erleichtern.</p> <p>Für dieses Tutorial werden wir ein <a href="https://github.com/" class="external" target="_blank">GitHub</a>-Konto und Repository für die Bibliothek einrichten und das Tool <strong>git</strong> verwenden, um unseren Quellcode hochzuladen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Sie können diesen Schritt überspringen, wenn Sie GitHub bereits zur Verwaltung Ihres Quellcodes verwenden!</p> <p>Beachten Sie, dass die Verwendung von Quellcode-Verwaltungstools eine gute Softwareentwicklungs-Praxis ist, da sie es Ihnen erlaubt, Änderungen auszuprobieren und zwischen Ihren Experimenten und dem "bekannten guten Code" zu wechseln, wenn Sie dies benötigen!</p> </div> <p>Die Schritte sind:</p> <ol> <li> <p>Besuchen Sie <a href="https://github.com/" class="external" target="_blank">https://github.com/</a> und erstellen Sie ein Konto.</p> </li> <li> <p>Sobald Sie angemeldet sind, klicken Sie auf den <strong>+</strong> Link in der oberen Symbolleiste und wählen Sie <strong>Neues Repository</strong>.</p> </li> <li> <p>Füllen Sie alle Felder in diesem Formular aus. Obwohl sie nicht zwingend erforderlich sind, werden sie dringend empfohlen.</p> <ul> <li>Geben Sie einen neuen Repositoriesnamen (z.B. <em>express-locallibrary-tutorial</em>) und eine Beschreibung ein (z.B. "Local Library Website geschrieben in Express (Node)").</li> <li>Wählen Sie <strong>Node</strong> in der <em>Add .gitignore</em> Auswahl aus.</li> <li>Wählen Sie Ihre bevorzugte Lizenz in der <em>Add license</em> Auswahl aus.</li> <li>Aktivieren Sie <strong>Repository mit README initialisieren</strong>.</li> </ul> <div class="notecard warning"> <p><strong>Warnung:</strong> Der standardmäßige "Öffentlich"-Zugang macht <em>alle</em> Quellcodes — einschließlich Ihres Datenbank-Benutzernamens und Passworts — für jeden auf dem Internet sichtbar! Stellen Sie sicher, dass der Quellcode Zugangsdaten <em>nur</em> aus Umgebungsvariablen liest und keine Zugangsdaten fest kodiert hat.</p> <p>Alternativ wählen Sie die "Privat"-Option, um nur ausgewählten Personen den Zugriff auf den Quellcode zu ermöglichen.</p> </div> </li> <li> <p>Klicken Sie auf <strong>Repository erstellen</strong>.</p> </li> <li> <p>Klicken Sie auf die grüne <strong>Clone or download</strong> Taste auf Ihrer neuen Repository-Seite.</p> </li> <li> <p>Kopieren Sie den URL-Wert aus dem Textfeld im erscheinenden Dialogfeld. Wenn Sie den Repository-Namen "express-locallibrary-tutorial" verwendet haben, sollte die URL etwa so aussehen: <code>https://github.com/<your_git_user_id>/express-locallibrary-tutorial.git</code>.</p> </li> </ol> <p>Da das Repository ("Repo") nun auf GitHub erstellt wurde, möchten wir es auf unseren lokalen Computer klonen (kopieren):</p> <ol> <li> <p>Installieren Sie <em>git</em> für Ihren lokalen Computer (Sie können Versionen für verschiedene Plattformen <a href="https://git-scm.com/downloads" class="external" target="_blank">hier</a> finden).</p> </li> <li> <p>Öffnen Sie ein Befehls-/Terminalfenster und klonen Sie Ihr Repository mit der oben kopierten URL:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>git clone https://github.com/<your_git_user_id>/express-locallibrary-tutorial.git </code></pre></div> <p>Dadurch wird das Repository im aktuellen Verzeichnis erstellt.</p> </li> <li> <p>Navigieren Sie in den Repo-Ordner.</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>cd express-locallibrary-tutorial </code></pre></div> </li> </ol> <p>Kopieren Sie dann Ihre Anwendungsquelldateien in den Repo-Ordner, machen Sie sie mit <em>git</em> Teil des Repos und laden Sie sie auf GitHub hoch:</p> <ol> <li> <p>Kopieren Sie Ihre Express-Anwendung in diesen Ordner (ohne <strong>/node_modules</strong>, das Abhängigkeitsdateien enthält, die Sie bei Bedarf von npm abrufen sollten).</p> </li> <li> <p>Öffnen Sie ein Befehls-/Terminalfenster und verwenden Sie den <code>add</code> Befehl, um alle Dateien zu git hinzuzufügen.</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>git add -A </code></pre></div> </li> <li> <p>Verwenden Sie den <code>status</code> Befehl, um zu überprüfen, dass alle Dateien, die Sie <code>committen</code> möchten, korrekt sind (Sie möchten Quellcodedateien einbeziehen, keine Binärdateien, temporären Dateien usw.). Es sollte so ähnlich aussehen wie die untenstehende Auflistung.</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>git status </code></pre></div> <pre class="brush: plain notranslate">On branch main Your branch is up-to-date with 'origin/main'. Changes to be committed: (use "git reset HEAD <file>..." to unstage) new file: ... </pre> </li> <li> <p>Wenn Sie zufrieden sind, <code>committen</code> Sie die Dateien zu Ihrem lokalen Repo. Dies entspricht einem Unterschreiben der Änderungen und macht sie zum offiziellen Teil des lokalen Repos.</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>git commit -m "First version of application moved into GitHub" </code></pre></div> </li> <li> <p>Zu diesem Zeitpunkt wurde das Remote-Repo nicht geändert. Der letzte Schritt besteht darin, Ihr lokales Repo bis zum entfernten GitHub-Repo zu synchronisieren (<code>push</code>) unter Verwendung des folgenden Befehls:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>git push origin main </code></pre></div> </li> </ol> <p>Sobald dieser Vorgang abgeschlossen ist, sollten Sie in der Lage sein, zur Seite auf GitHub zu gehen, auf der Sie Ihr Repo erstellt haben, die Seite zu aktualisieren und zu sehen, dass Ihre gesamte Anwendung jetzt hochgeladen wurde. Sie können Ihr Repo weiterhin aktualisieren, wenn sich Dateien ändern, indem Sie diesen add/commit/push-Zyklus verwenden.</p> <p>Dies ist ein guter Zeitpunkt, um ein Backup Ihres "Vanille"-Projekts zu machen – während einige der Änderungen, die wir in den folgenden Abschnitten vornehmen werden, nützlich für die Bereitstellung auf einem beliebigen Hosting-Dienst (oder für die Entwicklung) sein könnten, sind andere möglicherweise nicht. Sie können dies mit <code>git</code> auf der Befehlszeile tun:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code># Create branch vanilla_deployment from the current branch (main) git checkout -b vanilla_deployment # Push the new branch to GitHub git push origin vanilla_deployment # Switch back to main git checkout main # Make any further changes in a new branch git pull upstream main # Merge the latest changes from GitHub git checkout -b my_changes # Create a new branch </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Git ist unglaublich leistungsfähig! Um mehr zu lernen, siehe <a href="https://docs.github.com/en/get-started/start-your-journey/git-and-github-learning-resources" class="external" target="_blank">Git lernen</a>.</p> </div></div></section><section aria-labelledby="beispiel_hosting_auf_glitch"><h2 id="beispiel_hosting_auf_glitch"><a href="#beispiel_hosting_auf_glitch">Beispiel: Hosting auf Glitch</a></h2><div class="section-content"><p>Dieser Abschnitt bietet eine praktische Demonstration, wie <em>LocalLibrary</em> auf <a href="https://glitch.com/" class="external" target="_blank">Glitch</a> gehostet wird.</p></div></section><section aria-labelledby="warum_glitch"><h3 id="warum_glitch"><a href="#warum_glitch">Warum Glitch?</a></h3><div class="section-content"><p>Wir entscheiden uns für die Nutzung von Glitch aus mehreren Gründen:</p> <ul> <li> <p>Glitch hat einen <a href="https://glitch.com/pricing" class="external" target="_blank">kostenlosen Starter-Plan</a>, der <em>wirklich</em> kostenlos ist, allerdings mit einigen Einschränkungen. Die Tatsache, dass es für alle Entwickler erschwinglich ist, ist für MDN wirklich wichtig!</p> </li> <li> <p>Glitch kümmert sich um die Infrastruktur, sodass Sie es nicht müssen. Nicht um Server, Load Balancer, Reverse-Proxies usw. kümmern zu müssen, erleichtert den Einstieg erheblich.</p> </li> <li> <p>Die Fähigkeiten und Konzepte, die Sie beim Einsatz von Glitch lernen, sind übertragbar.</p> </li> <li> <p>Die Service- und Planbeschränkungen beeinträchtigen uns nicht wirklich bei der Nutzung von Glitch für das Tutorial. Zum Beispiel:</p> <ul> <li>Der Starter-Plan bietet monatlich nur 1000 Stunden für "Projekte", was monatlich zurückgesetzt wird. Dies wird verwendet, wenn die Site aktiv bearbeitet wird oder wenn jemand darauf zugreift. Wenn niemand auf die Site zugreift oder sie bearbeitet, wird sie schlafen gelegt.</li> <li>Die Umgebung des Starter-Plans hat eine begrenzte Menge an RAM und Speicherplatz für Container. Es gibt mehr als genug für das Tutorial, insbesondere da unsere Datenbank anderswo gehostet wird.</li> <li>Benutzerdefinierte Domains werden zum Zeitpunkt des Schreibens dieses Textes nicht gut unterstützt.</li> <li>Weitere Einschränkungen finden Sie auf der <a href="https://help.glitch.com/hc/en-us/articles/16287495313293-Technical-Restrictions" class="external" target="_blank">Glitch-Technische Beschränkungen-Seite</a>.</li> </ul> </li> </ul> <p>Während Glitch für die Hosting dieses Demonstrationszwecks geeignet ist, sollten Sie sich die Zeit nehmen, um zu bestimmen, ob es für Ihre eigene Website <a href="#auswahl_eines_hosting-anbieters">geeignet ist</a>.</p></div></section><section aria-labelledby="wie_funktioniert_glitch"><h3 id="wie_funktioniert_glitch"><a href="#wie_funktioniert_glitch">Wie funktioniert Glitch?</a></h3><div class="section-content"><p>Glitch bietet eine webbasierte Oberfläche, in der Sie Projekte aus Starter-Templates erstellen oder von GitHub importieren und dann die Projektdateien hinzufügen und bearbeiten können. Wenn Sie Änderungen vornehmen, wird das Projekt in seinem eigenen isolierten und unabhängigen virtualisierten Container erstellt und ausgeführt.</p> <p>Wie das alles "unter der Haube" funktioniert, ist ein Mysterium – Glitch sagt es nicht. Was klar ist, ist, dass Ihre Anwendung "einfach funktionieren" sollte, sofern Sie eine ziemlich Standard-Node.js-Webanwendung erstellen (zum Beispiel unter Verwendung von <code>package.json</code> für Ihre Abhängigkeiten) und nicht mehr Ressourcen verbrauchen, als in den <a href="https://help.glitch.com/hc/en-us/articles/16287495313293-Technical-Restrictions" class="external" target="_blank">technischen Einschränkungen</a> aufgeführt sind.</p> <p>Sobald die Anwendung läuft, kann sie unter Verwendung von <a href="https://help.glitch.com/hc/en-us/articles/16287550167437-Adding-Private-Data" class="external" target="_blank">privaten Daten</a>, die in einer <code>.env</code>-Datei bereitgestellt werden, für die Produktion konfiguriert werden. Die Werte in den geheimen Daten werden von der Anwendung als Umgebungsvariablen gelesen, was, wie Sie sich aus einem vorherigen Abschnitt erinnern, die Art und Weise ist, wie wir unsere Anwendung konfiguriert haben, um ihre Datenbank-URL zu erhalten. Beachten Sie, dass die Variablen <em>geheim</em> sind: die <code>.env</code> sollte nicht in Ihrem GitHub-Repository enthalten sein.</p> <p>Die Glitch-Bearbeitungsansicht bietet auch <em>Terminal</em>-Zugriff auf die Web-App-Umgebung, die Sie verwenden können, um mit der Web-App zu arbeiten, als ob sie auf Ihrem lokalen Rechner ausgeführt würde.</p> <p>Das ist die gesamte Übersicht, die Sie benötigen, um loszulegen. Als nächstes richten wir ein Glitch-Konto ein, laden das Bibliotheksprojekt von GitHub hoch und verbinden es mit einer Datenbank.</p></div></section><section aria-labelledby="ein_glitch-konto_erhalten"><h3 id="ein_glitch-konto_erhalten"><a href="#ein_glitch-konto_erhalten">Ein Glitch-Konto erhalten</a></h3><div class="section-content"><p>Um Glitch zu verwenden, müssen Sie zunächst ein Konto erstellen:</p> <ul> <li>Gehen Sie zu <a href="https://glitch.com/" class="external" target="_blank">glitch.com</a> und klicken Sie auf die <strong>Anmelden</strong>-Schaltfläche in der oberen Symbolleiste.</li> <li>Wählen Sie GitHub im Popup aus, um sich mit Ihren GitHub-Anmeldedaten anzumelden.</li> <li>Sie werden dann im Glitch-Dashboard angemeldet: <a href="https://glitch.com/dashboard" class="external" target="_blank">https://glitch.com/dashboard</a>.</li> </ul></div></section><section aria-labelledby="fehlerbehebung_bei_der_node.js-version"><h3 id="fehlerbehebung_bei_der_node.js-version"><a href="#fehlerbehebung_bei_der_node.js-version">Fehlerbehebung bei der Node.js-Version</a></h3><div class="section-content"><p>Hosting-Anbieter unterstützen normalerweise einige Hauptversionen der neuesten Node.js-Releases. Wenn die von Ihnen in Ihrer <code>package.json</code>-Datei angegebene exakte "minor" Version nicht unterstützt wird, fallen sie in der Regel auf die nächstgelegene Version zurück, die sie unterstützen (und oft wird dies einfach funktionieren).</p> <p>Leider ist zum Zeitpunkt des Schreibens die höchste unterstützte Version auf Glitch Node.js 16. Wenn Sie mit Node.js 17 oder höher entwickelt haben, sollten Sie die in Ihrer <code>package.json</code> angegebenen Version wie gezeigt verringern. Sie müssen auch erneut testen:</p> <div class="code-example"><div class="example-header"><span class="language-name">json</span></div><pre class="brush: json notranslate"><code> "engines": { "node": ">=v16" }, </code></pre></div> <p>Glitch <a href="https://blog.glitch.com/post/rebuilding-glitch/" class="external" target="_blank">plant, Node besser zu aktualisieren und in Zukunft besser auf dem neuesten Stand zu halten</a> – und es kann sein, dass diese Einschränkung nicht mehr existiert, wenn Sie dies lesen. Anstatt die <code>node</code>-Version zu verringern, könnten Sie versuchen, Ihr Projekt hochzuladen, um zu sehen, ob es erstellt wird. Wenn es Fehler gibt und Ihre Anwendung nicht lädt, sollten Sie versuchen, die <code>node</code>-Version auf <code>>=v16</code> in Ihrer <code>package.json</code> in der Glitch-Editorumgebung zu setzen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Sie können auch die unterstützten Versionen prüfen, indem Sie den folgenden Befehl in das Terminal eines beliebigen Glitch-Projekts eingeben:</p> <div class="code-example"><div class="example-header"><span class="language-name">sh</span></div><pre class="brush: sh notranslate"><code>ls -l /opt/nvm/versions/node | grep '^d' | awk '{ print $9 }' </code></pre></div> </div></div></section><section aria-labelledby="auf_glitch_von_github_bereitstellen"><h3 id="auf_glitch_von_github_bereitstellen"><a href="#auf_glitch_von_github_bereitstellen">Auf Glitch von GitHub bereitstellen</a></h3><div class="section-content"><p>Als Nächstes importieren wir das Bibliotheksprojekt von GitHub. Wählen Sie zuerst die Option <strong>Dashboard</strong> aus dem oberen Menü der Site und wählen Sie dann die <strong>Neues Projekt</strong>-Schaltfläche. Glitch zeigt eine Liste von Optionen für das neue Projekt an; wählen Sie <strong>Importieren von GitHub</strong>.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/glitch_new_project_import_github.png" alt="Glitch-Website-Dashboard zeigt eine neue Projekt-Schaltfläche und ein Popup-Menü mit "Importieren von GitHub"-Option" width="1097" height="724" loading="lazy"></p> <p>Ein Popup wird angezeigt. Geben Sie die URL Ihres GitHub-Bibliotheksrepositorys in das Popup ein und drücken Sie <strong>OK</strong>. Unten haben wir das Repo für das bearbeitete Projekt eingegeben.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/glitch_new_project_github_repo_url.png" alt="Glitch-Popup zur Eingabe der URL des GitHub-Repos zum Importieren" width="462" height="208" loading="lazy"></p> <p>Glitch importiert dann das Projekt und zeigt den Fortschritt an. Wenn der Import abgeschlossen ist, wird die Bearbeitungsansicht für das neue Projekt angezeigt, wie unten gezeigt.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/glitch_imported_project_in_editor.png" alt="Glitch-Editoransicht für importiertes Projekt" width="1309" height="726" loading="lazy"></p> <p>Sie können die URL der Live-Site abrufen, indem Sie die <strong>Teilen</strong>-Schaltfläche auswählen.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/glitch_share_project.png" alt="Glitch-Editoransicht für importiertes Projekt" width="1311" height="721" loading="lazy"></p> <p>Öffnen Sie eine neue Browsertab und kopieren Sie den Link zur Live-Site in die Adressleiste. Die Website der Local Library sollte geöffnet werden und Daten aus der Entwicklungsdatenbank anzeigen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Dieser Vorgang war ein einmaliger Import von GitHub. Sie können auch GitHub-Aktionen wie <a href="https://github.com/marketplace/actions/glitch-project-sync" class="external" target="_blank">glitch-project-sync</a> verwenden, um Glitch und > Ihr Projekt zu synchronisieren.</p> </div></div></section><section aria-labelledby="verwendung_einer_produktions-mongodb-datenbank"><h3 id="verwendung_einer_produktions-mongodb-datenbank"><a href="#verwendung_einer_produktions-mongodb-datenbank">Verwendung einer Produktions-MongoDB-Datenbank</a></h3><div class="section-content"><p>Sie sollten eine andere Datenbank für die Produktion als für die Entwicklung einrichten. Während Glitch nur SQLite-Datenbanken hostet (und wir für die Verwendung von MongoDB eingerichtet sind), bieten viele andere Sites MongoDB-Datenbanken als Dienst an.</p> <p>Eine Option besteht darin, den <a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#setting_up_the_mongodb_database">Anweisungen zum Einrichten der MongoDB-Datenbank</a> aus einem früheren Tutorial zu folgen, um eine neue Produktionsdatenbank einzurichten.</p> <p>Um die Produktionsdatenbank für die Bibliotheksanwendung zugänglich zu machen, öffnen Sie die Datei <code>.env</code> in der Bearbeitungsansicht des Projekts. Geben Sie die Datenbank-URL-Variable <code>MONGODB_URI</code> und die URL Ihrer Produktionsdatenbank ein. Die Site wird aktualisiert, während Sie Werte in den Editor eingeben.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/glitch_env.png" alt="Glitch-Editor für .env-Dateien für private Daten mit Produktionsvariablen" width="1015" height="768" loading="lazy"></p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wir haben diese Datei nicht erstellt. Sie ist für <a href="https://help.glitch.com/hc/en-us/articles/16287550167437-Adding-Private-Data" class="external" target="_blank">private Daten</a> vorgesehen und wurde beim Import nach Glitch automatisch erstellt. Sie wird niemals exportiert oder kopiert.</p> </div></div></section><section aria-labelledby="andere_konfigurationsvariablen"><h3 id="andere_konfigurationsvariablen"><a href="#andere_konfigurationsvariablen">Andere Konfigurationsvariablen</a></h3><div class="section-content"><p>Sie erinnern sich aus einem vorausgegangenen Abschnitt, dass wir <code>NODE_ENV</code> auf 'production' setzen müssen, um unsere Leistung zu verbessern und weniger ausführliche Fehlermeldungen zu generieren. Wir tun dies in derselben Datei, in der wir die <code>MONGODB_URI</code>-Variable setzen.</p> <p>Öffnen Sie <code>.env</code> und fügen Sie die <code>NODE_ENV</code>-Variable mit dem Wert <code>production</code> hinzu (siehe den Screenshot im vorherigen Abschnitt).</p> <p>Die Bibliotheksanwendung ist nun eingerichtet und für den Produktionseinsatz konfiguriert. Sie können Daten über die Website-Schnittstelle hinzufügen, und sie sollte wie während der Entwicklung funktionieren (wenn auch mit weniger Debug-Informationen für ungültige Seiten).</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie lediglich einige Daten zum Testen hinzufügen möchten, könnten Sie das <code>populatedb</code>-Skript (mit Ihrer MongoDB-Produktionsdatenbank-URL) verwenden, wie im Abschnitt <a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#testing_%E2%80%94_create_some_items">Express-Tutorial Teil 3: Verwenden einer Datenbank (mit Mongoose) Testing — einige Elemente erstellen</a> beschrieben.</p> </div></div></section><section aria-labelledby="express-apps_auf_glitch_debuggen"><h3 id="express-apps_auf_glitch_debuggen"><a href="#express-apps_auf_glitch_debuggen">Express-Apps auf Glitch debuggen</a></h3><div class="section-content"><p>Glitch erlaubt effektives Debugging. Einige der Dinge, die Sie tun können, sind:</p> <ul> <li>Wählen Sie die Schaltfläche 'Logs' unten in der Bearbeitungsansicht, um Protokollinformationen von Ihrem Server zu sehen, z.B. Konsolen-Logausgaben.</li> <li>Wählen Sie die Schaltfläche 'Terminal' unten in der Bearbeitungsansicht, um ein Terminal in der Hosting-Umgebung zu öffnen. Sie können dies verwenden, um Befehle und Tools in der Umgebung auszuführen. Zum Beispiel könnten Sie <code>node -v</code> verwenden, um die Version von Node zu überprüfen.</li> <li>Interaktives Debugging in VS Code unter Verwendung der GLITCH-Erweiterung für VS Code.</li> </ul></div></section><section aria-labelledby="beispiel_hosting_auf_railway"><h2 id="beispiel_hosting_auf_railway"><a href="#beispiel_hosting_auf_railway">Beispiel: Hosting auf Railway</a></h2><div class="section-content"><p>Dieser Abschnitt bietet eine praktische Demonstration, wie <em>LocalLibrary</em> auf <a href="https://railway.app/" class="external" target="_blank">Railway</a> installiert wird.</p></div></section><section aria-labelledby="warum_railway"><h3 id="warum_railway"><a href="#warum_railway">Warum Railway?</a></h3><div class="section-content"><div class="notecard warning"> <p><strong>Warnung:</strong> Railway hat keinen völlig kostenlosen Starter-Tarif mehr. Wir haben diese Anweisungen beibehalten, weil Railway einige großartige Funktionen hat und für einige Benutzer die bessere Option sein wird.</p> </div> <p>Railway ist eine attraktive Hosting-Option aus mehreren Gründen:</p> <ul> <li>Railway kümmert sich um den Großteil der Infrastruktur, sodass Sie es nicht müssen. Nicht um Server, Load Balancer, Reverse-Proxies usw. kümmern zu müssen, erleichtert den Einstieg erheblich.</li> <li>Railway hat einen <a href="https://docs.railway.app/maturity/compare-to-heroku" class="external" target="_blank">Fokus auf Entwicklererfahrung für Entwicklung und Bereitstellung</a>, der zu einer schnelleren und "weicheren" Lernkurve führt als viele andere Alternativen.</li> <li>Die Fähigkeiten und Konzepte, die Sie beim Einsatz von Railway lernen, sind übertragbar. Während Railway einige hervorragende neue Funktionen hat, verwenden viele andere beliebte Hosting-Services viele der gleichen Ideen und Ansätze.</li> <li><a href="https://docs.railway.app/" class="external" target="_blank">Railway-Dokumentation</a> ist klar und vollständig.</li> <li>Der Dienst scheint sehr zuverlässig zu sein, und wenn Sie ihn lieben, sind die Preise vorhersehbar und das Skalieren Ihrer App ist sehr einfach.</li> </ul> <p>Sie sollten sich die Zeit nehmen, um zu bestimmen, ob Railway für Ihre eigene Website <a href="#auswahl_eines_hosting-anbieters">geeignet ist</a>.</p></div></section><section aria-labelledby="wie_funktioniert_railway"><h3 id="wie_funktioniert_railway"><a href="#wie_funktioniert_railway">Wie funktioniert Railway?</a></h3><div class="section-content"><p>Webanwendungen werden jeweils in ihrem eigenen isolierten und unabhängigen virtualisierten Container ausgeführt. Um Ihre Anwendung auszuführen, muss Railway in der Lage sein, die geeignete Umgebung und Abhängigkeiten einzurichten und auch zu verstehen, wie sie gestartet wird.</p> <p>Railway macht dies einfach, da es viele verschiedene Webanwendungs-Frameworks und -Umgebungen anhand ihrer Verwendung von "gängigen Konventionen" automatisch erkennen und installieren kann. Zum Beispiel erkennt Railway Node-Anwendungen, weil sie eine <strong>package.json</strong> Datei haben und kann den verwendeten Package-Manager anhand der "Lock"-Datei, die beim Bauen verwendet wird, bestimmen. Wenn beispielsweise das <code>package-lock.json</code>-Datei in der Anwendung enthalten ist, weiß Railway, dass <em>npm</em> zum Installieren der Pakete verwendet werden soll, während es bei Funden von <strong>yarn.lock</strong> weiß, dass <em>yarn</em> verwendet werden soll. Nachdem alle Abhängigkeiten installiert sind, sucht Railway nach Skripten, die in der Paketdatei mit "build" und "start" bezeichnet sind, und verwendet diese, um den Code zu erstellen und auszuführen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Railway verwendet <a href="https://nixpacks.com/docs" class="external" target="_blank">Nixpacks</a>, um verschiedene Webanwendungs-Frameworks zu erkennen, die in verschiedenen Programmiersprachen geschrieben sind. Sie müssen nichts weiter für dieses Tutorial wissen, aber Sie können mehr über Optionen zur Bereitstellung von Node-Anwendungen in <a href="https://nixpacks.com/docs/providers/node" class="external" target="_blank">Nixpacks Node</a> erfahren.</p> </div> <p>Nachdem die Anwendung läuft, kann sie sich mit den durch <a href="https://docs.railway.app/guides/variables" class="external" target="_blank">Umgebungsvariablen</a> bereitgestellten Informationen konfigurieren. Zum Beispiel muss eine Anwendung, die eine Datenbank verwendet, die Adresse über eine Variable abrufen. Der Datenbankdienst selbst kann von Railway oder einem anderen Anbieter gehostet werden.</p> <p>Entwickler interagieren mit Railway über die Railway-Site und verwenden ein spezielles <a href="https://docs.railway.app/guides/cli" class="external" target="_blank">Command Line Interface (CLI)</a>-Tool. Das CLI ermöglicht es Ihnen, ein lokales GitHub-Repository mit einem Railway-Projekt zu assoziieren, das Repository von der lokalen Branche auf die Live-Site hochzuladen, die Logs des laufenden Prozesses zu inspizieren, Konfigurationsvariablen zu setzen und zu erhalten und vieles mehr. Eine der nützlichsten Funktionen ist, dass Sie das CLI verwenden können, um Ihr lokales Projekt mit denselben Umgebungsvariablen wie das Live-Projekt auszuführen.</p> <p>Das ist die gesamte Übersicht, die Sie benötigen, um die App auf Railway bereitzustellen. Als nächstes richten wir ein Railway-Konto ein, installieren unsere Website und eine Datenbank und probieren den Railway-Client aus.</p></div></section><section aria-labelledby="ein_railway-konto_erhalten"><h3 id="ein_railway-konto_erhalten"><a href="#ein_railway-konto_erhalten">Ein Railway-Konto erhalten</a></h3><div class="section-content"><p>Um Railway zu verwenden, müssen Sie zunächst ein Konto erstellen:</p> <ul> <li>Gehen Sie zu <a href="https://railway.app/" class="external" target="_blank">railway.app</a> und klicken Sie auf den <strong>Anmelden</strong>-Link in der oberen Symbolleiste.</li> <li>Wählen Sie GitHub im Popup aus, um sich mit Ihren GitHub-Anmeldedaten anzumelden</li> <li>Möglicherweise müssen Sie dann in Ihre E-Mails gehen und Ihr Konto verifizieren.</li> <li>Sie werden dann im Railway.app-Dashboard angemeldet: <a href="https://railway.app/dashboard" class="external" target="_blank">https://railway.app/dashboard</a>.</li> </ul></div></section><section aria-labelledby="auf_railway_von_github_bereitstellen"><h3 id="auf_railway_von_github_bereitstellen"><a href="#auf_railway_von_github_bereitstellen">Auf Railway von GitHub bereitstellen</a></h3><div class="section-content"><p>Als Nächstes richten wir Railway ein, um unsere Bibliothek von GitHub bereitzustellen. Wählen Sie zuerst die Option <strong>Dashboard</strong> aus dem oberen Menü der Site und wählen Sie dann die <strong>Neues Projekt</strong>-Schaltfläche:</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_new_project_button.png" alt="Railway-Website-Dashboard zeigt die Schaltfläche Neues Projekt" width="877" height="583" loading="lazy"></p> <p>Railway zeigt eine Liste von Optionen für das neue Projekt an, einschließlich der Option, ein Projekt von einer Vorlage, die zuerst in Ihrem GitHub-Konto erstellt wurde, und einer Anzahl von Datenbanken bereitzustellen. Wählen Sie <strong>Von GitHub-Repo bereitstellen</strong>.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_new_project_button_deploy_github_repo.png" alt="Railway-Popup zeigt Bereitstellungsoptionen mit der Option Bereitstellen von GitHub-Repo hervorgehoben" width="521" height="571" loading="lazy"></p> <p>Alle Projekte im GitHub-Repos, die Sie während der Einrichtung mit Railway geteilt haben, werden angezeigt. Wählen Sie Ihr GitHub-Repository für die lokale Bibliothek: <code><user-name>/express-locallibrary-tutorial</code>.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_new_project_button_deploy_github_selectrepo.png" alt="Railway-Popup zeigt GitHub-Repos an, die bereitgestellt werden können" width="542" height="442" loading="lazy"></p> <p>Bestätigen Sie Ihre Bereitstellung, indem Sie <strong>Jetzt bereitstellen</strong> wählen.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_new_project_deploy_confirm.png" alt="Bestätigungsbildschirm, wenn Sie die Bereitstellung des Projekts wählen können" width="526" height="380" loading="lazy"></p> <p>Railway lädt und stellt dann Ihr Projekt bereit und zeigt den Fortschritt auf der Registerkarte "Bereitstellungen" an. Wenn die Bereitstellung erfolgreich abgeschlossen ist, sehen Sie einen Bildschirm wie den unten gezeigten.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_project_deploy.png" alt="Railway-Dashboard zeigt die Registerkarte Bereitstellungen für das bereitgestellte Projekt an" width="1050" height="387" loading="lazy"></p> <p>Wählen Sie nun die Registerkarte <em>Einstellungen</em>, scrollen Sie dann zum Abschnitt Domains und drücken Sie die <strong>Domain generieren</strong>-Schaltfläche.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_project_generate_domain.png" alt="Railway-Projekteinstellungsregisterkarte zeigt die Schaltfläche zum Erstellen einer Domain" width="696" height="435" loading="lazy"></p> <p>Dies wird die Site veröffentlichen und die Domain anstelle des Buttons anzeigen, wie unten gezeigt.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_project_domain.png" alt="Railway-Projekteinstellungsregisterkarte zeigt einen Link zur lokalen Bibliotheksite an" width="509" height="197" loading="lazy"></p> <p>Wählen Sie die Domain-URL, um auf Ihre Bibliotheksanwendung zuzugreifen. Beachten Sie, dass wir bei Ihnen noch keine Produktionsdatenbank angegeben haben, sodass die lokale Bibliothek mit Ihren Entwicklungsdaten geöffnet wird.</p></div></section><section aria-labelledby="eine_mongodb-datenbank_einrichten_und_verbinden"><h3 id="eine_mongodb-datenbank_einrichten_und_verbinden"><a href="#eine_mongodb-datenbank_einrichten_und_verbinden">Eine MongoDB-Datenbank einrichten und verbinden</a></h3><div class="section-content"><p>Anstatt unsere Entwicklungsdaten zu verwenden, lassen Sie uns als Nächstes eine Produktions-MongoDB-Datenbank erstellen, die wir stattdessen verwenden können. Wir werden die Datenbank als Teil des Railway-Anwendungsprojekts erstellen, obwohl es nichts gibt, was Sie daran hindert, dies in einem separaten Projekt zu erstellen, oder tatsächlich eine <em>MongoDB Atlas</em> Datenbank für Produktionsdaten wie für die Entwicklungsdatenbank zu verwenden.</p> <p>Auf Railway wählen Sie die <strong>Dashboard</strong>-Option aus dem oberen Menü der Site und wählen dann Ihr Anwendungsprojekt. Zu diesem Zeitpunkt enthält es nur einen Dienst für Ihre Anwendung (dieser kann ausgewählt werden, um Variablen und andere Details des Dienstes zu setzen). Wählen Sie die <strong>Neue</strong>-Schaltfläche, die zum Hinzufügen von Diensten zum aktuellen Projekt verwendet wird.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_project_open_no_database.png" alt="Railway-Projekt mit hervorgehobener neuer Dienst-Schaltfläche" width="1028" height="509" loading="lazy"></p> <p>Wählen Sie Datenbank, wenn Sie nach der Art von Dienst gefragt werden, der hinzugefügt werden soll:</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_database_add.png" alt="Railway-Popup zeigt Optionen für einen neuen Dienst, wie Datenbank, GitHub-Repo, leeren Dienst usw." width="512" height="285" loading="lazy"></p> <p>Dann wählen Sie <strong>MongoDB hinzufügen</strong> aus, um mit dem Hinzufügen der Datenbank zu beginnen</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_database_select_type.png" alt="Railway-Popup zeigt verschiedene Datenbanken, die ausgewählt werden können: Postgres, MySQL, MongoDB und so weiter" width="518" height="333" loading="lazy"></p> <p>Railway stellt dann einen Dienst mit einer leeren Datenbank im selben Projekt bereit. Nach Abschluss sehen Sie jetzt sowohl den Anwendungs- als auch den Datenbankdienst in der Projektansicht.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_project_two_services.png" alt="Railway-Projekt mit Anwendungs- und Datenbankdiensten" width="953" height="477" loading="lazy"></p> <p>Wählen Sie den MongoDB-Dienst, um Informationen über die Datenbank anzuzeigen. Öffnen Sie die Registerkarte <em>Variablen</em> und kopieren Sie die "Mongo_URL" (dies ist die Adresse der Datenbank).</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_mongodb_connect.png" alt="Railway-Datenbankeinstellungen zeigt die URL an, die benötigt wird, um sich mit der Datenbank zu verbinden" width="1842" height="750" loading="lazy"></p> <p>Um dies für die Bibliotheksanwendung zugänglich zu machen, müssen wir es der Anwendungsprozess durch eine Umgebungsvariable hinzufügen. Öffnen Sie zuerst den Anwendungsdienst. Wählen Sie dann die Registerkarte <em>Variablen</em> und drücken Sie die <strong>Neue Variable</strong>-Schaltfläche.</p> <p>Geben Sie den Variablennamen <code>MONGODB_URI</code> und die Verbindungs-URL ein, die Sie für die Datenbank kopiert haben (<code>MONGODB_URI</code> ist der Name der Umgebungsvariable, aus der <a href="#konfiguration_der_datenbank">wir die Anwendung konfiguriert haben</a>, um die Datenbankadresse zu lesen). Dies wird wie der unten gezeigte Bildschirm aussehen.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_variables_database_url.png" alt="Railway-Website-Variablenbildschirm während der Hinzufügung der MONGODB_URI-Variable und Adresse" width="1016" height="400" loading="lazy"></p> <p>Wählen Sie <strong>Hinzufügen</strong> zur Hinzufügung der Variable.</p> <p>Railway startet Ihre App neu, wenn es Variablen aktualisiert. Wenn Sie jetzt die Startseite überprüfen, sollte sie null Werte für Ihre Objektzahlen anzeigen, da die obigen Änderungen bedeuten, dass wir nun eine neue (leere) Datenbank verwenden.</p></div></section><section aria-labelledby="andere_konfigurationsvariablen_2"><h3 id="andere_konfigurationsvariablen_2"><a href="#andere_konfigurationsvariablen_2">Andere Konfigurationsvariablen</a></h3><div class="section-content"><p>Sie erinnern sich aus einem vorausgegangenen Abschnitt, dass wir <code>NODE_ENV</code> auf 'production' setzen müssen, um unsere Leistung zu verbessern und weniger ausführliche Fehlermeldungen zu generieren. Wir können dies im selben Bildschirm tun, in dem wir die Variable <code>MONGODB_URI</code> gesetzt haben.</p> <p>Öffnen Sie den Anwendungsdienst. Wählen Sie dann die Registerkarte <em>Variablen</em>, wo Sie sehen werden, dass <code>MONGODB_URI</code> bereits definiert ist, und drücken Sie die <strong>Neue Variable</strong>-Schaltfläche.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_variables_new.png" alt="Registerkarte Variablen in Railway mit hervorgehobener neuer Variablen-Schaltfläche" width="1005" height="386" loading="lazy"></p> <p>Geben Sie <code>NODE_ENV</code> als Namen der neuen Variable und <code>production</code> als Namen der Umgebung ein. Drücken Sie dann die <strong>Hinzufügen</strong>-Schaltfläche.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_variables_new_node_env.png" alt="Registerkarte Variablen in Railway mit neuer NODE_ENV-Variable, die auf 'production' gesetzt wird" width="706" height="379" loading="lazy"></p> <p>Die Bibliotheksanwendung ist nun eingerichtet und für den Produktionseinsatz konfiguriert. Sie können durch die Website-Schnittstelle Daten hinzufügen und es sollte genauso arbeiten wie während der Entwicklung (wenn auch mit weniger Debug-Informationen für ungültige Seiten).</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie lediglich einige Daten zum Testen hinzufügen möchten, könnten Sie das <code>populatedb</code>-Skript (mit Ihrer MongoDB-Produktionsdatenbank-URL) verwenden, wie im Abschnitt <a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#testing_%E2%80%94_create_some_items">Express-Tutorial Teil 3: Verwenden einer Datenbank (mit Mongoose) Testing — einige Elemente erstellen</a> beschrieben.</p> </div></div></section><section aria-labelledby="den_client_installieren"><h3 id="den_client_installieren"><a href="#den_client_installieren">Den Client installieren</a></h3><div class="section-content"><p>Laden Sie den Railway-Client für Ihr lokales Betriebssystem herunter und installieren Sie ihn, indem Sie den <a href="https://docs.railway.app/guides/cli" class="external" target="_blank">Anweisungen hier</a> folgen.</p> <p>Nachdem der Client installiert ist, können Sie Befehle ausführen. Einige der wichtigeren Operationen umfassen das Bereitstellen des aktuellen Verzeichnisses Ihres Computers zu einem verbundenen Railway-Projekt (ohne auf GitHub hochladen zu müssen) und Ihr Projekt lokal mit denselben Einstellungen wie auf dem Produktionsserver auszuführen.</p> <p>Eine Liste aller möglichen Befehle erhalten Sie, indem Sie den folgenden Befehl in ein Terminal eingeben.</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>railway help </code></pre></div></div></section><section aria-labelledby="debugging"><h3 id="debugging"><a href="#debugging">Debugging</a></h3><div class="section-content"><p>Der Railway-Client bietet den Befehl logs an, um das Ende der Protokolle anzuzeigen (ein vollständigeres Protokoll ist für jedes Projekt auf der Site verfügbar):</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>railway logs </code></pre></div></div></section><section aria-labelledby="zusammenfassung"><h2 id="zusammenfassung"><a href="#zusammenfassung">Zusammenfassung</a></h2><div class="section-content"><p>Das ist das Ende dieses Tutorials zum Einrichten von Express-Apps in der Produktion und auch der Reihe von Tutorials zur Arbeit mit Express. Wir hoffen, Sie fanden sie nützlich. Sie können sich eine vollständig durchgearbeitete Version des <a href="https://github.com/mdn/express-locallibrary-tutorial" class="external" target="_blank">Quellcodes auf GitHub hier</a> ansehen.</p></div></section><section aria-labelledby="siehe_auch"><h2 id="siehe_auch"><a href="#siehe_auch">Siehe auch</a></h2><div class="section-content"><ul> <li> <p><a href="https://expressjs.com/en/advanced/best-practice-performance.html" class="external" target="_blank">Produktionsbeste-Praktiken: Leistung und Zuverlässigkeit</a> (Express-Dokumentation)</p> </li> <li> <p><a href="https://expressjs.com/en/advanced/best-practice-security.html" class="external" target="_blank">Produktionsbeste Praktiken: Sicherheit</a> (Express-Dokumentation)</p> </li> <li> <p>Railway-Dokumentation</p> <ul> <li><a href="https://docs.railway.app/guides/cli" class="external" target="_blank">CLI</a></li> </ul> </li> <li> <p>DigitalOcean</p> <ul> <li><a href="https://www.digitalocean.com/community/tutorials?q=express" class="external" target="_blank">Express</a> Tutorials</li> <li><a href="https://www.digitalocean.com/community/tutorials?q=node.js" class="external" target="_blank">Node.js</a> Tutorials</li> </ul> </li> <li> <p>Heroku</p> <ul> <li><a href="https://devcenter.heroku.com/articles/getting-started-with-nodejs" class="external" target="_blank">Getting Started on Heroku with Node.js</a> (Heroku-Dokumentation)</li> <li><a href="https://devcenter.heroku.com/articles/deploying-nodejs" class="external" target="_blank">Deploying Node.js Applications on Heroku</a> (Heroku-Dokumentation)</li> <li><a href="https://devcenter.heroku.com/articles/nodejs-support" class="external" target="_blank">Heroku Node.js Support</a> (Heroku-Dokumentation)</li> <li><a href="https://devcenter.heroku.com/articles/node-concurrency" class="external" target="_blank">Optimizing Node.js Application Concurrency</a> (Heroku-Dokumentation)</li> <li><a href="https://devcenter.heroku.com/articles/how-heroku-works" class="external" target="_blank">How Heroku works</a> (Heroku-Dokumentation)</li> <li><a href="https://devcenter.heroku.com/articles/dynos" class="external" target="_blank">Dynos and the Dyno Manager</a> (Heroku-Dokumentation)</li> <li><a href="https://devcenter.heroku.com/articles/config-vars" class="external" target="_blank">Configuration and Config Vars</a> (Heroku-Dokumentation)</li> <li><a href="https://devcenter.heroku.com/articles/limits" class="external" target="_blank">Limits</a> (Heroku-Dokumentation)</li> </ul> </li> </ul> <ul class="prev-next"><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms"><span class="button-wrap"> Zurück </span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs"><span class="button-wrap"> Übersicht: Express Web Framework (Node.js/JavaScript)</span></a></li></ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>MDN-Feedback-Box</h2><fieldset class="feedback"><label>War diese Übersetzung hilfreich?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Ja</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>Nein</span></button></div></fieldset><p class="last-modified-date">Diese Seite wurde automatisch aus dem Englischen übersetzt.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md?plain=1" title="Folder: de/learn_web_development/extensions/server-side/express_nodejs/deployment (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Übersetzung auf GitHub anzeigen</a> • <a href="https://github.com/mdn/translated-content-de/issues/new?template=page-report-de.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FExpress_Nodejs%2Fdeployment&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60de%2Flearn_web_development%2Fextensions%2Fserver-side%2Fexpress_nodejs%2Fdeployment%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FExtensions%2FServer-side%2FExpress_Nodejs%2Fdeployment%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Flearn_web_development%2Fextensions%2Fserver-side%2Fexpress_nodejs%2Fdeployment%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2F452fe502cfb4c9a91c346af17370ecfb6a8bd17e%0A*+Document+last+modified%3A+2025-02-17T00%3A20%3A27.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Fehler mit dieser Übersetzung melden</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/de/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\"><span class=\"button-wrap\"> Zurück </span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\"><span class=\"button-wrap\"> Übersicht: Express Web Framework (Node.js/JavaScript)</span></a></li></ul>\n<p>Nun, da Sie eine großartige <a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">LocalLibrary</a> Website erstellt (und getestet) haben, möchten Sie sie auf einem öffentlichen Webserver installieren, damit Bibliotheksmitarbeiter und Mitglieder über das Internet darauf zugreifen können. Dieser Artikel bietet einen Überblick darüber, wie Sie einen Host zur Bereitstellung Ihrer Website finden können und was Sie tun müssen, um Ihre Website für den Produktionseinsatz bereit zu machen.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Voraussetzungen:</th>\n <td>\n Schließen Sie alle vorherigen Themen des Tutorials ab, einschließlich <a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express Tutorial Teil 6: Arbeiten mit Formularen</a>.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Ziel:</th>\n <td>\n Lernen, wo und wie Sie eine Express-App für die Produktion bereitstellen können.\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"übersicht","title":"Übersicht","isH3":false,"content":"<p>Sobald Ihre Website fertig ist (oder fertig genug für öffentliche Tests), müssen Sie sie auf einem öffentlich zugänglichen und zugänglicheren Ort als Ihrem persönlichen Entwicklungscomputer hosten.</p>\n<p>Bis jetzt haben Sie in einer <a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Entwicklungsumgebung</a> gearbeitet, Express/Node als Webserver verwendet, um Ihre Website mit dem lokalen Browser/Netzwerk zu teilen, und Ihre Website mit (unsicheren) Entwicklereinstellungen betrieben, die Debugging und andere private Informationen offenlegen. Bevor Sie eine Website extern hosten können, müssen Sie zuerst:</p>\n<ul>\n<li>Eine Umgebung für das Hosting der Express-App auswählen.</li>\n<li>Einige Änderungen an Ihren Projekteinstellungen vornehmen.</li>\n<li>Eine Produktionsinfrastruktur für die Bereitstellung Ihrer Website einrichten.</li>\n</ul>\n<p>Dieses Tutorial bietet einige Anleitungen zu Ihren Optionen für die Auswahl einer Hosting-Site, einen kurzen Überblick darüber, was Sie tun müssen, um Ihre Express-App für die Produktion bereitzumachen, und ein funktionierendes Beispiel, wie die LocalLibrary-Website auf dem <a href=\"https://railway.app/\" class=\"external\" target=\"_blank\">Railway</a>-Cloud-Hosting-Dienst installiert wird.</p>"}},{"type":"prose","value":{"id":"was_ist_eine_produktionsumgebung","title":"Was ist eine Produktionsumgebung?","isH3":false,"content":"<p>Die Produktionsumgebung ist die Umgebung, die vom Server-Computer bereitgestellt wird, auf dem Sie Ihre Website für den externen Verbrauch betreiben. Die Umgebung umfasst:</p>\n<ul>\n<li>Computer-Hardware, auf der die Website läuft.</li>\n<li>Betriebssystem (z.B. Linux oder Windows).</li>\n<li>Programmiersprachen-Runtime und Framework-Bibliotheken, auf denen Ihre Website geschrieben ist.</li>\n<li>Webserver-Infrastruktur, möglicherweise einschließlich eines Webservers, Reverse-Proxys, Load Balancers usw.</li>\n<li>Datenbanken, von denen Ihre Website abhängt.</li>\n</ul>\n<p>Der Server-Computer könnte sich auf Ihrem Gelände befinden und über eine schnelle Verbindung mit dem Internet verbunden sein, aber es ist viel üblicher, einen Computer zu verwenden, der \"in der Cloud\" gehostet wird. Das bedeutet in der Praxis, dass Ihr Code auf einem entfernten Computer (oder möglicherweise einem \"virtuellen\" Computer) im/den Rechenzentrum(en) Ihres Hosting-Unternehmens ausgeführt wird. Der Remote-Server bietet in der Regel ein garantiertes Niveau an Rechenressourcen (z.B. CPU, RAM, Speicherkapazität usw.) und Internetkonnektivität zu einem bestimmten Preis.</p>\n<p>Diese Art von ferngesteuerten Rechen-/Netzwerk-Hardware wird als <em>Infrastructure as a Service (IaaS)</em> bezeichnet. Viele IaaS-Anbieter bieten Optionen an, ein bestimmtes Betriebssystem vorzuinstallieren, auf das Sie die anderen Komponenten Ihrer Produktionsumgebung installieren müssen. Andere Anbieter erlauben Ihnen, vollständigere Umgebungen auszuwählen, die möglicherweise eine komplette Node-Einrichtung enthalten.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nVorgefertigte Umgebungen können die Einrichtung Ihrer Website sehr einfach machen, da sie die Konfiguration reduzieren. Allerdings können die verfügbaren Optionen Sie möglicherweise auf einen unbekannten Server (oder andere Komponenten) beschränken und auf einer älteren Version des Betriebssystems basieren. Oft ist es besser, die Komponenten selbst zu installieren, damit Sie die gewünschten erhalten, und wenn Sie Teile des Systems aktualisieren müssen, wissen Sie, wo Sie anfangen müssen!</p>\n</div>\n<p>Andere Hosting-Anbieter unterstützen Express als Teil eines <em>Platform as a Service</em> (<em>PaaS</em>)-Angebots. Bei Verwendung dieser Art von Hosting müssen Sie sich um den größten Teil Ihres Produktionsumfeldes (Server, Load Balancer usw.) nicht kümmern, da die Hostplattform diese für Sie übernimmt. Dadurch wird die Bereitstellung recht einfach, da Sie sich nur auf Ihre Webanwendung konzentrieren müssen und nicht auf andere Serverinfrastruktur.</p>\n<p>Einige Entwickler wählen die erhöhte Flexibilität, die IaaS gegenüber PaaS bietet, während andere die reduzierte Wartungsbelastung und das einfachere Skalieren von PaaS schätzen. Wenn Sie gerade erst anfangen, ist die Einrichtung Ihrer Website auf einem PaaS-System viel einfacher, und genau das werden wir in diesem Tutorial tun.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWenn Sie sich für einen Node/Express-freundlichen Hosting-Anbieter entscheiden, sollte er Anleitungen zur Einrichtung einer Express-Website mit verschiedenen Konfigurationen von Webserver, Anwendungsserver, Reverse-Proxy usw. bereitstellen. Zum Beispiel gibt es viele Schritt-für-Schritt-Anleitungen für verschiedene Konfigurationen in den <a href=\"https://www.digitalocean.com/community/tutorials?q=node\" class=\"external\" target=\"_blank\">DigitalOcean Node Community-Dokumentationen</a>.</p>\n</div>"}},{"type":"prose","value":{"id":"auswahl_eines_hosting-anbieters","title":"Auswahl eines Hosting-Anbieters","isH3":false,"content":"<p>Es gibt zahlreiche Hosting-Anbieter, die entweder aktiv Unterstützung bieten oder gut mit <em>Node</em> (und <em>Express</em>) funktionieren. Diese Anbieter bieten verschiedene Arten von Umgebungen (IaaS, PaaS) und verschiedene Ebenen von Rechen- und Netzwerkressourcen zu unterschiedlichen Preisen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nEs gibt viele Hosting-Lösungen, und ihre Dienste und Preise können sich im Laufe der Zeit ändern. Während wir unten einige Optionen vorstellen, lohnt es sich, sowohl diese als auch andere Optionen zu überprüfen, bevor Sie einen Hosting-Anbieter auswählen.</p>\n</div>\n<p>Einige der Dinge, die Sie bei der Auswahl eines Hosts berücksichtigen sollten:</p>\n<ul>\n<li>Wie ausgelastet Ihre Website voraussichtlich sein wird und die Kosten für die benötigten Daten- und Rechenressourcen, um diese Nachfrage zu decken.</li>\n<li>Grad der Unterstützung für horizontales (Hinzufügen weiterer Maschinen) und vertikales (Upgrade auf leistungsstärkere Maschinen) Skalieren und die Kosten dafür.</li>\n<li>Die Standorte, an denen der Anbieter Rechenzentren hat, und wo der Zugriff daher am schnellsten sein dürfte.</li>\n<li>Historische Leistungswerte des Hosts in Bezug auf Betriebszeit und Ausfallzeiten.</li>\n<li>Tools zur Verwaltung der Website - sind sie einfach zu bedienen und sicher (z.B. SFTP vs. FTP)?</li>\n<li>Integrierte Frameworks zur Überwachung Ihres Servers.</li>\n<li>Bekannte Einschränkungen. Einige Hosts blockieren absichtlich bestimmte Dienste (z.B. E-Mail). Andere bieten nur eine bestimmte Anzahl von Stunden \"Live-Zeit\" in einigen Preisklassen oder nur eine geringe Speichermenge an.</li>\n<li>Zusätzliche Vorteile. Einige Anbieter bieten kostenlose Domainnamen und Unterstützung für TLS-Zertifikate an, die Sie sonst bezahlen müssten.</li>\n<li>Ob der \"kostenlose\" Tarif, auf den Sie sich verlassen, im Laufe der Zeit abläuft und ob die Kosten für den Umstieg auf einen teureren Tarif bedeuten, dass Sie von Anfang an besser einen anderen Dienst hätten nutzen sollen!</li>\n</ul>\n<p>Die gute Nachricht ist, dass es zu Beginn ziemlich viele Sites gibt, die \"kostenlose\" Rechenumgebungen bieten, die für Evaluierung und Testen vorgesehen sind. Diese sind in der Regel ressourcenbeschränkte bzw. -begrenzte Umgebungen, und Sie müssen sich bewusst sein, dass sie nach einer Einführungszeit ablaufen oder andere Einschränkungen haben können. Sie sind jedoch hervorragend zum Testen von Low-Traffic-Sites in einer gehosteten Umgebung geeignet und bieten eine einfache Migration zu mehr Ressourcen, wenn Ihre Site häufiger besucht wird. Beliebte Optionen in dieser Kategorie sind <a href=\"https://glitch.com/\" class=\"external\" target=\"_blank\">Glitch</a>, <a href=\"https://www.pythonanywhere.com/\" class=\"external\" target=\"_blank\">Python Anywhere</a>, <a href=\"https://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html\" class=\"external\" target=\"_blank\">Amazon Web Services</a>, <a href=\"https://azure.microsoft.com/en-us/pricing/details/app-service/linux/\" class=\"external\" target=\"_blank\">Microsoft Azure</a> usw.</p>\n<p>Die meisten Anbieter bieten auch einen \"Basic\" oder \"Hobby\"-Tarif an, der für kleinere Produktionsstätten gedacht ist und nützlichere Rechenleistung und weniger Einschränkungen bietet. <a href=\"https://railway.app/\" class=\"external\" target=\"_blank\">Railway</a>, <a href=\"https://www.heroku.com/\" class=\"external\" target=\"_blank\">Heroku</a>, <a href=\"https://www.digitalocean.com/\" class=\"external\" target=\"_blank\">DigitalOcean</a> und <a href=\"https://www.pythonanywhere.com/\" class=\"external\" target=\"_blank\">Python Anywhere</a> sind Beispiele für beliebte Hosting-Anbieter, die einen relativ günstigen Basistarif für Computing bieten (im Bereich von 5 bis 10 US-Dollar pro Monat).</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDenken Sie daran, dass der Preis nicht das einzige Auswahlkriterium ist. Wenn Ihre Website erfolgreich ist, könnte sich herausstellen, dass Skalierbarkeit der wichtigste Faktor ist.</p>\n</div>"}},{"type":"prose","value":{"id":"ihre_website_bereit_zur_veröffentlichung_machen","title":"Ihre Website bereit zur Veröffentlichung machen","isH3":false,"content":"<p>Die Hauptaspekte, die Sie bei der Veröffentlichung Ihrer Website berücksichtigen sollten, sind Websicherheit und Leistung. Mindestens möchten Sie die Datenbankkonfiguration so ändern, dass Sie eine andere Datenbank für die Produktion verwenden können und deren Zugangsdaten sichern, die Stack-Traces, die während der Entwicklung auf Fehlerseiten enthalten sind, entfernen, Ihr Logging aufräumen und die entsprechenden Headers setzen, um viele gängige Sicherheitsbedrohungen zu vermeiden.</p>\n<p>In den folgenden Unterabschnitten skizzieren wir die wichtigsten Änderungen, die Sie an Ihrer App vornehmen sollten.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWeitere nützliche Tipps finden Sie in den Express-Dokumentationen – siehe <a href=\"https://expressjs.com/en/advanced/best-practice-performance.html\" class=\"external\" target=\"_blank\">Produktionsbeste Praktiken: Leistung und Zuverlässigkeit</a> und <a href=\"https://expressjs.com/en/advanced/best-practice-security.html\" class=\"external\" target=\"_blank\">Produktionsbeste Praktiken: Sicherheit</a>.</p>\n</div>"}},{"type":"prose","value":{"id":"konfiguration_der_datenbank","title":"Konfiguration der Datenbank","isH3":true,"content":"<p>Im bisherigen Verlauf dieses Tutorials haben wir eine einzige Entwicklungsdatenbank verwendet, für die die Adresse und Zugangsdaten fest im <strong>app.js</strong> kodiert sind. Da die Entwicklungsdatenbank keine Informationen enthält, deren Offenlegung oder Beschädigung uns Sorgen macht, besteht kein besonderes Risiko, diese Details zu leaken. Wenn Sie jedoch mit echten Daten arbeiten, insbesondere mit persönlichen Benutzerinformationen, ist es sehr wichtig, Ihre Datenbank-Zugangsdaten zu schützen.</p>\n<p>Aus diesem Grund möchten wir eine andere Datenbank für die Produktion nutzen als die, die wir für die Entwicklung verwendet haben, und auch die Zugangsdaten der Produktionsdatenbank vom Quellcode trennen, damit sie ordnungsgemäß geschützt werden können.</p>\n<p>Wenn Ihr Hosting-Anbieter die Einstellung von Umgebungsvariablen über eine Weboberfläche unterstützt (wie viele dies tun), ist ein Weg, dies zu tun, den Server veranlassen, die Datenbank-URL aus einer Umgebungsvariablen zu beziehen. Unten ändern wir die LocalLibrary-Website, um die URI der Datenbank aus einer OS-Umgebungsvariablen zu beziehen, wenn sie definiert wurde, und ansonsten die URL der Entwicklungsdatenbank zu verwenden.</p>\n<p>Öffnen Sie <strong>app.js</strong> und finden Sie die Zeile, die die MongDB-Verbindungseinstellung setzt. Sie wird in etwa so aussehen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const mongoDB =\n \"mongodb+srv://your_user_name:your_password@cluster0.cojoign.mongodb.net/local_library?retryWrites=true&w=majority\";\n</code></pre></div>\n<p>Ersetzen Sie die Zeile durch den folgenden Code, der <code>process.env.MONGODB_URI</code> verwendet, um die Verbindungszeichenfolge aus einer Umgebungsvariablen namens <code>MONGODB_URI</code> zu beziehen, falls diese gesetzt wurde (verwenden Sie Ihre eigene Datenbank-URL anstelle des Platzhalters unten).</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// Set up mongoose connection\nconst mongoose = require(\"mongoose\");\nmongoose.set(\"strictQuery\", false);\n\nconst dev_db_url =\n \"mongodb+srv://your_user_name:your_password@cluster0.cojoign.mongodb.net/local_library?retryWrites=true&w=majority\";\nconst mongoDB = process.env.MONGODB_URI || dev_db_url;\n\nmain().catch((err) => console.log(err));\nasync function main() {\n await mongoose.connect(mongoDB);\n}\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nEine weitere übliche Methode, um die Zugangsdaten der Produktionsdatenbank vom Quellcode zu trennen, besteht darin, sie aus einer <code>.env</code> Datei zu lesen, die separat auf das Dateisystem bereitgestellt wird (zum Beispiel könnten sie mit dem npm-Modul <a href=\"https://www.npmjs.com/package/dotenv\" class=\"external\" target=\"_blank\">dotenv</a> gelesen werden).</p>\n</div>"}},{"type":"prose","value":{"id":"setzen_sie_node_env_auf_production","title":"Setzen Sie NODE_ENV auf 'production'","isH3":true,"content":"<p>Wir können Stack-Traces auf Fehlerseiten entfernen, indem wir die <code>NODE_ENV</code> Umgebungsvariable auf <em>production</em> setzen (sie ist standardmäßig auf <em>development</em> gesetzt). Zusätzlich zur Erzeugung weniger ausführlicher Fehlermeldungen führt die Einstellung der Variable auf <em>production</em> dazu, dass Ansichts-Templates und CSS-Dateien, die aus CSS-Erweiterungen generiert wurden, im Cache gespeichert werden. Tests zeigen, dass die Einstellung von <code>NODE_ENV</code> auf <em>production</em> die Leistung der App um den Faktor drei verbessern kann!</p>\n<p>Diese Änderung kann entweder durch die Verwendung von <code>export</code>, einer Umgebungsdatei oder dem OS-Initialisierungssystem vorgenommen werden.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDies ist eigentlich eine Änderung, die Sie in Ihrer Umgebungs-Einrichtung vornehmen, und nicht in Ihrer App, aber sie ist wichtig genug, um hier erwähnt zu werden! Wir zeigen, wie dies in unserem Hosting-Beispiel unten eingestellt wird.</p>\n</div>"}},{"type":"prose","value":{"id":"angemessenes_logging","title":"Angemessenes Logging","isH3":true,"content":"<p>Logging-Aufrufe können sich auf eine stark frequentierte Website auswirken. In einer Produktionsumgebung müssen Sie möglicherweise die Website-Aktivität protokollieren (z.B. den Traffic verfolgen oder API-Aufrufe protokollieren), aber Sie sollten versuchen, das für Debugging-Zwecke hinzugefügte Logging auf ein Minimum zu beschränken.</p>\n<p>Eine Möglichkeit, das \"Debug\"-Logging in der Produktion zu minimieren, ist die Verwendung eines Moduls wie <a href=\"https://www.npmjs.com/package/debug\" class=\"external\" target=\"_blank\">debug</a>, das es Ihnen ermöglicht zu kontrollieren, welches Logging durch die Einstellung einer Umgebungsvariable durchgeführt wird. Zum Beispiel zeigt der folgende Codeausschnitt, wie Sie das \"author\"-Logging einrichten könnten. Die Debug-Variable wird mit dem Namen 'author' deklariert, und das Präfix \"author\" wird automatisch für alle Logs von diesem Objekt angezeigt.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const debug = require(\"debug\")(\"author\");\n\n// Display Author update form on GET.\nexports.author_update_get = asyncHandler(async (req, res, next) => {\n const author = await Author.findById(req.params.id).exec();\n if (author === null) {\n // No results.\n debug(`id not found on update: ${req.params.id}`);\n const err = new Error(\"Author not found\");\n err.status = 404;\n return next(err);\n }\n\n res.render(\"author_form\", { title: \"Update Author\", author: author });\n});\n</code></pre></div>\n<p>Sie können dann eine bestimmte Menge von Logs aktivieren, indem Sie sie als durch Kommas getrennte Liste in der <code>DEBUG</code> Umgebungsvariable angeben. Sie können die Variablen für die Anzeige von \"author\" und \"book\" Logs wie gezeigt einstellen (Wildcards werden ebenfalls unterstützt).</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>#Windows\nset DEBUG=author,book\n\n#Linux\nexport DEBUG=\"author,book\"\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nAufrufe von <code>debug</code> können das Logging ersetzen, das Sie möglicherweise zuvor mit <code>console.log()</code> oder <code>console.error()</code> durchgeführt haben. Ersetzen Sie alle <code>console.log()</code> Aufrufe in Ihrem Code durch Logging über das <a href=\"https://www.npmjs.com/package/debug\" class=\"external\" target=\"_blank\">debug</a> Modul. Schalten Sie das Logging in Ihrer Entwicklungsumgebung ein und aus, indem Sie die DEBUG-Variable setzen und beobachten Sie, welchen Einfluss dies auf das Logging hat.</p>\n</div>\n<p>Wenn Sie die Aktivität der Website protokollieren müssen, können Sie eine Logging-Bibliothek wie <em>Winston</em> oder <em>Bunyan</em> verwenden. Weitere Informationen zu diesem Thema finden Sie unter: <a href=\"https://expressjs.com/en/advanced/best-practice-performance.html\" class=\"external\" target=\"_blank\">Produktionsbeste-Praktiken: Leistung und Zuverlässigkeit</a>.</p>"}},{"type":"prose","value":{"id":"verwenden_sie_gzipdeflate_komprimierung_für_antworten","title":"Verwenden Sie gzip/deflate Komprimierung für Antworten","isH3":true,"content":"<p>Webserver können oft die HTTP-Antworten, die an einen Client zurückgeschickt werden, komprimieren, was die Ladezeit der Seite für den Client erheblich reduziert. Die verwendete Kompressionsmethode hängt von den Dekompressionsmethoden ab, die der Client in der Anfrage angibt (die Antwort wird unkomprimiert gesendet, wenn keine Kompressionsmethoden unterstützt werden).</p>\n<p>Fügen Sie dies Ihrer Website mittels <a href=\"https://www.npmjs.com/package/compression\" class=\"external\" target=\"_blank\">compression</a> Middleware hinzu. Installieren Sie dies im Wurzelverzeichnis Ihres Projekts, indem Sie den folgenden Befehl ausführen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install compression\n</code></pre></div>\n<p>Öffnen Sie <strong>./app.js</strong> und fordern Sie die Komprimierungsbibliothek wie gezeigt an. Fügen Sie die Komprimierungsbibliothek mit der <code>use()</code> Methode der Middleware-Kette hinzu (dies sollte vor allen Routen erscheinen, die Sie komprimieren möchten - in diesem Fall alle!).</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const catalogRouter = require(\"./routes/catalog\"); // Import routes for \"catalog\" area of site\nconst compression = require(\"compression\");\n\n// Create the Express application object\nconst app = express();\n\n// …\n\napp.use(compression()); // Compress all routes\n\napp.use(express.static(path.join(__dirname, \"public\")));\n\napp.use(\"/\", indexRouter);\napp.use(\"/users\", usersRouter);\napp.use(\"/catalog\", catalogRouter); // Add catalog routes to middleware chain.\n\n// …\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nFür eine stark frequentierte Website in Produktion würden Sie diese Middleware nicht verwenden. Stattdessen würden Sie einen Reverse Proxy wie <a href=\"https://nginx.org/\" class=\"external\" target=\"_blank\">Nginx</a> verwenden.</p>\n</div>"}},{"type":"prose","value":{"id":"verwenden_sie_helmet_um_gegen_bekannte_schwachstellen_zu_schützen","title":"Verwenden Sie Helmet, um gegen bekannte Schwachstellen zu schützen","isH3":true,"content":"<p><a href=\"https://www.npmjs.com/package/helmet\" class=\"external\" target=\"_blank\">Helmet</a> ist ein Middleware-Paket. Es kann die richtigen HTTP-Header setzen, die Ihre App gegen bekannte Web-Schwachstellen schützen (siehe die <a href=\"https://helmetjs.github.io/\" class=\"external\" target=\"_blank\">Dokumentation</a> für weitere Informationen darüber, welche Header gesetzt werden und vor welchen Schwachstellen es schützt).</p>\n<p>Installieren Sie dies im Wurzelverzeichnis Ihres Projekts, indem Sie den folgenden Befehl ausführen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install helmet\n</code></pre></div>\n<p>Öffnen Sie <strong>./app.js</strong> und fordern Sie die <em>helmet</em> Bibliothek wie angegeben an. Fügen Sie dann das Modul mit der <code>use()</code> Methode der Middleware-Kette hinzu.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const compression = require(\"compression\");\nconst helmet = require(\"helmet\");\n\n// Create the Express application object\nconst app = express();\n\n// Add helmet to the middleware chain.\n// Set CSP headers to allow our Bootstrap and jQuery to be served\napp.use(\n helmet.contentSecurityPolicy({\n directives: {\n \"script-src\": [\"'self'\", \"code.jquery.com\", \"cdn.jsdelivr.net\"],\n },\n }),\n);\n\n// …\n</code></pre></div>\n<p>Üblicherweise hätten wir einfach <code>app.use(helmet());</code> eingefügt, um die <em>Teilmenge</em> der sicherheitsrelevanten Header hinzuzufügen, die für die meisten Sites sinnvoll sind. Im <a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template\">LocalLibrary Basis-Template</a> fügen wir jedoch einige Bootstrap- und jQuery-Skripte ein. Diese verstoßen gegen die Standard-<a href=\"/de/docs/Web/HTTP/CSP\">Content Security Policy (CSP)</a> von Helmet, die das Laden von Cross-Site-Skripts nicht erlaubt. Um das Laden dieser Skripte zu erlauben, modifizieren wir die Helmet-Konfiguration, so dass sie CSP-Direktiven festlegt, um das Laden von Skripten von den angegebenen Domains zu erlauben. Für Ihren eigenen Server können Sie spezifische Header hinzufügen/deaktivieren, wie in den <a href=\"https://www.npmjs.com/package/helmet\" class=\"external\" target=\"_blank\">Anweisungen zur Verwendung von Helmet hier</a> beschrieben.</p>"}},{"type":"prose","value":{"id":"fügen_sie_ratelimiting_zu_den_api-routen_hinzu","title":"Fügen Sie Ratelimiting zu den API-Routen hinzu","isH3":true,"content":"<p><a href=\"https://www.npmjs.com/package/express-rate-limit\" class=\"external\" target=\"_blank\">Express-rate-limit</a> ist ein Middleware-Paket, das verwendet werden kann, um wiederholte Anfragen an APIs und Endpunkte zu begrenzen. Es gibt viele Gründe, warum zu viele Anfragen an Ihre Site gestellt werden könnten, wie z.B. Denial-of-Service-Angriffe, Brute-Force-Angriffe oder sogar einfach ein Client oder Skript, das sich nicht wie erwartet verhält. Abgesehen von den Leistungsproblemen, die durch zu viele Anfragen auftreten und Ihren Server verlangsamen können, könnten Ihnen auch zusätzliche Kosten für den zusätzlichen Traffic entstehen. Dieses Paket kann verwendet werden, um die Anzahl der Anfragen zu begrenzen, die zu einer bestimmten Route oder einer Reihe von Routen gemacht werden können.</p>\n<p>Installieren Sie dies im Wurzelverzeichnis Ihres Projekts, indem Sie den folgenden Befehl ausführen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install express-rate-limit\n</code></pre></div>\n<p>Öffnen Sie <strong>./app.js</strong> und fordern Sie die <em>express-rate-limit</em> Bibliothek wie gezeigt an. Fügen Sie dann das Modul mit der <code>use()</code> Methode der Middleware-Kette hinzu.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const compression = require(\"compression\");\nconst helmet = require(\"helmet\");\n\nconst app = express();\n\n// Set up rate limiter: maximum of twenty requests per minute\nconst RateLimit = require(\"express-rate-limit\");\nconst limiter = RateLimit({\n windowMs: 1 * 60 * 1000, // 1 minute\n max: 20,\n});\n// Apply rate limiter to all requests\napp.use(limiter);\n\n// …\n</code></pre></div>\n<p>Der obige Befehl begrenzt alle Anfragen auf 20 pro Minute (Sie können dies nach Bedarf ändern).</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDrittdienste wie <a href=\"https://www.cloudflare.com/\" class=\"external\" target=\"_blank\">Cloudflare</a> können ebenfalls verwendet werden, wenn Sie fortschrittlichere Schutzmaßnahmen gegen Denial-of-Service oder andere Arten von Angriffen benötigen.</p>\n</div>\n<h4 id=\"node-version_festlegen\">Node-Version festlegen</h4>\n<p>Für Node-Anwendungen, einschließlich Express, enthält die <strong>package.json</strong> Datei alles, was ein Hosting-Anbieter benötigt, um die Anwendungsabhängigkeiten und die Einstiegsdatei zu bestimmen.</p>\n<p>Die einzige wichtige Information, die in unserer aktuellen <strong>package.json</strong> fehlt, ist die von der Bibliothek benötigte Node-Version. Sie können die für die Entwicklung verwendete Node-Version herausfinden, indem Sie den folgenden Befehl eingeben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>>node --version\nv16.17.1\n</code></pre></div>\n<p>Öffnen Sie <strong>package.json</strong> und fügen Sie diese Information als <strong>engines > node</strong> wie gezeigt hinzu (verwenden Sie die Versionsnummer für Ihr System).</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">json</span></div><pre class=\"brush: json notranslate\"><code> \"engines\": {\n \"node\": \">=16.17.1\"\n },\n</code></pre></div>\n<p>Der Hosting-Service unterstützt möglicherweise nicht die angegebene spezifische Version von Node, aber diese Änderung sollte sicherstellen, dass zumindest eine Version mit derselben Hauptversionsnummer oder eine neuere Version verwendet wird.</p>\n<p>Beachten Sie, dass es möglicherweise andere Möglichkeiten gibt, die Node-Version bei verschiedenen Hosting-Services anzugeben, aber der Ansatz mit <strong>package.json</strong> ist weit verbreitet.</p>\n<h4 id=\"abhängigkeiten_holen_und_erneut_testen\">Abhängigkeiten holen und erneut testen</h4>\n<p>Bevor wir fortfahren, lassen Sie uns die Site erneut testen und sicherstellen, dass keine unserer Änderungen Auswirkungen hatte.</p>\n<p>Zuerst müssen wir unsere Abhängigkeiten abrufen. Sie können dies tun, indem Sie den folgenden Befehl in Ihrem Terminal im Wurzelverzeichnis des Projekts ausführen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install\n</code></pre></div>\n<p>Starten Sie nun die Site (siehe <a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes#testing_the_routes\">Testen der Routen</a> für die relevanten Befehle) und überprüfen Sie, ob die Site weiterhin wie erwartet funktioniert.</p>"}},{"type":"prose","value":{"id":"ein_anwendungsrepository_in_github_erstellen","title":"Ein Anwendungsrepository in GitHub erstellen","isH3":true,"content":"<p>Viele Hosting-Dienste ermöglichen es Ihnen, Projekte aus einem lokalen Repository oder von cloudbasierten Versionskontrollplattformen zu importieren und/oder zu synchronisieren. Dies kann die Bereitstellung und iterative Entwicklung erheblich erleichtern.</p>\n<p>Für dieses Tutorial werden wir ein <a href=\"https://github.com/\" class=\"external\" target=\"_blank\">GitHub</a>-Konto und Repository für die Bibliothek einrichten und das Tool <strong>git</strong> verwenden, um unseren Quellcode hochzuladen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nSie können diesen Schritt überspringen, wenn Sie GitHub bereits zur Verwaltung Ihres Quellcodes verwenden!</p>\n<p>Beachten Sie, dass die Verwendung von Quellcode-Verwaltungstools eine gute Softwareentwicklungs-Praxis ist, da sie es Ihnen erlaubt, Änderungen auszuprobieren und zwischen Ihren Experimenten und dem \"bekannten guten Code\" zu wechseln, wenn Sie dies benötigen!</p>\n</div>\n<p>Die Schritte sind:</p>\n<ol>\n<li>\n<p>Besuchen Sie <a href=\"https://github.com/\" class=\"external\" target=\"_blank\">https://github.com/</a> und erstellen Sie ein Konto.</p>\n</li>\n<li>\n<p>Sobald Sie angemeldet sind, klicken Sie auf den <strong>+</strong> Link in der oberen Symbolleiste und wählen Sie <strong>Neues Repository</strong>.</p>\n</li>\n<li>\n<p>Füllen Sie alle Felder in diesem Formular aus. Obwohl sie nicht zwingend erforderlich sind, werden sie dringend empfohlen.</p>\n<ul>\n<li>Geben Sie einen neuen Repositoriesnamen (z.B. <em>express-locallibrary-tutorial</em>) und eine Beschreibung ein (z.B. \"Local Library Website geschrieben in Express (Node)\").</li>\n<li>Wählen Sie <strong>Node</strong> in der <em>Add .gitignore</em> Auswahl aus.</li>\n<li>Wählen Sie Ihre bevorzugte Lizenz in der <em>Add license</em> Auswahl aus.</li>\n<li>Aktivieren Sie <strong>Repository mit README initialisieren</strong>.</li>\n</ul>\n<div class=\"notecard warning\">\n<p><strong>Warnung:</strong>\nDer standardmäßige \"Öffentlich\"-Zugang macht <em>alle</em> Quellcodes — einschließlich Ihres Datenbank-Benutzernamens und Passworts — für jeden auf dem Internet sichtbar! Stellen Sie sicher, dass der Quellcode Zugangsdaten <em>nur</em> aus Umgebungsvariablen liest und keine Zugangsdaten fest kodiert hat.</p>\n<p>Alternativ wählen Sie die \"Privat\"-Option, um nur ausgewählten Personen den Zugriff auf den Quellcode zu ermöglichen.</p>\n</div>\n</li>\n<li>\n<p>Klicken Sie auf <strong>Repository erstellen</strong>.</p>\n</li>\n<li>\n<p>Klicken Sie auf die grüne <strong>Clone or download</strong> Taste auf Ihrer neuen Repository-Seite.</p>\n</li>\n<li>\n<p>Kopieren Sie den URL-Wert aus dem Textfeld im erscheinenden Dialogfeld.\nWenn Sie den Repository-Namen \"express-locallibrary-tutorial\" verwendet haben, sollte die URL etwa so aussehen: <code>https://github.com/<your_git_user_id>/express-locallibrary-tutorial.git</code>.</p>\n</li>\n</ol>\n<p>Da das Repository (\"Repo\") nun auf GitHub erstellt wurde, möchten wir es auf unseren lokalen Computer klonen (kopieren):</p>\n<ol>\n<li>\n<p>Installieren Sie <em>git</em> für Ihren lokalen Computer (Sie können Versionen für verschiedene Plattformen <a href=\"https://git-scm.com/downloads\" class=\"external\" target=\"_blank\">hier</a> finden).</p>\n</li>\n<li>\n<p>Öffnen Sie ein Befehls-/Terminalfenster und klonen Sie Ihr Repository mit der oben kopierten URL:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>git clone https://github.com/<your_git_user_id>/express-locallibrary-tutorial.git\n</code></pre></div>\n<p>Dadurch wird das Repository im aktuellen Verzeichnis erstellt.</p>\n</li>\n<li>\n<p>Navigieren Sie in den Repo-Ordner.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>cd express-locallibrary-tutorial\n</code></pre></div>\n</li>\n</ol>\n<p>Kopieren Sie dann Ihre Anwendungsquelldateien in den Repo-Ordner, machen Sie sie mit <em>git</em> Teil des Repos und laden Sie sie auf GitHub hoch:</p>\n<ol>\n<li>\n<p>Kopieren Sie Ihre Express-Anwendung in diesen Ordner (ohne <strong>/node_modules</strong>, das Abhängigkeitsdateien enthält, die Sie bei Bedarf von npm abrufen sollten).</p>\n</li>\n<li>\n<p>Öffnen Sie ein Befehls-/Terminalfenster und verwenden Sie den <code>add</code> Befehl, um alle Dateien zu git hinzuzufügen.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>git add -A\n</code></pre></div>\n</li>\n<li>\n<p>Verwenden Sie den <code>status</code> Befehl, um zu überprüfen, dass alle Dateien, die Sie <code>committen</code> möchten, korrekt sind (Sie möchten Quellcodedateien einbeziehen, keine Binärdateien, temporären Dateien usw.). Es sollte so ähnlich aussehen wie die untenstehende Auflistung.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>git status\n</code></pre></div>\n<pre class=\"brush: plain notranslate\">On branch main\nYour branch is up-to-date with 'origin/main'.\nChanges to be committed:\n (use \"git reset HEAD <file>...\" to unstage)\n\n new file: ...\n</pre>\n</li>\n<li>\n<p>Wenn Sie zufrieden sind, <code>committen</code> Sie die Dateien zu Ihrem lokalen Repo. Dies entspricht einem Unterschreiben der Änderungen und macht sie zum offiziellen Teil des lokalen Repos.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>git commit -m \"First version of application moved into GitHub\"\n</code></pre></div>\n</li>\n<li>\n<p>Zu diesem Zeitpunkt wurde das Remote-Repo nicht geändert. Der letzte Schritt besteht darin, Ihr lokales Repo bis zum entfernten GitHub-Repo zu synchronisieren (<code>push</code>) unter Verwendung des folgenden Befehls:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>git push origin main\n</code></pre></div>\n</li>\n</ol>\n<p>Sobald dieser Vorgang abgeschlossen ist, sollten Sie in der Lage sein, zur Seite auf GitHub zu gehen, auf der Sie Ihr Repo erstellt haben, die Seite zu aktualisieren und zu sehen, dass Ihre gesamte Anwendung jetzt hochgeladen wurde. Sie können Ihr Repo weiterhin aktualisieren, wenn sich Dateien ändern, indem Sie diesen add/commit/push-Zyklus verwenden.</p>\n<p>Dies ist ein guter Zeitpunkt, um ein Backup Ihres \"Vanille\"-Projekts zu machen – während einige der Änderungen, die wir in den folgenden Abschnitten vornehmen werden, nützlich für die Bereitstellung auf einem beliebigen Hosting-Dienst (oder für die Entwicklung) sein könnten, sind andere möglicherweise nicht. Sie können dies mit <code>git</code> auf der Befehlszeile tun:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code># Create branch vanilla_deployment from the current branch (main)\ngit checkout -b vanilla_deployment\n\n# Push the new branch to GitHub\ngit push origin vanilla_deployment\n\n# Switch back to main\ngit checkout main\n\n# Make any further changes in a new branch\ngit pull upstream main # Merge the latest changes from GitHub\ngit checkout -b my_changes # Create a new branch\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nGit ist unglaublich leistungsfähig! Um mehr zu lernen, siehe <a href=\"https://docs.github.com/en/get-started/start-your-journey/git-and-github-learning-resources\" class=\"external\" target=\"_blank\">Git lernen</a>.</p>\n</div>"}},{"type":"prose","value":{"id":"beispiel_hosting_auf_glitch","title":"Beispiel: Hosting auf Glitch","isH3":false,"content":"<p>Dieser Abschnitt bietet eine praktische Demonstration, wie <em>LocalLibrary</em> auf <a href=\"https://glitch.com/\" class=\"external\" target=\"_blank\">Glitch</a> gehostet wird.</p>"}},{"type":"prose","value":{"id":"warum_glitch","title":"Warum Glitch?","isH3":true,"content":"<p>Wir entscheiden uns für die Nutzung von Glitch aus mehreren Gründen:</p>\n<ul>\n<li>\n<p>Glitch hat einen <a href=\"https://glitch.com/pricing\" class=\"external\" target=\"_blank\">kostenlosen Starter-Plan</a>, der <em>wirklich</em> kostenlos ist, allerdings mit einigen Einschränkungen. Die Tatsache, dass es für alle Entwickler erschwinglich ist, ist für MDN wirklich wichtig!</p>\n</li>\n<li>\n<p>Glitch kümmert sich um die Infrastruktur, sodass Sie es nicht müssen. Nicht um Server, Load Balancer, Reverse-Proxies usw. kümmern zu müssen, erleichtert den Einstieg erheblich.</p>\n</li>\n<li>\n<p>Die Fähigkeiten und Konzepte, die Sie beim Einsatz von Glitch lernen, sind übertragbar.</p>\n</li>\n<li>\n<p>Die Service- und Planbeschränkungen beeinträchtigen uns nicht wirklich bei der Nutzung von Glitch für das Tutorial. Zum Beispiel:</p>\n<ul>\n<li>Der Starter-Plan bietet monatlich nur 1000 Stunden für \"Projekte\", was monatlich zurückgesetzt wird. Dies wird verwendet, wenn die Site aktiv bearbeitet wird oder wenn jemand darauf zugreift. Wenn niemand auf die Site zugreift oder sie bearbeitet, wird sie schlafen gelegt.</li>\n<li>Die Umgebung des Starter-Plans hat eine begrenzte Menge an RAM und Speicherplatz für Container. Es gibt mehr als genug für das Tutorial, insbesondere da unsere Datenbank anderswo gehostet wird.</li>\n<li>Benutzerdefinierte Domains werden zum Zeitpunkt des Schreibens dieses Textes nicht gut unterstützt.</li>\n<li>Weitere Einschränkungen finden Sie auf der <a href=\"https://help.glitch.com/hc/en-us/articles/16287495313293-Technical-Restrictions\" class=\"external\" target=\"_blank\">Glitch-Technische Beschränkungen-Seite</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Während Glitch für die Hosting dieses Demonstrationszwecks geeignet ist, sollten Sie sich die Zeit nehmen, um zu bestimmen, ob es für Ihre eigene Website <a href=\"#auswahl_eines_hosting-anbieters\">geeignet ist</a>.</p>"}},{"type":"prose","value":{"id":"wie_funktioniert_glitch","title":"Wie funktioniert Glitch?","isH3":true,"content":"<p>Glitch bietet eine webbasierte Oberfläche, in der Sie Projekte aus Starter-Templates erstellen oder von GitHub importieren und dann die Projektdateien hinzufügen und bearbeiten können. Wenn Sie Änderungen vornehmen, wird das Projekt in seinem eigenen isolierten und unabhängigen virtualisierten Container erstellt und ausgeführt.</p>\n<p>Wie das alles \"unter der Haube\" funktioniert, ist ein Mysterium – Glitch sagt es nicht. Was klar ist, ist, dass Ihre Anwendung \"einfach funktionieren\" sollte, sofern Sie eine ziemlich Standard-Node.js-Webanwendung erstellen (zum Beispiel unter Verwendung von <code>package.json</code> für Ihre Abhängigkeiten) und nicht mehr Ressourcen verbrauchen, als in den <a href=\"https://help.glitch.com/hc/en-us/articles/16287495313293-Technical-Restrictions\" class=\"external\" target=\"_blank\">technischen Einschränkungen</a> aufgeführt sind.</p>\n<p>Sobald die Anwendung läuft, kann sie unter Verwendung von <a href=\"https://help.glitch.com/hc/en-us/articles/16287550167437-Adding-Private-Data\" class=\"external\" target=\"_blank\">privaten Daten</a>, die in einer <code>.env</code>-Datei bereitgestellt werden, für die Produktion konfiguriert werden. Die Werte in den geheimen Daten werden von der Anwendung als Umgebungsvariablen gelesen, was, wie Sie sich aus einem vorherigen Abschnitt erinnern, die Art und Weise ist, wie wir unsere Anwendung konfiguriert haben, um ihre Datenbank-URL zu erhalten. Beachten Sie, dass die Variablen <em>geheim</em> sind: die <code>.env</code> sollte nicht in Ihrem GitHub-Repository enthalten sein.</p>\n<p>Die Glitch-Bearbeitungsansicht bietet auch <em>Terminal</em>-Zugriff auf die Web-App-Umgebung, die Sie verwenden können, um mit der Web-App zu arbeiten, als ob sie auf Ihrem lokalen Rechner ausgeführt würde.</p>\n<p>Das ist die gesamte Übersicht, die Sie benötigen, um loszulegen. Als nächstes richten wir ein Glitch-Konto ein, laden das Bibliotheksprojekt von GitHub hoch und verbinden es mit einer Datenbank.</p>"}},{"type":"prose","value":{"id":"ein_glitch-konto_erhalten","title":"Ein Glitch-Konto erhalten","isH3":true,"content":"<p>Um Glitch zu verwenden, müssen Sie zunächst ein Konto erstellen:</p>\n<ul>\n<li>Gehen Sie zu <a href=\"https://glitch.com/\" class=\"external\" target=\"_blank\">glitch.com</a> und klicken Sie auf die <strong>Anmelden</strong>-Schaltfläche in der oberen Symbolleiste.</li>\n<li>Wählen Sie GitHub im Popup aus, um sich mit Ihren GitHub-Anmeldedaten anzumelden.</li>\n<li>Sie werden dann im Glitch-Dashboard angemeldet: <a href=\"https://glitch.com/dashboard\" class=\"external\" target=\"_blank\">https://glitch.com/dashboard</a>.</li>\n</ul>"}},{"type":"prose","value":{"id":"fehlerbehebung_bei_der_node.js-version","title":"Fehlerbehebung bei der Node.js-Version","isH3":true,"content":"<p>Hosting-Anbieter unterstützen normalerweise einige Hauptversionen der neuesten Node.js-Releases. Wenn die von Ihnen in Ihrer <code>package.json</code>-Datei angegebene exakte \"minor\" Version nicht unterstützt wird, fallen sie in der Regel auf die nächstgelegene Version zurück, die sie unterstützen (und oft wird dies einfach funktionieren).</p>\n<p>Leider ist zum Zeitpunkt des Schreibens die höchste unterstützte Version auf Glitch Node.js 16. Wenn Sie mit Node.js 17 oder höher entwickelt haben, sollten Sie die in Ihrer <code>package.json</code> angegebenen Version wie gezeigt verringern. Sie müssen auch erneut testen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">json</span></div><pre class=\"brush: json notranslate\"><code> \"engines\": {\n \"node\": \">=v16\"\n },\n</code></pre></div>\n<p>Glitch <a href=\"https://blog.glitch.com/post/rebuilding-glitch/\" class=\"external\" target=\"_blank\">plant, Node besser zu aktualisieren und in Zukunft besser auf dem neuesten Stand zu halten</a> – und es kann sein, dass diese Einschränkung nicht mehr existiert, wenn Sie dies lesen. Anstatt die <code>node</code>-Version zu verringern, könnten Sie versuchen, Ihr Projekt hochzuladen, um zu sehen, ob es erstellt wird. Wenn es Fehler gibt und Ihre Anwendung nicht lädt, sollten Sie versuchen, die <code>node</code>-Version auf <code>>=v16</code> in Ihrer <code>package.json</code> in der Glitch-Editorumgebung zu setzen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nSie können auch die unterstützten Versionen prüfen, indem Sie den folgenden Befehl in das Terminal eines beliebigen Glitch-Projekts eingeben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">sh</span></div><pre class=\"brush: sh notranslate\"><code>ls -l /opt/nvm/versions/node | grep '^d' | awk '{ print $9 }'\n</code></pre></div>\n</div>"}},{"type":"prose","value":{"id":"auf_glitch_von_github_bereitstellen","title":"Auf Glitch von GitHub bereitstellen","isH3":true,"content":"<p>Als Nächstes importieren wir das Bibliotheksprojekt von GitHub. Wählen Sie zuerst die Option <strong>Dashboard</strong> aus dem oberen Menü der Site und wählen Sie dann die <strong>Neues Projekt</strong>-Schaltfläche. Glitch zeigt eine Liste von Optionen für das neue Projekt an; wählen Sie <strong>Importieren von GitHub</strong>.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/glitch_new_project_import_github.png\" alt=\"Glitch-Website-Dashboard zeigt eine neue Projekt-Schaltfläche und ein Popup-Menü mit "Importieren von GitHub"-Option\" width=\"1097\" height=\"724\" loading=\"lazy\"></p>\n<p>Ein Popup wird angezeigt. Geben Sie die URL Ihres GitHub-Bibliotheksrepositorys in das Popup ein und drücken Sie <strong>OK</strong>. Unten haben wir das Repo für das bearbeitete Projekt eingegeben.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/glitch_new_project_github_repo_url.png\" alt=\"Glitch-Popup zur Eingabe der URL des GitHub-Repos zum Importieren\" width=\"462\" height=\"208\" loading=\"lazy\"></p>\n<p>Glitch importiert dann das Projekt und zeigt den Fortschritt an. Wenn der Import abgeschlossen ist, wird die Bearbeitungsansicht für das neue Projekt angezeigt, wie unten gezeigt.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/glitch_imported_project_in_editor.png\" alt=\"Glitch-Editoransicht für importiertes Projekt\" width=\"1309\" height=\"726\" loading=\"lazy\"></p>\n<p>Sie können die URL der Live-Site abrufen, indem Sie die <strong>Teilen</strong>-Schaltfläche auswählen.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/glitch_share_project.png\" alt=\"Glitch-Editoransicht für importiertes Projekt\" width=\"1311\" height=\"721\" loading=\"lazy\"></p>\n<p>Öffnen Sie eine neue Browsertab und kopieren Sie den Link zur Live-Site in die Adressleiste. Die Website der Local Library sollte geöffnet werden und Daten aus der Entwicklungsdatenbank anzeigen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDieser Vorgang war ein einmaliger Import von GitHub. Sie können auch GitHub-Aktionen wie <a href=\"https://github.com/marketplace/actions/glitch-project-sync\" class=\"external\" target=\"_blank\">glitch-project-sync</a> verwenden, um Glitch und > Ihr Projekt zu synchronisieren.</p>\n</div>"}},{"type":"prose","value":{"id":"verwendung_einer_produktions-mongodb-datenbank","title":"Verwendung einer Produktions-MongoDB-Datenbank","isH3":true,"content":"<p>Sie sollten eine andere Datenbank für die Produktion als für die Entwicklung einrichten. Während Glitch nur SQLite-Datenbanken hostet (und wir für die Verwendung von MongoDB eingerichtet sind), bieten viele andere Sites MongoDB-Datenbanken als Dienst an.</p>\n<p>Eine Option besteht darin, den <a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#setting_up_the_mongodb_database\">Anweisungen zum Einrichten der MongoDB-Datenbank</a> aus einem früheren Tutorial zu folgen, um eine neue Produktionsdatenbank einzurichten.</p>\n<p>Um die Produktionsdatenbank für die Bibliotheksanwendung zugänglich zu machen, öffnen Sie die Datei <code>.env</code> in der Bearbeitungsansicht des Projekts. Geben Sie die Datenbank-URL-Variable <code>MONGODB_URI</code> und die URL Ihrer Produktionsdatenbank ein. Die Site wird aktualisiert, während Sie Werte in den Editor eingeben.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/glitch_env.png\" alt=\"Glitch-Editor für .env-Dateien für private Daten mit Produktionsvariablen\" width=\"1015\" height=\"768\" loading=\"lazy\"></p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWir haben diese Datei nicht erstellt. Sie ist für <a href=\"https://help.glitch.com/hc/en-us/articles/16287550167437-Adding-Private-Data\" class=\"external\" target=\"_blank\">private Daten</a> vorgesehen und wurde beim Import nach Glitch automatisch erstellt. Sie wird niemals exportiert oder kopiert.</p>\n</div>"}},{"type":"prose","value":{"id":"andere_konfigurationsvariablen","title":"Andere Konfigurationsvariablen","isH3":true,"content":"<p>Sie erinnern sich aus einem vorausgegangenen Abschnitt, dass wir <code>NODE_ENV</code> auf 'production' setzen müssen, um unsere Leistung zu verbessern und weniger ausführliche Fehlermeldungen zu generieren. Wir tun dies in derselben Datei, in der wir die <code>MONGODB_URI</code>-Variable setzen.</p>\n<p>Öffnen Sie <code>.env</code> und fügen Sie die <code>NODE_ENV</code>-Variable mit dem Wert <code>production</code> hinzu (siehe den Screenshot im vorherigen Abschnitt).</p>\n<p>Die Bibliotheksanwendung ist nun eingerichtet und für den Produktionseinsatz konfiguriert. Sie können Daten über die Website-Schnittstelle hinzufügen, und sie sollte wie während der Entwicklung funktionieren (wenn auch mit weniger Debug-Informationen für ungültige Seiten).</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWenn Sie lediglich einige Daten zum Testen hinzufügen möchten, könnten Sie das <code>populatedb</code>-Skript (mit Ihrer MongoDB-Produktionsdatenbank-URL) verwenden, wie im Abschnitt <a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#testing_%E2%80%94_create_some_items\">Express-Tutorial Teil 3: Verwenden einer Datenbank (mit Mongoose) Testing — einige Elemente erstellen</a> beschrieben.</p>\n</div>"}},{"type":"prose","value":{"id":"express-apps_auf_glitch_debuggen","title":"Express-Apps auf Glitch debuggen","isH3":true,"content":"<p>Glitch erlaubt effektives Debugging. Einige der Dinge, die Sie tun können, sind:</p>\n<ul>\n<li>Wählen Sie die Schaltfläche 'Logs' unten in der Bearbeitungsansicht, um Protokollinformationen von Ihrem Server zu sehen, z.B. Konsolen-Logausgaben.</li>\n<li>Wählen Sie die Schaltfläche 'Terminal' unten in der Bearbeitungsansicht, um ein Terminal in der Hosting-Umgebung zu öffnen. Sie können dies verwenden, um Befehle und Tools in der Umgebung auszuführen. Zum Beispiel könnten Sie <code>node -v</code> verwenden, um die Version von Node zu überprüfen.</li>\n<li>Interaktives Debugging in VS Code unter Verwendung der GLITCH-Erweiterung für VS Code.</li>\n</ul>"}},{"type":"prose","value":{"id":"beispiel_hosting_auf_railway","title":"Beispiel: Hosting auf Railway","isH3":false,"content":"<p>Dieser Abschnitt bietet eine praktische Demonstration, wie <em>LocalLibrary</em> auf <a href=\"https://railway.app/\" class=\"external\" target=\"_blank\">Railway</a> installiert wird.</p>"}},{"type":"prose","value":{"id":"warum_railway","title":"Warum Railway?","isH3":true,"content":"<div class=\"notecard warning\">\n<p><strong>Warnung:</strong>\nRailway hat keinen völlig kostenlosen Starter-Tarif mehr. Wir haben diese Anweisungen beibehalten, weil Railway einige großartige Funktionen hat und für einige Benutzer die bessere Option sein wird.</p>\n</div>\n<p>Railway ist eine attraktive Hosting-Option aus mehreren Gründen:</p>\n<ul>\n<li>Railway kümmert sich um den Großteil der Infrastruktur, sodass Sie es nicht müssen. Nicht um Server, Load Balancer, Reverse-Proxies usw. kümmern zu müssen, erleichtert den Einstieg erheblich.</li>\n<li>Railway hat einen <a href=\"https://docs.railway.app/maturity/compare-to-heroku\" class=\"external\" target=\"_blank\">Fokus auf Entwicklererfahrung für Entwicklung und Bereitstellung</a>, der zu einer schnelleren und \"weicheren\" Lernkurve führt als viele andere Alternativen.</li>\n<li>Die Fähigkeiten und Konzepte, die Sie beim Einsatz von Railway lernen, sind übertragbar. Während Railway einige hervorragende neue Funktionen hat, verwenden viele andere beliebte Hosting-Services viele der gleichen Ideen und Ansätze.</li>\n<li><a href=\"https://docs.railway.app/\" class=\"external\" target=\"_blank\">Railway-Dokumentation</a> ist klar und vollständig.</li>\n<li>Der Dienst scheint sehr zuverlässig zu sein, und wenn Sie ihn lieben, sind die Preise vorhersehbar und das Skalieren Ihrer App ist sehr einfach.</li>\n</ul>\n<p>Sie sollten sich die Zeit nehmen, um zu bestimmen, ob Railway für Ihre eigene Website <a href=\"#auswahl_eines_hosting-anbieters\">geeignet ist</a>.</p>"}},{"type":"prose","value":{"id":"wie_funktioniert_railway","title":"Wie funktioniert Railway?","isH3":true,"content":"<p>Webanwendungen werden jeweils in ihrem eigenen isolierten und unabhängigen virtualisierten Container ausgeführt. Um Ihre Anwendung auszuführen, muss Railway in der Lage sein, die geeignete Umgebung und Abhängigkeiten einzurichten und auch zu verstehen, wie sie gestartet wird.</p>\n<p>Railway macht dies einfach, da es viele verschiedene Webanwendungs-Frameworks und -Umgebungen anhand ihrer Verwendung von \"gängigen Konventionen\" automatisch erkennen und installieren kann. Zum Beispiel erkennt Railway Node-Anwendungen, weil sie eine <strong>package.json</strong> Datei haben und kann den verwendeten Package-Manager anhand der \"Lock\"-Datei, die beim Bauen verwendet wird, bestimmen. Wenn beispielsweise das <code>package-lock.json</code>-Datei in der Anwendung enthalten ist, weiß Railway, dass <em>npm</em> zum Installieren der Pakete verwendet werden soll, während es bei Funden von <strong>yarn.lock</strong> weiß, dass <em>yarn</em> verwendet werden soll. Nachdem alle Abhängigkeiten installiert sind, sucht Railway nach Skripten, die in der Paketdatei mit \"build\" und \"start\" bezeichnet sind, und verwendet diese, um den Code zu erstellen und auszuführen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nRailway verwendet <a href=\"https://nixpacks.com/docs\" class=\"external\" target=\"_blank\">Nixpacks</a>, um verschiedene Webanwendungs-Frameworks zu erkennen, die in verschiedenen Programmiersprachen geschrieben sind. Sie müssen nichts weiter für dieses Tutorial wissen, aber Sie können mehr über Optionen zur Bereitstellung von Node-Anwendungen in <a href=\"https://nixpacks.com/docs/providers/node\" class=\"external\" target=\"_blank\">Nixpacks Node</a> erfahren.</p>\n</div>\n<p>Nachdem die Anwendung läuft, kann sie sich mit den durch <a href=\"https://docs.railway.app/guides/variables\" class=\"external\" target=\"_blank\">Umgebungsvariablen</a> bereitgestellten Informationen konfigurieren. Zum Beispiel muss eine Anwendung, die eine Datenbank verwendet, die Adresse über eine Variable abrufen. Der Datenbankdienst selbst kann von Railway oder einem anderen Anbieter gehostet werden.</p>\n<p>Entwickler interagieren mit Railway über die Railway-Site und verwenden ein spezielles <a href=\"https://docs.railway.app/guides/cli\" class=\"external\" target=\"_blank\">Command Line Interface (CLI)</a>-Tool. Das CLI ermöglicht es Ihnen, ein lokales GitHub-Repository mit einem Railway-Projekt zu assoziieren, das Repository von der lokalen Branche auf die Live-Site hochzuladen, die Logs des laufenden Prozesses zu inspizieren, Konfigurationsvariablen zu setzen und zu erhalten und vieles mehr. Eine der nützlichsten Funktionen ist, dass Sie das CLI verwenden können, um Ihr lokales Projekt mit denselben Umgebungsvariablen wie das Live-Projekt auszuführen.</p>\n<p>Das ist die gesamte Übersicht, die Sie benötigen, um die App auf Railway bereitzustellen. Als nächstes richten wir ein Railway-Konto ein, installieren unsere Website und eine Datenbank und probieren den Railway-Client aus.</p>"}},{"type":"prose","value":{"id":"ein_railway-konto_erhalten","title":"Ein Railway-Konto erhalten","isH3":true,"content":"<p>Um Railway zu verwenden, müssen Sie zunächst ein Konto erstellen:</p>\n<ul>\n<li>Gehen Sie zu <a href=\"https://railway.app/\" class=\"external\" target=\"_blank\">railway.app</a> und klicken Sie auf den <strong>Anmelden</strong>-Link in der oberen Symbolleiste.</li>\n<li>Wählen Sie GitHub im Popup aus, um sich mit Ihren GitHub-Anmeldedaten anzumelden</li>\n<li>Möglicherweise müssen Sie dann in Ihre E-Mails gehen und Ihr Konto verifizieren.</li>\n<li>Sie werden dann im Railway.app-Dashboard angemeldet: <a href=\"https://railway.app/dashboard\" class=\"external\" target=\"_blank\">https://railway.app/dashboard</a>.</li>\n</ul>"}},{"type":"prose","value":{"id":"auf_railway_von_github_bereitstellen","title":"Auf Railway von GitHub bereitstellen","isH3":true,"content":"<p>Als Nächstes richten wir Railway ein, um unsere Bibliothek von GitHub bereitzustellen. Wählen Sie zuerst die Option <strong>Dashboard</strong> aus dem oberen Menü der Site und wählen Sie dann die <strong>Neues Projekt</strong>-Schaltfläche:</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_new_project_button.png\" alt=\"Railway-Website-Dashboard zeigt die Schaltfläche Neues Projekt\" width=\"877\" height=\"583\" loading=\"lazy\"></p>\n<p>Railway zeigt eine Liste von Optionen für das neue Projekt an, einschließlich der Option, ein Projekt von einer Vorlage, die zuerst in Ihrem GitHub-Konto erstellt wurde, und einer Anzahl von Datenbanken bereitzustellen. Wählen Sie <strong>Von GitHub-Repo bereitstellen</strong>.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_new_project_button_deploy_github_repo.png\" alt=\"Railway-Popup zeigt Bereitstellungsoptionen mit der Option Bereitstellen von GitHub-Repo hervorgehoben\" width=\"521\" height=\"571\" loading=\"lazy\"></p>\n<p>Alle Projekte im GitHub-Repos, die Sie während der Einrichtung mit Railway geteilt haben, werden angezeigt. Wählen Sie Ihr GitHub-Repository für die lokale Bibliothek: <code><user-name>/express-locallibrary-tutorial</code>.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_new_project_button_deploy_github_selectrepo.png\" alt=\"Railway-Popup zeigt GitHub-Repos an, die bereitgestellt werden können\" width=\"542\" height=\"442\" loading=\"lazy\"></p>\n<p>Bestätigen Sie Ihre Bereitstellung, indem Sie <strong>Jetzt bereitstellen</strong> wählen.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_new_project_deploy_confirm.png\" alt=\"Bestätigungsbildschirm, wenn Sie die Bereitstellung des Projekts wählen können\" width=\"526\" height=\"380\" loading=\"lazy\"></p>\n<p>Railway lädt und stellt dann Ihr Projekt bereit und zeigt den Fortschritt auf der Registerkarte \"Bereitstellungen\" an. Wenn die Bereitstellung erfolgreich abgeschlossen ist, sehen Sie einen Bildschirm wie den unten gezeigten.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_project_deploy.png\" alt=\"Railway-Dashboard zeigt die Registerkarte Bereitstellungen für das bereitgestellte Projekt an\" width=\"1050\" height=\"387\" loading=\"lazy\"></p>\n<p>Wählen Sie nun die Registerkarte <em>Einstellungen</em>, scrollen Sie dann zum Abschnitt Domains und drücken Sie die <strong>Domain generieren</strong>-Schaltfläche.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_project_generate_domain.png\" alt=\"Railway-Projekteinstellungsregisterkarte zeigt die Schaltfläche zum Erstellen einer Domain\" width=\"696\" height=\"435\" loading=\"lazy\"></p>\n<p>Dies wird die Site veröffentlichen und die Domain anstelle des Buttons anzeigen, wie unten gezeigt.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_project_domain.png\" alt=\"Railway-Projekteinstellungsregisterkarte zeigt einen Link zur lokalen Bibliotheksite an\" width=\"509\" height=\"197\" loading=\"lazy\"></p>\n<p>Wählen Sie die Domain-URL, um auf Ihre Bibliotheksanwendung zuzugreifen. Beachten Sie, dass wir bei Ihnen noch keine Produktionsdatenbank angegeben haben, sodass die lokale Bibliothek mit Ihren Entwicklungsdaten geöffnet wird.</p>"}},{"type":"prose","value":{"id":"eine_mongodb-datenbank_einrichten_und_verbinden","title":"Eine MongoDB-Datenbank einrichten und verbinden","isH3":true,"content":"<p>Anstatt unsere Entwicklungsdaten zu verwenden, lassen Sie uns als Nächstes eine Produktions-MongoDB-Datenbank erstellen, die wir stattdessen verwenden können. Wir werden die Datenbank als Teil des Railway-Anwendungsprojekts erstellen, obwohl es nichts gibt, was Sie daran hindert, dies in einem separaten Projekt zu erstellen, oder tatsächlich eine <em>MongoDB Atlas</em> Datenbank für Produktionsdaten wie für die Entwicklungsdatenbank zu verwenden.</p>\n<p>Auf Railway wählen Sie die <strong>Dashboard</strong>-Option aus dem oberen Menü der Site und wählen dann Ihr Anwendungsprojekt. Zu diesem Zeitpunkt enthält es nur einen Dienst für Ihre Anwendung (dieser kann ausgewählt werden, um Variablen und andere Details des Dienstes zu setzen). Wählen Sie die <strong>Neue</strong>-Schaltfläche, die zum Hinzufügen von Diensten zum aktuellen Projekt verwendet wird.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_project_open_no_database.png\" alt=\"Railway-Projekt mit hervorgehobener neuer Dienst-Schaltfläche\" width=\"1028\" height=\"509\" loading=\"lazy\"></p>\n<p>Wählen Sie Datenbank, wenn Sie nach der Art von Dienst gefragt werden, der hinzugefügt werden soll:</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_database_add.png\" alt=\"Railway-Popup zeigt Optionen für einen neuen Dienst, wie Datenbank, GitHub-Repo, leeren Dienst usw.\" width=\"512\" height=\"285\" loading=\"lazy\"></p>\n<p>Dann wählen Sie <strong>MongoDB hinzufügen</strong> aus, um mit dem Hinzufügen der Datenbank zu beginnen</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_database_select_type.png\" alt=\"Railway-Popup zeigt verschiedene Datenbanken, die ausgewählt werden können: Postgres, MySQL, MongoDB und so weiter\" width=\"518\" height=\"333\" loading=\"lazy\"></p>\n<p>Railway stellt dann einen Dienst mit einer leeren Datenbank im selben Projekt bereit. Nach Abschluss sehen Sie jetzt sowohl den Anwendungs- als auch den Datenbankdienst in der Projektansicht.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_project_two_services.png\" alt=\"Railway-Projekt mit Anwendungs- und Datenbankdiensten\" width=\"953\" height=\"477\" loading=\"lazy\"></p>\n<p>Wählen Sie den MongoDB-Dienst, um Informationen über die Datenbank anzuzeigen. Öffnen Sie die Registerkarte <em>Variablen</em> und kopieren Sie die \"Mongo_URL\" (dies ist die Adresse der Datenbank).</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_mongodb_connect.png\" alt=\"Railway-Datenbankeinstellungen zeigt die URL an, die benötigt wird, um sich mit der Datenbank zu verbinden\" width=\"1842\" height=\"750\" loading=\"lazy\"></p>\n<p>Um dies für die Bibliotheksanwendung zugänglich zu machen, müssen wir es der Anwendungsprozess durch eine Umgebungsvariable hinzufügen. Öffnen Sie zuerst den Anwendungsdienst. Wählen Sie dann die Registerkarte <em>Variablen</em> und drücken Sie die <strong>Neue Variable</strong>-Schaltfläche.</p>\n<p>Geben Sie den Variablennamen <code>MONGODB_URI</code> und die Verbindungs-URL ein, die Sie für die Datenbank kopiert haben (<code>MONGODB_URI</code> ist der Name der Umgebungsvariable, aus der <a href=\"#konfiguration_der_datenbank\">wir die Anwendung konfiguriert haben</a>, um die Datenbankadresse zu lesen). Dies wird wie der unten gezeigte Bildschirm aussehen.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_variables_database_url.png\" alt=\"Railway-Website-Variablenbildschirm während der Hinzufügung der MONGODB_URI-Variable und Adresse\" width=\"1016\" height=\"400\" loading=\"lazy\"></p>\n<p>Wählen Sie <strong>Hinzufügen</strong> zur Hinzufügung der Variable.</p>\n<p>Railway startet Ihre App neu, wenn es Variablen aktualisiert. Wenn Sie jetzt die Startseite überprüfen, sollte sie null Werte für Ihre Objektzahlen anzeigen, da die obigen Änderungen bedeuten, dass wir nun eine neue (leere) Datenbank verwenden.</p>"}},{"type":"prose","value":{"id":"andere_konfigurationsvariablen_2","title":"Andere Konfigurationsvariablen","isH3":true,"content":"<p>Sie erinnern sich aus einem vorausgegangenen Abschnitt, dass wir <code>NODE_ENV</code> auf 'production' setzen müssen, um unsere Leistung zu verbessern und weniger ausführliche Fehlermeldungen zu generieren. Wir können dies im selben Bildschirm tun, in dem wir die Variable <code>MONGODB_URI</code> gesetzt haben.</p>\n<p>Öffnen Sie den Anwendungsdienst. Wählen Sie dann die Registerkarte <em>Variablen</em>, wo Sie sehen werden, dass <code>MONGODB_URI</code> bereits definiert ist, und drücken Sie die <strong>Neue Variable</strong>-Schaltfläche.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_variables_new.png\" alt=\"Registerkarte Variablen in Railway mit hervorgehobener neuer Variablen-Schaltfläche\" width=\"1005\" height=\"386\" loading=\"lazy\"></p>\n<p>Geben Sie <code>NODE_ENV</code> als Namen der neuen Variable und <code>production</code> als Namen der Umgebung ein. Drücken Sie dann die <strong>Hinzufügen</strong>-Schaltfläche.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment/railway_variables_new_node_env.png\" alt=\"Registerkarte Variablen in Railway mit neuer NODE_ENV-Variable, die auf 'production' gesetzt wird\" width=\"706\" height=\"379\" loading=\"lazy\"></p>\n<p>Die Bibliotheksanwendung ist nun eingerichtet und für den Produktionseinsatz konfiguriert. Sie können durch die Website-Schnittstelle Daten hinzufügen und es sollte genauso arbeiten wie während der Entwicklung (wenn auch mit weniger Debug-Informationen für ungültige Seiten).</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWenn Sie lediglich einige Daten zum Testen hinzufügen möchten, könnten Sie das <code>populatedb</code>-Skript (mit Ihrer MongoDB-Produktionsdatenbank-URL) verwenden, wie im Abschnitt <a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose#testing_%E2%80%94_create_some_items\">Express-Tutorial Teil 3: Verwenden einer Datenbank (mit Mongoose) Testing — einige Elemente erstellen</a> beschrieben.</p>\n</div>"}},{"type":"prose","value":{"id":"den_client_installieren","title":"Den Client installieren","isH3":true,"content":"<p>Laden Sie den Railway-Client für Ihr lokales Betriebssystem herunter und installieren Sie ihn, indem Sie den <a href=\"https://docs.railway.app/guides/cli\" class=\"external\" target=\"_blank\">Anweisungen hier</a> folgen.</p>\n<p>Nachdem der Client installiert ist, können Sie Befehle ausführen. Einige der wichtigeren Operationen umfassen das Bereitstellen des aktuellen Verzeichnisses Ihres Computers zu einem verbundenen Railway-Projekt (ohne auf GitHub hochladen zu müssen) und Ihr Projekt lokal mit denselben Einstellungen wie auf dem Produktionsserver auszuführen.</p>\n<p>Eine Liste aller möglichen Befehle erhalten Sie, indem Sie den folgenden Befehl in ein Terminal eingeben.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>railway help\n</code></pre></div>"}},{"type":"prose","value":{"id":"debugging","title":"Debugging","isH3":true,"content":"<p>Der Railway-Client bietet den Befehl logs an, um das Ende der Protokolle anzuzeigen (ein vollständigeres Protokoll ist für jedes Projekt auf der Site verfügbar):</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>railway logs\n</code></pre></div>"}},{"type":"prose","value":{"id":"zusammenfassung","title":"Zusammenfassung","isH3":false,"content":"<p>Das ist das Ende dieses Tutorials zum Einrichten von Express-Apps in der Produktion und auch der Reihe von Tutorials zur Arbeit mit Express. Wir hoffen, Sie fanden sie nützlich. Sie können sich eine vollständig durchgearbeitete Version des <a href=\"https://github.com/mdn/express-locallibrary-tutorial\" class=\"external\" target=\"_blank\">Quellcodes auf GitHub hier</a> ansehen.</p>"}},{"type":"prose","value":{"id":"siehe_auch","title":"Siehe auch","isH3":false,"content":"<ul>\n<li>\n<p><a href=\"https://expressjs.com/en/advanced/best-practice-performance.html\" class=\"external\" target=\"_blank\">Produktionsbeste-Praktiken: Leistung und Zuverlässigkeit</a> (Express-Dokumentation)</p>\n</li>\n<li>\n<p><a href=\"https://expressjs.com/en/advanced/best-practice-security.html\" class=\"external\" target=\"_blank\">Produktionsbeste Praktiken: Sicherheit</a> (Express-Dokumentation)</p>\n</li>\n<li>\n<p>Railway-Dokumentation</p>\n<ul>\n<li><a href=\"https://docs.railway.app/guides/cli\" class=\"external\" target=\"_blank\">CLI</a></li>\n</ul>\n</li>\n<li>\n<p>DigitalOcean</p>\n<ul>\n<li><a href=\"https://www.digitalocean.com/community/tutorials?q=express\" class=\"external\" target=\"_blank\">Express</a> Tutorials</li>\n<li><a href=\"https://www.digitalocean.com/community/tutorials?q=node.js\" class=\"external\" target=\"_blank\">Node.js</a> Tutorials</li>\n</ul>\n</li>\n<li>\n<p>Heroku</p>\n<ul>\n<li><a href=\"https://devcenter.heroku.com/articles/getting-started-with-nodejs\" class=\"external\" target=\"_blank\">Getting Started on Heroku with Node.js</a> (Heroku-Dokumentation)</li>\n<li><a href=\"https://devcenter.heroku.com/articles/deploying-nodejs\" class=\"external\" target=\"_blank\">Deploying Node.js Applications on Heroku</a> (Heroku-Dokumentation)</li>\n<li><a href=\"https://devcenter.heroku.com/articles/nodejs-support\" class=\"external\" target=\"_blank\">Heroku Node.js Support</a> (Heroku-Dokumentation)</li>\n<li><a href=\"https://devcenter.heroku.com/articles/node-concurrency\" class=\"external\" target=\"_blank\">Optimizing Node.js Application Concurrency</a> (Heroku-Dokumentation)</li>\n<li><a href=\"https://devcenter.heroku.com/articles/how-heroku-works\" class=\"external\" target=\"_blank\">How Heroku works</a> (Heroku-Dokumentation)</li>\n<li><a href=\"https://devcenter.heroku.com/articles/dynos\" class=\"external\" target=\"_blank\">Dynos and the Dyno Manager</a> (Heroku-Dokumentation)</li>\n<li><a href=\"https://devcenter.heroku.com/articles/config-vars\" class=\"external\" target=\"_blank\">Configuration and Config Vars</a> (Heroku-Dokumentation)</li>\n<li><a href=\"https://devcenter.heroku.com/articles/limits\" class=\"external\" target=\"_blank\">Limits</a> (Heroku-Dokumentation)</li>\n</ul>\n</li>\n</ul>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\"><span class=\"button-wrap\"> Zurück </span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\"><span class=\"button-wrap\"> Übersicht: Express Web Framework (Node.js/JavaScript)</span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"de","mdn_url":"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment","modified":"2025-02-17T00:20:27.000Z","native":"Deutsch","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Express Tutorial Part 7: Deploying to production","native":"English (US)"},{"locale":"zh-CN","title":"Express 教程 7：部署到生产环境","native":"中文 (简体)"},{"locale":"zh-TW","title":"Express 教學 7: 佈署到生產環境","native":"正體中文 (繁體)"}],"pageTitle":"Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld - Lernen Sie Webentwicklung | MDN","parents":[{"uri":"/de/docs/Learn_web_development","title":"Lernen Sie Webentwicklung"},{"uri":"/de/docs/Learn_web_development/Extensions","title":"Erweiterungsmodule"},{"uri":"/de/docs/Learn_web_development/Extensions/Server-side","title":"Serverseitige Webprogrammierung"},{"uri":"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs","title":"Express Web Framework (Node.js/JavaScript)"},{"uri":"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment","title":"Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld"}],"popularity":null,"short_title":"Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Getting_started\">Einstiegsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup\">Umgebung einrichten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">Installation grundlegender Software</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">Surfen im Web</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">Code-Editor</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">Umgang mit Dateien</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website\">Ihre erste Website</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">Wie wird Ihre Website aussehen?</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: Erstellen der Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: Gestaltung des Inhalts</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: Interaktivität hinzufügen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards\">Webstandards</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">How the web works</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">Das Modell der Webstandards</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">Wie Browser Websites laden</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills\">Soziale Kompetenzen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">Forschung und Lernen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">Zusammenarbeit und Teamarbeit</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">Workflows und Prozesse</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Core\">Kernmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">Inhalte mit HTML strukturieren</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">Grundlegende HTML-Syntax</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">Überschriften und Absätze in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">Hervorhebung und Wichtigkeit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Lists\">Listen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">Strukturierung von Dokumenten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">Erweiterte Textfunktionen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Creating_links\">Erstellen von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML-Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">HTML video und audio</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Herausforderung: Mozilla Splash-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">Grundlagen von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">Barrierefreiheit von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">Formulare und Schaltflächen in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">Debugging von HTML</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">Grundlagen des CSS-Stylings</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">Was ist CSS?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Getting_started\">Einstieg in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">Grundlagen der CSS-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">Attribut-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">Pseudoklassen und Pseudoelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Combinators\">Kombinatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Box_model\">Das Box-Modell</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">Umgang mit Konflikten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS-Werte und -Einheiten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Sizing\">Größenbestimmung von Elementen in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">Hintergründe und Rahmen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Overflow\">Überlaufender Inhalt</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">Bilder, Medien und Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Tables\">Tabellen stylen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Text_styling\">CSS-Textgestaltung</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Fundamentals\">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_lists\">Listen gestalten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_links\">Gestaltung von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Webfonts</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/CSS_layout\">CSS-Layout</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Introduction\">Einführung in CSS-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Positioning\">Platzierung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS-Grid-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">Responsives Design</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Media_queries\">Grundlagen von Media Query</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Scripting\">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">Was ist JavaScript?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/A_first_splash\">Erster Einblick in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_went_wrong\">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Variables\">Speichern der benötigten Informationen — Variablen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Math\">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Strings\">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">Nützliche String-Methoden</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Arrays\">Arrays</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Conditionals\">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Loops\">Code-Schleifen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Functions\">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">Erstellen Sie Ihre eigene Funktion</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Return_values\">Funktionsrückgabewerte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Events\">Einführung in Ereignisse</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Event_bubbling\">Ereignis-Bubbling</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Image_gallery\">Herausforderung: Bildergalerie</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript-Objektgrundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/DOM_scripting\">Einführung in DOM-Scripting</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Network_requests\">Netzwerkanfragen mit JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/JSON\">Arbeiten mit JSON</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">Debugging JavaScript and handling errors</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">Einführung in client-seitige Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">Hauptmerkmale von Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">Erste Schritte mit React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">Beginn unserer React To-Do-Liste</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">Komponenten in unserer React-App erstellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React Interaktivität: Events und State</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">Barrierefreiheit in React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React-Ressourcen</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Accessibility\">Barrierefreiheit</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">Was ist Barrierefreiheit?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Tooling\">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA Grundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Multimedia\">Barrierefreie Multimedia-Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Mobile\">Mobile Accessibility</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Core/Design_for_developers\">Design für Entwickler:innen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Version_control\">Versionskontrolle</a></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Extensions\">Erweiterungsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">Objektprototypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">Objektorientierte Programmierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">Klassen in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">Objektbaupraxis</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs\">Client-seitige Web-APIs</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Einführung in Web-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">Video- und Audio-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">Zeichnen von Grafiken</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">Client-seitiger Speicher</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">Third-party APIs</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS\">Asynchrones JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing\">Einführung in asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Promises\">Anleitung zur Verwendung von Promises</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">Wie man eine Promise-basierte API implementiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">Einführung in Worker</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Forms\">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Your_first_form\">Ihr erstes Formular</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">Wie man ein Webformular strukturiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">Grundlegende native Formularsteuerungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">Die HTML5-Eingabetypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">Andere Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">Styling von Webformularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">Fortgeschrittenes Formular-Styling</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI-Pseudoklassen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Form_validation\">Client-seitige Formularvalidierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">Senden von Formulardaten</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools\">Verständnis für clientseitige Tools</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Überblick über Client-seitige Tools</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">Grundlagen des Paketmanagements</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">Einführung in eine vollständige Werkzeugkette</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">Bereitstellung unserer App</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side\">Serverseitige Programmierung</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps\">Erste Schritte auf der Serverseite</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">Einführung in die Server-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">Überblick über Client-Server</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">Server-seitige Web-Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">Website-Sicherheit</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django\">Django Web-Framework (Python)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Einführung in Django</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django Webanwendungssicherheit</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express Web-Framework (Node.js)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Einführung in Express/Node</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><em><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\" aria-current=\"page\">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></em></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Performance\">Web-Performance</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/why_web_performance\">Das \"Warum\" der Web-Performance</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">Was ist Web-Performance?</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">Wahrgenommene Leistung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">Leistungsmessung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Multimedia\">Multimedia: Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/video\">Multimedia: video</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/HTML\">HTML-Performance-Optimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/CSS\">CSS-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Testing\">Tests</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Introduction\">Einführung in das Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">Strategien zur Durchführung von Tests</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Feature_detection\">Implementierung der Funktionsprüfung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing\">Einführung in automatisiertes Testen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Transform_animate\">CSS transformieren und animieren</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Security_privacy\">Sicherheit und Datenschutz</a></li><li class=\"section\">Weitere Ressourcen</li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Howto\">Häufige Probleme lösen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_HTML_problems\">Häufige HTML-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_CSS_problems\">Häufige CSS-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">Häufige JavaScript-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Web_mechanics\">Webmechanik</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Tools_and_setup\">Tools und Einrichtung</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Design_and_accessibility\">Design und Barrierefreiheit</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/About\">Über</a></li><li><a href=\"/de/docs/Learn_web_development/Educators\">Ressourcen für Lehrkräfte</a></li><li><a href=\"/de/docs/Learn_web_development/Changelog\">Änderungsprotokoll</a></li></ol>","source":{"folder":"de/learn_web_development/extensions/server-side/express_nodejs/deployment","github_url":"https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md","last_commit_url":"https://github.com/mdn/translated-content-de/commit/452fe502cfb4c9a91c346af17370ecfb6a8bd17e","filename":"index.md"},"summary":"Nun, da Sie eine großartige LocalLibrary Website erstellt (und getestet) haben, möchten Sie sie auf einem öffentlichen Webserver installieren, damit Bibliotheksmitarbeiter und Mitglieder über das Internet darauf zugreifen können. Dieser Artikel bietet einen Überblick darüber, wie Sie einen Host zur Bereitstellung Ihrer Website finden können und was Sie tun müssen, um Ihre Website für den Produktionseinsatz bereit zu machen.","title":"Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld","toc":[{"text":"Übersicht","id":"übersicht"},{"text":"Was ist eine Produktionsumgebung?","id":"was_ist_eine_produktionsumgebung"},{"text":"Auswahl eines Hosting-Anbieters","id":"auswahl_eines_hosting-anbieters"},{"text":"Ihre Website bereit zur Veröffentlichung machen","id":"ihre_website_bereit_zur_veröffentlichung_machen"},{"text":"Beispiel: Hosting auf Glitch","id":"beispiel_hosting_auf_glitch"},{"text":"Beispiel: Hosting auf Railway","id":"beispiel_hosting_auf_railway"},{"text":"Zusammenfassung","id":"zusammenfassung"},{"text":"Siehe auch","id":"siehe_auch"}],"pageType":"learn-module-chapter"}}</script></body></html>