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 für die Produktion - Webentwicklung lernen | MDN</title><link rel="alternate" title="Express Tutorial Part 7: Deploying to production" href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/deployment" hrefLang="en"/><link rel="alternate" title="Express 教程 7: 部署到生产环境" href="https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Express_Nodejs/deployment" hrefLang="zh"/><link rel="alternate" title="Express 教學 7: 佈署到生產環境" href="https://developer.mozilla.org/zh-TW/docs/Learn/Server-side/Express_Nodejs/deployment" hrefLang="zh-Hant"/><link rel="alternate" title="Express-Tutorial Teil 7: Bereitstellung für die Produktion" href="https://developer.mozilla.org/de/docs/Learn/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="robots" content="noindex, follow"/><meta name="description" content="Nachdem Sie nun eine großartige LocalLibrary Webseite erstellt (und getestet) haben, möchten Sie sie wahrscheinlich auf einem öffentlichen Webserver installieren, damit Bibliothekspersonal und Mitglieder über das Internet darauf zugreifen können. Dieser Artikel bietet einen Überblick darüber, wie Sie möglicherweise einen Hoster finden, um Ihre Website bereitzustellen, und was Sie tun müssen, um Ihre Seite für die Produktion vorzubereiten."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Learn/Server-side/Express_Nodejs/deployment"/><meta property="og:title" content="Express-Tutorial Teil 7: Bereitstellung für die Produktion - Webentwicklung lernen | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="Nachdem Sie nun eine großartige LocalLibrary Webseite erstellt (und getestet) haben, möchten Sie sie wahrscheinlich auf einem öffentlichen Webserver installieren, damit Bibliothekspersonal und Mitglieder über das Internet darauf zugreifen können. Dieser Artikel bietet einen Überblick darüber, wie Sie möglicherweise einen Hoster finden, um Ihre Website bereitzustellen, und was Sie tun müssen, um Ihre Seite für die Produktion vorzubereiten."/><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/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.88773932.js"></script><link href="/static/css/main.dd166bd2.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="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="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/de/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn" 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" 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/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">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/de/docs/Learn/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">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Learn/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">Learn to run scripts in the browser</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">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%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%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" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Webentwicklung lernen</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn/Server-side" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Server-side-Website-Programmierung</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn/Server-side/Express_Nodejs" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Express-Webframework (Node.js/JavaScript)</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn/Server-side/Express_Nodejs/deployment" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Express-Tutorial Teil 7: Bereitstellung für die Produktion</span></a><meta property="position" content="4"/></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/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/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/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" data-macro="LearnSidebar"><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="#überblick">Überblick</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="#einen_hosting-anbieter_wählen">Einen Hosting-Anbieter wählen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#ihre_website_für_die_veröffentlichung_bereit_machen">Ihre Website für die Veröffentlichung bereit 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/Getting_started_with_the_web">Komplette Anfänger beginnen hier!</a></li><li><details><summary>Erste Schritte mit dem Web</summary><ol><li><a href="/de/docs/Learn/Getting_started_with_the_web">Einführung ins Web</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installation von grundlegender Software</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Wie wird Ihre Website aussehen?</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Umgang mit Dateien</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML-Grundlagen</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS-Grundlagen</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript-Grundlagen</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Veröffentlichung Ihrer Website</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Wie das Web funktioniert</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/HTML">HTML — Strukturierung des Webs</a></li><li><details><summary>Einführung in HTML</summary><ol><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Erste Schritte mit HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Was ist im Kopfbereich? Metadaten in HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Grundlagen des HTML-Textes</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Erstellen von Hyperlinks</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Erweiterte Textformatierung</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Struktur eines Dokuments und einer Website</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Markierung eines Briefes</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Die Strukturierung einer Seite mit Inhalt</a></li></ol></details></li><li><details><summary>Multimedia und Einbettung</summary><ol><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding">Multimedia und Einbettung</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Bilder in HTML</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video- und Audioinhalte</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Von Objekt zu iframe — andere Einbettungstechnologien</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Vektorgrafiken zum Web hinzufügen</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive Images</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla Splash-Seite</a></li></ol></details></li><li><details><summary>HTML-Tabellen</summary><ol><li><a href="/de/docs/Learn/HTML/Tables">HTML-Tabellen</a></li><li><a href="/de/docs/Learn/HTML/Tables/Basics">HTML Table Grundlagen</a></li><li><a href="/de/docs/Learn/HTML/Tables/Advanced">Erweiterte Funktionen und Barrierefreiheit von HTML-Tabellen</a></li><li><a href="/de/docs/Learn/HTML/Tables/Structuring_planet_data">Strukturierung von Planeten-Daten</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/CSS">CSS — Gestaltung des Webs</a></li><li><details><summary>CSS erste Schritte</summary><ol><li><a href="/de/docs/Learn/CSS/First_steps">Erste Schritte mit CSS</a></li><li><a href="/de/docs/Learn/CSS/First_steps/What_is_CSS">Was ist CSS?</a></li><li><a href="/de/docs/Learn/CSS/First_steps/Getting_started">Einstieg in CSS</a></li><li><a href="/de/docs/Learn/CSS/First_steps/How_CSS_is_structured">Wie CSS strukturiert ist</a></li><li><a href="/de/docs/Learn/CSS/First_steps/How_CSS_works">Wie CSS funktioniert</a></li><li><a href="/de/docs/Learn/CSS/First_steps/Styling_a_biography_page">Eine Biografieseite stylen</a></li></ol></details></li><li><details><summary>CSS-Bausteine</summary><ol><li><a href="/de/docs/Learn/CSS/Building_blocks">CSS-Grundbausteine</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors">CSS-Selektoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Typ-, Klassen- und ID-Selektoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attributselektoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-Klassen und Pseudo-Elemente</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Kombinatoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaskade, Spezifität und Vererbung</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Cascade_layers">Kaskadenschichten</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/The_box_model">Das Boxmodell</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Hintergründe und Rahmen</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Umgang mit unterschiedlichen Textausrichtungen</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Overflowing_content">Überlaufender Inhalt</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Values_and_units">CSS-Werte und Einheiten</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Größe von Elementen in CSS</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Bilder, Medien und Formularelemente</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Styling_tables">Tabellen stylen</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Erweiterte Styling-Effekte</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Organizing">Organisieren Ihres CSS</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension">Grundlegendes CSS-Verständnis</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">Erstellen von stilvollem Briefpapier</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/A_cool_looking_box">Eine cool aussehende Box</a></li></ol></details></li><li><details><summary>Textgestaltung</summary><ol><li><a href="/de/docs/Learn/CSS/Styling_text">CSS Textgestaltung</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Fundamentals">Grundlegende Text- und Schriftgestaltung</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Styling_lists">Listen stilisieren</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Styling_links">Styling von Links</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Web_fonts">Web-Fonts</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Setzen einer Community-Schul-Startseite</a></li></ol></details></li><li><details><summary>CSS-Layout</summary><ol><li><a href="/de/docs/Learn/CSS/CSS_layout">CSS-Layout</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Introduction">Einführung in CSS Layout</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Normal_Flow">Normaler Fluss</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Grids">Raster</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Mehrspaltiges Layout</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsives Design</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Media_queries">Einsteigerleitfaden für Media Queries</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy-Layout-Methoden</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Unterstützung älterer Browser</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/JavaScript">JavaScript — Dynamisches clientseitiges Skripting</a></li><li><details><summary>JavaScript erste Schritte</summary><ol><li><a href="/de/docs/Learn/JavaScript/First_steps">JavaScript erste Schritte</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Was ist JavaScript?</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/A_first_splash">Ein erster Sprung in JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/What_went_wrong">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Variables">Speichern der benötigten Informationen — Variablen</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Math">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Strings">Umgang mit Text — Strings in JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Useful_string_methods">Nützliche String-Methoden</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly Story Generator</a></li></ol></details></li><li><details><summary>JavaScript-Bausteine</summary><ol><li><a href="/de/docs/Learn/JavaScript/Building_blocks">JavaScript-Bausteine</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/conditionals">Entscheidungen in Ihrem Code treffen — Bedingte Anweisungen</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Looping_code">Schleifen-Code</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Functions">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Erstellen Sie Ihre eigene Funktion</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Return_values">Funktionsrückgabewerte</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Events">Einführung in Ereignisse</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Event_bubbling">Event bubbling</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Image_gallery">Bildgalerie</a></li></ol></details></li><li><details><summary>Einführung in JavaScript-Objekte</summary><ol><li><a href="/de/docs/Learn/JavaScript/Objects">Einführung in JavaScript-Objekte</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Basics">JavaScript Objekt Grundlagen</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Object_prototypes">Objektprototypen</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Object-oriented_programming">Objektorientierte Programmierung</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Classes_in_JavaScript">Klassen in JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/JSON">Arbeiten mit JSON</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Object_building_practice">Objekt-Baupraxis</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Hinzufügen von Funktionen zu unserem hüpfenden Kugeln-Demo</a></li></ol></details></li><li><details><summary>Asynchrones JavaScript</summary><ol><li><a href="/de/docs/Learn/JavaScript/Asynchronous">Asynchrones JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Introducing">Einführung in asynchrones JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Promises">Anleitung zur Verwendung von Promises</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API">Anleitung zur Implementierung einer Promise-basierten API</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Introducing_workers">Einführung in Workers</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Sequencing_animations">Sequenzierung von Animationen</a></li></ol></details></li><li><details><summary>Client-seitige Web-APIs</summary><ol><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs">Client-Side-Web-APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Einführung in Web-APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Abrufen von Daten vom Server</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third-party APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Grafiken zeichnen</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video- und Audio-APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Forms">Webformulare — Arbeiten mit Benutzerdaten</a></li><li><details><summary>Grundlagen der Webformulare</summary><ol><li><a href="/de/docs/Learn/Forms">Bausteine für Webformulare</a></li><li><a href="/de/docs/Learn/Forms/Your_first_form">Ihr erstes Formular</a></li><li><a href="/de/docs/Learn/Forms/How_to_structure_a_web_form">Wie Sie ein Webformular strukturieren</a></li><li><a href="/de/docs/Learn/Forms/Basic_native_form_controls">Basis-Native Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/HTML5_input_types">Die HTML5 input Typen</a></li><li><a href="/de/docs/Learn/Forms/Other_form_controls">Andere Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/Styling_web_forms">Styling von Webformularen</a></li><li><a href="/de/docs/Learn/Forms/Advanced_form_styling">Erweiterte Formular-Stilgestaltung</a></li><li><a href="/de/docs/Learn/Forms/UI_pseudo-classes">UI-Pseudo-Klassen</a></li><li><a href="/de/docs/Learn/Forms/Form_validation">Client-seitige Formularvalidierung</a></li><li><a href="/de/docs/Learn/Forms/Sending_and_retrieving_form_data">Senden von Formulardaten</a></li></ol></details></li><li><details><summary>Erweiterte Techniken für Webformulare</summary><ol><li><a href="/de/docs/Learn/Forms/How_to_build_custom_form_controls">Anleitung zur Erstellung benutzerdefinierter Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/Sending_forms_through_JavaScript">Versenden von Formularen über JavaScript</a></li><li><a href="/de/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS-Eigenschaftskompatibilitätstabelle für Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/HTML_forms_in_legacy_browsers">HTML-Formulare in älteren Browsern</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Accessibility">Barrierefreiheit — Das Web für alle nutzbar machen</a></li><li><details><summary>Barrierefreiheitsleitfäden</summary><ol><li><a href="/de/docs/Learn/Accessibility">Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Accessibility/What_is_accessibility">Was ist Barrierefreiheit?</a></li><li><a href="/de/docs/Learn/Accessibility/HTML">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Accessibility/CSS_and_JavaScript">CSS und JavaScript: Barrierefreiheits-Best Practices</a></li><li><a href="/de/docs/Learn/Accessibility/WAI-ARIA_basics">Grundlagen von WAI-ARIA</a></li><li><a href="/de/docs/Learn/Accessibility/Multimedia">Barrierefreie Multimedia</a></li><li><a href="/de/docs/Learn/Accessibility/Mobile">Barrierefreiheit auf Mobilgeräten</a></li><li><a href="/de/docs/Learn/Accessibility/Accessibility_troubleshooting">Bewertung: Barrierefreiheits-Troubleshooting</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Performance">Leistung — Websites schnell und reaktionsschnell machen</a></li><li><details><summary>Leitfäden zur Leistung</summary><ol><li><a href="/de/docs/Learn/Performance">Webleistung</a></li><li><a href="/de/docs/Learn/Performance/why_web_performance">Der 'Warum' der Web-Performance</a></li><li><a href="/de/docs/Learn/Performance/What_is_web_performance">Was ist Web-Performance?</a></li><li><a href="/de/docs/Learn/Performance/Perceived_performance">Wahrgenommene Leistung</a></li><li><a href="/de/docs/Learn/Performance/Measuring_performance">Messung der Performance</a></li><li><a href="/de/docs/Learn/Performance/Multimedia">Multimedia: Bilder</a></li><li><a href="/de/docs/Learn/Performance/video">Multimedia: Video</a></li><li><a href="/de/docs/Learn/Performance/JavaScript">JavaScript-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn/Performance/HTML">HTML-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn/Performance/CSS">CSS-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn/Performance/business_case_for_performance">Der geschäftliche Nutzen von Web-Performance</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/MathML">MathML — Schreiben von Mathematik mit MathML</a></li><li><details><summary>MathML erste Schritte</summary><ol><li><a href="/de/docs/Learn/MathML/First_steps">Erste Schritte mit MathML</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Getting_started">Erste Schritte mit MathML</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Text_containers">MathML Text-Container</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Fractions_and_roots">MathML-Brüche und -Wurzeln</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Scripts">MathML gescriptete Elemente</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Tables">MathML-Tabellen</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas">Drei berühmte mathematische Formeln</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/../Games">Spiele — Entwicklung von Spielen für das Web</a></li><li><details><summary>Anleitungen und Tutorials</summary><ol><li><a href="/de/docs/Games/Introduction">Einführung in die Spieleentwicklung für das Web</a></li><li><a href="/de/docs/Games/Techniques">Techniken für die Spieleentwicklung</a></li><li><a href="/de/docs/Games/Tutorials">Tutorials</a></li><li><a href="/de/docs/Games/Publishing_games">Publishing Games</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Tools_and_testing">Werkzeuge und Tests</a></li><li><details><summary>Client-seitige Webentwicklungstools</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Verständnis von Client-seitigen Webentwicklungstools</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Übersicht über clientseitige Werkzeuge</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Crashkurs zur Kommandozeile</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Grundlagen des Paketmanagements</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Einführung in eine vollständige Toolchain</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Bereitstellung unserer App</a></li></ol></details></li><li><details><summary>Einführung in client-seitige Frameworks</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Einführung in client-seitige Frameworks</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Hauptmerkmale von Frameworks</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Erste Schritte mit React</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginn unserer React-Task-Liste</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Komponentisieren unserer React-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React-Interaktivität: Ereignisse und Status</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React Interaktivität: Bearbeiten, Filtern, bedingtes Rendering</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React-Ressourcen</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Einstieg in Ember</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember App-Struktur und Komponentisierung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember-Interaktivität: Events, Klassen und Zustand</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interaktivität: Footer-Funktionalität, bedingtes Rendering</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember-Ressourcen und Fehlerbehebung</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Einstieg in Vue</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Erstellen unserer ersten Vue-Komponente</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering einer Liste von Vue-Komponenten</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Hinzufügen eines neuen Todo-Formulars: Vue-Ereignisse, Methoden und Modelle</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling von Vue-Komponenten mit CSS</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Verwendung von Vue computed properties</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue bedingte Darstellung: Bearbeitung bestehender Todos</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Vue-Refs und Lifecycle-Methoden zur Fokusverwaltung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue-Ressourcen</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Erste Schritte mit Svelte</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starten unserer Svelte-Tasklisten-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamisches Verhalten in Svelte: Arbeiten mit Variablen und Props</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Komponentisierung unserer Svelte-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Arbeiten mit Svelte Stores</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript-Unterstützung in Svelte</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Bereitstellung und nächste Schritte</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Erste Schritte mit Angular</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Anfang unserer Angular-To-Do-Liste-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Styling unserer Angular-Anwendung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Erstellen einer Item-Komponente</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Filtern unserer To-Do-Elemente</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git und GitHub</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/GitHub">Git und GitHub</a></li></ol></details></li><li><details><summary>Cross-Browser-Tests</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Einführung in das Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategien zur Durchführung von Tests</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Umgang mit häufigen JavaScript-Problemen</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Umgang mit häufigen Problemen der Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementierung von Feature-Erkennung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Einführung in automatisiertes Testen</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Einrichten Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Server-side">Server-seitige Webprogrammierung</a></li><li><details><summary>Erste Schritte</summary><ol><li><a href="/de/docs/Learn/Server-side/First_steps">Server-seitige Website-Programmierung: Erste Schritte</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Introduction">Einführung in die serverseitige Programmierung</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Client-Server_overview">Überblick über Client-Server</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Web_frameworks">Serverseitige Web-Frameworks</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Website_security">Website-Sicherheit</a></li></ol></details></li><li><details><summary>Django Web-Framework (Python)</summary><ol><li><a href="/de/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></li><li><a href="/de/docs/Learn/Server-side/Django/Introduction">Einführung in Django</a></li><li><a href="/de/docs/Learn/Server-side/Django/development_environment">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django-Tutorial: Die Local Library Website</a></li><li><a href="/de/docs/Learn/Server-side/Django/skeleton_website">Django-Tutorial Teil 2: Erstellung einer Skelett-Website</a></li><li><a href="/de/docs/Learn/Server-side/Django/Models">Django-Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href="/de/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Teil 4: Django Admin-Seite</a></li><li><a href="/de/docs/Learn/Server-side/Django/Home_page">Django-Tutorial Teil 5: Erstellen unserer Startseite</a></li><li><a href="/de/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href="/de/docs/Learn/Server-side/Django/Sessions">Django-Tutorial Teil 7: Sessions-Framework</a></li><li><a href="/de/docs/Learn/Server-side/Django/Authentication">Django-Tutorial Teil 8: Benutzer-Authentifizierung und Berechtigungen</a></li><li><a href="/de/docs/Learn/Server-side/Django/Forms">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn/Server-side/Django/Testing">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href="/de/docs/Learn/Server-side/Django/Deployment">Django-Tutorial Teil 11: Django in Produktion bereitstellen</a></li><li><a href="/de/docs/Learn/Server-side/Django/web_application_security">Django-Webanwendungssicherheit</a></li><li><a href="/de/docs/Learn/Server-side/Django/django_assessment_blog">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li><details open=""><summary>Express Web-Framework (Node.js/JavaScript)</summary><ol><li><a href="/de/docs/Learn/Server-side/Express_Nodejs">Express-Webframework (Node.js/JavaScript)</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/Introduction">Einführung in Express/Node</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/development_environment">Einrichtung einer Node-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express-Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Teil 2: Erstellung einer Grundstruktur für eine Website</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><em><a href="/de/docs/Learn/Server-side/Express_Nodejs/deployment" aria-current="page">Express-Tutorial Teil 7: Bereitstellung für die Produktion</a></em></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Common_questions">Weitere Ressourcen</a></li><li><details><summary>Häufige Fragen</summary><ol><li><a href="/de/docs/Learn/Common_questions">Häufige Fragen</a></li><li><a href="/de/docs/Learn/HTML/Howto">HTML verwenden, um häufige Probleme zu lösen</a></li><li><a href="/de/docs/Learn/CSS/Howto">CSS verwenden, um häufige Probleme zu lösen</a></li><li><a href="/de/docs/Learn/JavaScript/Howto">Lösen Sie häufige Probleme in Ihrem JavaScript-Code</a></li><li><a href="/de/docs/Learn/Common_questions/Web_mechanics">Web-Mechanik</a></li><li><a href="/de/docs/Learn/Common_questions/Tools_and_setup">Tools und Einrichtung</a></li><li><a href="/de/docs/Learn/Common_questions/Design_and_accessibility">Design und Barrierefreiheit</a></li></ol></details></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="#überblick">Überblick</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="#einen_hosting-anbieter_wählen">Einen Hosting-Anbieter wählen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#ihre_website_für_die_veröffentlichung_bereit_machen">Ihre Website für die Veröffentlichung bereit 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 für die Produktion</h1></header><div class="section-content"><ul class="prev-next"> <li><a class="button secondary" href="/de/docs/Learn/Server-side/Express_Nodejs/forms"><span class="button-wrap"> Zurück </span></a></li> <li><a class="button secondary" href="/de/docs/Learn/Server-side/Express_Nodejs"><span class="button-wrap"> Übersicht: Express-Webframework (Node.js/JavaScript)</span></a></li> </ul> <p>Nachdem Sie nun eine großartige <a href="/de/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a> Webseite erstellt (und getestet) haben, möchten Sie sie wahrscheinlich auf einem öffentlichen Webserver installieren, damit Bibliothekspersonal und Mitglieder über das Internet darauf zugreifen können. Dieser Artikel bietet einen Überblick darüber, wie Sie möglicherweise einen Hoster finden, um Ihre Website bereitzustellen, und was Sie tun müssen, um Ihre Seite für die Produktion vorzubereiten.</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">Voraussetzungen:</th> <td>Schließen Sie alle vorherigen Tutorials ab, einschließlich <a href="/de/docs/Learn/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 man eine Express-App für die Produktion bereitstellen kann.</td> </tr> </tbody> </table></figure></div><section aria-labelledby="überblick"><h2 id="überblick"><a href="#überblick">Überblick</a></h2><div class="section-content"><p>Sobald Ihre Website fertig ist (oder "genug" fertig, um mit dem öffentlichen Test zu beginnen), müssen Sie sie auf einem öffentlich zugänglicheren und zugänglicheren Ort als Ihrem persönlichen Entwicklungscomputer hosten.</p> <p>Bisher haben Sie in einer <a href="/de/docs/Learn/Server-side/Express_Nodejs/development_environment">Entwicklungsumgebung</a> gearbeitet, Express/Node als Webserver verwendet, um Ihre Website an den lokalen Browser/das Netzwerk freizugeben, und Ihre Website mit (unsicheren) Entwicklungseinstellungen betrieben, die Debuginformationen und andere private Informationen offenlegen. Bevor Sie eine Webseite extern hosten können, müssen Sie zunächst:</p> <ul> <li>Eine Umgebung zum Hosten der Express-App wä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 bei der Auswahl einer Hosting-Site, einen kurzen Überblick über das, was Sie tun müssen, um Ihre Express-App für die Produktion vorzubereiten, und ein funktionierendes Beispiel, wie Sie die LocalLibrary-Website auf dem <a href="https://railway.app/" class="external" target="_blank">Railway-Cloud-Hosting-Service</a> installieren können.</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 Servercomputer bereitgestellt wird, auf dem Sie Ihre Website für den externen Zugriff betreiben. Die Umgebung umfasst:</p> <ul> <li>Computer-Hardware, auf der die Website ausgeführt wird.</li> <li>Betriebssystem (z.B. Linux oder Windows).</li> <li>Laufzeitumgebung der Programmiersprache und Framework-Bibliotheken, auf denen Ihre Website geschrieben ist.</li> <li>Webserver-Infrastruktur, möglicherweise einschließlich eines Webservers, Reverse-Proxy, Lastverteilers usw.</li> <li>Datenbanken, von denen Ihre Website abhängig ist.</li> </ul> <p>Der Servercomputer könnte sich auf Ihrem Gelände befinden und über eine schnelle Verbindung mit dem Internet verbunden sein, aber es ist viel gebräuchlicher, einen Computer zu verwenden, der „in der Cloud“ gehostet wird. Das bedeutet, dass Ihr Code auf einem entfernten Computer (oder möglicherweise einem „virtuellen“ Computer) im Rechenzentrum Ihres Hosting-Unternehmens ausgeführt wird. Der entfernte Server bietet in der Regel ein garantiertes Maß an Rechenressourcen (z.B. CPU, RAM, Speicherkapazität usw.) und Internetverbindung zum bestimmten Preis.</p> <p>Diese Art von remote zugänglicher Rechner-/Netzwerkhardware wird als <em>Infrastructure as a Service (IaaS)</em> bezeichnet. Viele IaaS-Anbieter bieten Optionen an, ein bestimmtes Betriebssystem vorzuinstallieren, auf dem Sie die anderen Komponenten Ihrer Produktionsumgebung installieren müssen. Andere Anbieter ermöglichen es Ihnen, funktionsreichere Umgebungen auszuwählen, die möglicherweise eine vollständige Node-Einrichtung umfassen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Vorgefertigte Umgebungen können das Einrichten Ihrer Website sehr einfach machen, da sie die Konfiguration reduzieren. Die vorhandenen Optionen können jedoch dazu führen, dass Sie auf einen unbekannten Server (oder andere Komponenten) beschränkt sind und möglicherweise 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, eine Idee haben, wo Sie anfangen sollen!</p> </div> <p>Andere Hosting-Anbieter unterstützen Express im Rahmen eines <em>Platform as a Service</em> (<em>PaaS</em>)-Angebots. Bei dieser Art des Hostings müssen Sie sich nicht um den größten Teil Ihrer Produktionsinfrastruktur (Server, Lastverteiler usw.) kümmern, da die Hostplattform diese für Sie erledigt. Dies macht die Bereitstellung recht einfach, da Sie sich nur auf Ihre Webanwendung und nicht auf andere Serverinfrastruktur konzentrieren müssen.</p> <p>Einige Entwickler entscheiden sich für die erhöhte Flexibilität, die von IaaS gegenüber PaaS angeboten wird, während andere den geringeren Wartungsaufwand und die einfachere Skalierbarkeit von PaaS bevorzugen. Wenn Sie gerade anfangen, ist es viel einfacher, Ihre Website auf einem PaaS-System einzurichten, daher werden wir das 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 dazu bereitstellen, wie Sie eine Express-Website mithilfe verschiedener Konfigurationen von Webserver, Anwendungsserver, Reverse-Proxy usw. einrichten können. Beispielsweise gibt es viele Schritt-für-Schritt-Leitfaden 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="einen_hosting-anbieter_wählen"><h2 id="einen_hosting-anbieter_wählen"><a href="#einen_hosting-anbieter_wählen">Einen Hosting-Anbieter wählen</a></h2><div class="section-content"><p>Es gibt zahlreiche Hosting-Anbieter, die dafür bekannt sind, <em>Node</em> (und <em>Express</em>) entweder aktiv zu unterstützen oder damit gut zu arbeiten. Diese Anbieter stellen unterschiedliche Arten von Umgebungen (IaaS, PaaS) sowie unterschiedliche Ebenen von Rechen- und Netzwerkressourcen zu unterschiedlichen Preisen zur Verfügung.</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 im Folgenden einige Optionen vorstellen, ist es wichtig, 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 stark Ihre Seite voraussichtlich frequentiert wird und die Kosten für die Daten- und Rechenressourcen, die erforderlich sind, um diese Nachfrage zu decken.</li> <li>Unterstützung für horizontale (Hinzufügen weiterer Maschinen) und vertikale Skalierung (Upgrade auf leistungsstärkere Maschinen) und die Kosten dafür.</li> <li>Die Standorte, an denen der Anbieter Rechenzentren hat, und wo der Zugriff daher voraussichtlich am schnellsten ist.</li> <li>Die historische Verfügbarkeit und Ausfallzeiten des Hosts.</li> <li>Die bereitgestellten Tools zur Verwaltung der Site – sind sie einfach zu bedienen und sicher (z.B. SFTP vs. FTP).</li> <li>Eingebaute Frameworks zur Überwachung Ihres Servers.</li> <li>Bekannte Einschränkungen. Einige Hosts blockieren absichtlich bestimmte Dienste (z.B. E-Mail). Andere bieten in einigen Preisklassen nur eine bestimmte Anzahl von "Live-Zeit"-Stunden an oder nur eine geringe Speichermenge.</li> <li>Zusätzliche Vorteile. Einige Anbieter bieten kostenlose Domain-Namen und Unterstützung für TLS-Zertifikate an, für deren Zahlung Sie sonst aufkommen müssten.</li> <li>Ob die "kostenlose" Stufe, auf die Sie sich verlassen, im Laufe der Zeit abläuft und ob die Kosten für den Wechsel zu einer teureren Stufe bedeuten, dass es besser gewesen wäre, von Anfang an einen anderen Dienst zu nutzen!</li> </ul> <p> Die gute Nachricht beim Einstieg ist, dass es einige Seiten gibt, die "kostenlose" Computerumgebungen bereitstellen, die für Tests und Bewertungen vorgesehen sind. Diese sind in der Regel recht ressourceneingeschränkte/lokale Umgebungen, und Sie müssen sich bewusst sein, dass sie möglicherweise nach einer Einführungszeit ablaufen oder andere Einschränkungen haben. Sie sind jedoch großartig, um Websites mit geringem Datenverkehr in einer gehosteten Umgebung zu testen und können einen einfachen Übergang zur Bezahlung für mehr Ressourcen ermöglichen, wenn Ihre Website beliebter 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>, etc. </p> <p> Die meisten Anbieter bieten auch eine "Basis-" oder "Hobby-"Stufe an, die für kleine Produktionsseiten gedacht ist und nützlichere Computerkapazitäten 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 eine relativ preiswerte Basis-Computing-Stufe bieten (im Bereich von 5 bis 10 USD 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 die Skalierbarkeit das wichtigste Kriterium ist. </p> </div></div></section><section aria-labelledby="ihre_website_für_die_veröffentlichung_bereit_machen"><h2 id="ihre_website_für_die_veröffentlichung_bereit_machen"><a href="#ihre_website_für_die_veröffentlichung_bereit_machen">Ihre Website für die Veröffentlichung bereit machen</a></h2><div class="section-content"><p> Die wichtigsten Dinge, über die Sie bei der Veröffentlichung Ihrer Website nachdenken sollten, sind Websicherheit und Leistung. Mindestens werden Sie die Datenbankkonfiguration ändern wollen, damit Sie für die Produktion eine andere Datenbank verwenden und deren Anmeldeinformationen sichern können, die Stack-Traces entfernen, die auf Fehlerseiten während der Entwicklung angezeigt werden, Ihr Logging überarbeiten und die geeigneten Header setzen, um viele gängige Sicherheitsbedrohungen zu vermeiden. </p> <p>In den folgenden Abschnitten skizzieren wir die wichtigsten Änderungen, die Sie an Ihrer App vornehmen sollten.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Es gibt weitere nützliche Tipps in den Express-Dokumentationen – siehe <a href="https://expressjs.com/en/advanced/best-practice-performance.html" class="external" target="_blank">Production best practices: performance and reliability</a> und <a href="https://expressjs.com/en/advanced/best-practice-security.html" class="external" target="_blank">Production Best Practices: Security</a>.</p> </div></div></section><section aria-labelledby="datenbankkonfiguration"><h3 id="datenbankkonfiguration"><a href="#datenbankkonfiguration">Datenbankkonfiguration</a></h3><div class="section-content"><p> Bisher haben wir in diesem Tutorial eine einzelne Entwicklungsdatenbank verwendet, deren Adresse und Anmeldedaten in <strong>app.js</strong> fest codiert sind. Da die Entwicklungsdatenbank keine Informationen enthält, die uns Sorgen machen, wenn sie offengelegt oder beschädigt werden, besteht kein besonderes Risiko, diese Details preiszugeben. Wenn Sie jedoch mit echten Daten arbeiten, insbesondere mit persönlichen Benutzerinformationen, ist der Schutz Ihrer Datenbankanmeldedaten sehr wichtig. </p> <p>Aus diesem Grund möchten wir für die Produktion eine andere Datenbank verwenden als die, die wir für die Entwicklung verwenden, und auch die Anmeldedaten der Produktionsdatenbank vom Quellcode trennen, damit sie ordnungsgemäß geschützt werden können.</p> <p> Wenn Ihr Hosting-Anbieter die Einrichtung von Umgebungsvariablen über eine Weboberfläche unterstützt (was viele tun), besteht eine Möglichkeit darin, dass der Server die Datenbank-URL aus einer Umgebungsvariablen abruft. Im Folgenden ändern wir die LocalLibrary-Website, um die Datenbank-URI aus einer Betriebssystem-Umgebungsvariablen zu erhalten, falls sie definiert wurde, und andernfalls die Entwicklungsdatenbank-URL zu verwenden. </p> <p> Öffnen Sie <strong>app.js</strong> und finden Sie die Zeile, die die MongoDB-Verbindungsvariable setzt. Sie wird 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 Verbindungszeichenfolgeverbindung aus einer Umgebungsvariablen namens <code>MONGODB_URI</code> zu erhalten, wenn sie 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 andere gebräuchliche Methode, um die Anmeldeinformationen der Produktionsdatenbank von Quellcodes 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 mithilfe des npm-Moduls <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 Umgebungsvariable <code>NODE_ENV</code> auf <em>production</em> setzen (sie ist standardmäßig auf '<em>development</em>' gesetzt). Neben der Generierung weniger ausführlicher Fehlermeldungen cachet das Setzen der Variablen auf <em>production</em> Vorlagendateien und CSS-Dateien, die aus CSS-Erweiterungen generiert wurden. Tests zeigen, dass das Setzen von <code>NODE_ENV</code> auf <em>production</em> die Anwendungsleistung um den Faktor drei verbessern kann!</p> <p>Diese Änderung kann entweder mit <code>export</code>, einer Umgebungsdatei oder dem OS-Initialisierungssystem vorgenommen werden.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Dies ist tatsächlich eine Änderung, die Sie in Ihrer Umgebungseinstellung vornehmen und nicht in Ihrer App, aber wichtig genug, um hier darauf hingewiesen zu werden! Wir zeigen, wie dies für unser 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>Loggings-Aufrufe können sich auf eine Website mit hohem Traffic auswirken. In einer Produktionsumgebung müssen Sie möglicherweise die Website-Aktivität protokollieren (z.B. Tracking-Traffic oder Protokollieren von API-Aufrufen), aber Sie sollten versuchen, die Menge an Logging für Debugging-Zwecke zu minimieren.</p> <p> Ein Weg, um "Debug"-Logging in der Produktion zu minimieren, besteht darin, ein Modul wie <a href="https://www.npmjs.com/package/debug" class="external" target="_blank">debug</a> zu verwenden, mit dem Sie steuern können, welches Logging durch das Setzen einer Umgebungsvariable durchgeführt wird. Zum Beispiel zeigt das folgende Codefragment, wie Sie das Logging für "author" einrichten könnten. Die Debug-Variable wird mit dem Namen 'author' deklariert, und der 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> Dann können Sie eine bestimmte Menge von Logs aktivieren, indem Sie sie als durch Kommas getrennte Liste in der <code>DEBUG</code>-Umgebungsvariablen angeben. Sie können die Variablen für die Anzeige von Author- und Book-Logs wie gezeigt setzen (auch Platzhalter werden 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 zu <code>debug</code> können Logging ersetzen, das Sie möglicherweise zuvor mit <code>console.log()</code> oder <code>console.error()</code> gemacht haben. Ersetzen Sie in Ihrem Code alle <code>console.log()</code>-Aufrufe durch Logging über das <a href="https://www.npmjs.com/package/debug" class="external" target="_blank">debug</a> Module. Schalten Sie das Logging in Ihrer Entwicklungsumgebung durch das Setzen der DEBUG-Variablen ein und aus und beobachten Sie die Auswirkungen auf das Logging.</p> </div> <p>Wenn Sie Website-Aktivitäten protokollieren müssen, können Sie eine Logging-Bibliothek wie <em>Winston</em> oder <em>Bunyan</em> verwenden. Für weitere Informationen zu diesem Thema siehe: <a href="https://expressjs.com/en/advanced/best-practice-performance.html" class="external" target="_blank">Production best practices: performance and reliability</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 gesendet werden, komprimieren, was die Zeit, die der Client benötigt, um die Seite zu erhalten und zu laden, erheblich verkürzt. Die verwendete Komprimierungsmethode hängt von den Dekomprimierungsmethoden ab, die der Client im Antrag angibt (die Antwort wird nicht komprimiert gesendet, wenn keine Komprimierungsmethoden unterstützt werden).</p> <p>Fügen Sie diese Funktionalität zu Ihrer Seite hinzu, indem Sie <a href="https://www.npmjs.com/package/compression" class="external" target="_blank">compression</a> Middleware verwenden. Installieren Sie dies im Hauptverzeichnis 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 benötigen Sie die Kompressionsbibliothek wie gezeigt. Fügen Sie die Kompressionsbibliothek zur Middleware-Kette mit der <code>use()</code>-Methode 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 der 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_zum_schutz_vor_bekannten_schwachstellen"><h3 id="verwenden_sie_helmet_zum_schutz_vor_bekannten_schwachstellen"><a href="#verwenden_sie_helmet_zum_schutz_vor_bekannten_schwachstellen">Verwenden Sie Helmet zum Schutz vor bekannten Schwachstellen</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 geeignete HTTP-Header setzen, die Ihrer App helfen, sich vor bekannten Webschwachstellen zu schützen (weitere Informationen darüber, welche Header es setzt und welche Schwachstellen es schützt, finden Sie in den <a href="https://helmetjs.github.io/" class="external" target="_blank">Dokumenten</a>).</p> <p>Installieren Sie dies im Hauptverzeichnis 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 benötigen Sie die <em>helmet</em>-Bibliothek wie gezeigt. Fügen Sie das Modul dann der Middleware-Kette mit der <code>use()</code>-Methode 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> Normalerweise hätten wir einfach <code>app.use(helmet());</code> eingefügt, um den <em>Teil</em> der sicherheitsbezogenen Header hinzuzufügen, die für die meisten Sites sinnvoll sind. In der <a href="/de/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template">LocalLibrary-Basistemplate</a> enthalten wir jedoch einige Bootstrap- und jQuery-Skripte. Diese verstoßen gegen die <em>Standard</em>- <a href="/de/docs/Web/HTTP/CSP">Content Security Policy (CSP)</a> von Helmet, die das Laden von Cross-Site-Skripten nicht zulässt. Um diese Skripte zu laden, ändern wir die Helmet-Konfiguration so, dass sie CSP-Direktiven festlegt, um das Laden von Skripten von den angegebenen Domains zu ermöglichen. Für Ihren eigenen Server können Sie spezifische Header nach Bedarf hinzufügen/deaktivieren, indem Sie den <a href="https://www.npmjs.com/package/helmet" class="external" target="_blank">Anweisungen zur Verwendung von Helmet hier</a> folgen. </p></div></section><section aria-labelledby="fügen_sie_ratenbegrenzung_zu_den_api-routen_hinzu"><h3 id="fügen_sie_ratenbegrenzung_zu_den_api-routen_hinzu"><a href="#fügen_sie_ratenbegrenzung_zu_den_api-routen_hinzu">Fügen Sie Ratenbegrenzung 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 übermäßige Anfragen an Ihre Website gerichtet werden könnten, wie z.B. Denial-of-Service-Angriffe, Brute-Force-Angriffe oder sogar nur ein Client oder Skript, das nicht wie erwartet funktioniert. Abgesehen von Leistungsproblemen, die durch zu viele Anfragen entstehen können, die Ihren Server verlangsamen, können Sie auch für den zusätzlichen Datenverkehr belastet werden. Dieses Paket kann verwendet werden, um die Anzahl der Anfragen zu begrenzen, die an eine bestimmte Route oder einen Satz von Routen gestellt werden können. </p> <p>Installieren Sie dies im Hauptverzeichnis 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 benötigen Sie die <em>express-rate-limit</em>-Bibliothek wie gezeigt. Fügen Sie das Modul dann der Middleware-Kette mit der <code>use()</code>-Methode 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 Befehl oben begrenzt alle Anfragen auf 20 pro Minute (Sie können dies nach Bedarf ändern).</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Drittanbieterdienste wie <a href="https://www.cloudflare.com/" class="external" target="_blank">Cloudflare</a> können ebenfalls verwendet werden, wenn Sie einen fortschrittlicheren Schutz 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 Abhängigkeiten und die Einstiegspunktdatei der Anwendung herauszufinden.</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 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>>node --version v16.17.1 </code></pre></div> <p>Öffnen Sie <strong>package.json</strong> und fügen Sie diese Informationen als <strong>engines > node</strong> wie gezeigt hinzu (verwenden Sie die Versionnummer 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 Hostingdienst unterstützt möglicherweise nicht die spezifische angegebene Node-Version, aber diese Änderung sollte sicherstellen, dass er versucht, eine Version mit der gleichen Hauptversionsnummer oder eine neuere Version zu verwenden.</p> <p>Beachten Sie, dass es andere Möglichkeiten geben kann, die Node-Version bei verschiedenen Hostingdiensten anzugeben, aber der <strong>package.json</strong>-Ansatz wird weitgehend unterstützt.</p> <h4 id="abhängigkeiten_erhalten_und_erneut_testen">Abhängigkeiten erhalten und erneut testen</h4> <p>Bevor wir fortfahren, lassen Sie uns die Seite erneut testen und sicherstellen, dass keine unserer Änderungen die Seite beeinflusst hat.</p> <p>Zuerst müssen wir unsere Abhängigkeiten abrufen. Sie können dies tun, indem Sie im Terminal im Hauptverzeichnis des Projekts 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 </code></pre></div> <p>Führen Sie die Seite nun aus (siehe <a href="/de/docs/Learn/Server-side/Express_Nodejs/routes#testing_the_routes">Testing the routes</a> für die entsprechenden Befehle) und überprüfen Sie, dass sich die Seite immer noch wie erwartet verhält.</p></div></section><section aria-labelledby="erstellen_eines_anwendungsspeichers_in_github"><h3 id="erstellen_eines_anwendungsspeichers_in_github"><a href="#erstellen_eines_anwendungsspeichers_in_github">Erstellen eines Anwendungsspeichers in GitHub</a></h3><div class="section-content"><p> Viele Hostingdienste erlauben es Ihnen, Projekte aus einem lokalen Repository oder von cloudbasierten Quellversionskontrollplattformen zu importieren und/oder zu synchronisieren. Dies kann die Bereitstellung und iterative Entwicklung erheblich erleichtern. </p> <p>Für dieses Tutorial richten wir ein <a href="https://github.com/" class="external" target="_blank">GitHub</a> Konto und ein Repository für die Bibliothek ein und verwenden das <strong>git</strong>-Tool, um unseren Quellcode hochzuladen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Sie können diesen Schritt überspringen, wenn Sie bereits GitHub zur Verwaltung Ihres Quellcodes verwenden!</p> <p>Beachten Sie, dass die Verwendung von Quellcodeverwaltungs-Tools eine gute Software-Entwicklungspraxis ist, da Sie damit Änderungen ausprobieren können und bei Bedarf zwischen Ihren Experimenten und dem "bekannten guten Code" wechseln können!</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 eingeloggt 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 auf diesem Formular aus. Obwohl diese nicht zwingend erforderlich sind, werden sie dringend empfohlen.</p> <ul> <li> <p>Geben Sie einen neuen Repository-Namen ein (z.B. <em>express-locallibrary-tutorial</em>) und eine Beschreibung (z.B. "Local Library website written in Express (Node)").</p> </li> <li> <p>Wählen Sie <strong>Node</strong> in der Auswahliste <em>Add .gitignore</em>.</p> </li> <li> <p>Wählen Sie Ihre bevorzugte Lizenz in der Auswahliste <em>Add license</em>.</p> </li> <li> <p>Aktivieren Sie <strong>Initialize this repository with a README</strong>.</p> </li> </ul> <div class="notecard warning"> <p><strong>Warnung:</strong> Der Standardzugriff "Öffentlich" macht <em>alle</em> Quellcodes – einschließlich Ihres Datenbankbenutzernamens und -passworts – für jeden im Internet sichtbar! Stellen Sie sicher, dass der Quellcode Anmeldeinformationen <em>nur</em> aus Umgebungsvariablen liest und keine Anmeldeinformationen fest kodiert sind.</p> <p>Wählen Sie andernfalls die Option "Privat", damit nur ausgewählte Personen den Quellcode sehen können.</p> </div> </li> <li> <p>Drücken Sie <strong>Create repository</strong>.</p> </li> <li> <p>Klicken Sie auf den grünen <strong>Clone or download</strong> Button auf Ihrer neuen Repo-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 in etwa so aussehen: <code>https://github.com/<your_git_user_id>/express-locallibrary-tutorial.git</code>. </p> </li> </ol> <p>Jetzt, wo das Repository ("Repo") auf GitHub erstellt wurde, wollen wir es auf unseren lokalen Computer klonen (kopieren):</p> <ol> <li> <p>Installieren Sie <em>git</em> auf Ihrem lokalen Computer (Versionen für verschiedene Plattformen finden Sie <a href="https://git-scm.com/downloads" class="external" target="_blank">hier</a>).</p> </li> <li> <p>Öffnen Sie ein Eingabeaufforderungs-/Terminal-Fenster und klonen Sie Ihr Repo 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 Anwendungs-Quellcodedateien 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 Eingabeaufforderungs-/Terminal-Fenster und verwenden Sie den Befehl <code>add</code>, 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 Befehl <code>status</code>, um zu überprüfen, ob alle Dateien, die sie <code>commit</code> möchten, korrekt sind (Sie möchten Quellcodedateien, keine Binärdateien, temporären Dateien, usw. einfügen). Es sollte ein wenig wie die untenstehende Auflistung aussehen. </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>commit</code> die Dateien zu Ihrem lokalen Repo. Dies entspricht dem Signieren der Änderungen ab und macht sie zu einem 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> Bis zu diesem Punkt wurde das Remote-Repo nicht geändert. Der letzte Schritt besteht darin, Ihr lokales Repo mit dem folgenden Befehl zum Remote-GitHub-Repo zu synchronisieren (<code>push</code>). </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>Wenn dieser Vorgang abgeschlossen ist, sollten Sie in der Lage sein, zurück zu der Seite auf GitHub zu gehen, wo Sie Ihr Repo erstellt haben, die Seite zu aktualisieren und zu sehen, dass Ihre gesamte Anwendung nun hochgeladen wurde. Sie können Ihr Repo weiterhin aktualisieren, wenn sich Dateien ändern, indem Sie diesen Hinzufügen/Commit-/Push-Zyklus verwenden.</p> <p> Dies ist ein guter Punkt, um eine Sicherungskopie Ihres "Vanilla" Projekts zu erstellen – während einige der Änderungen, die wir in den folgenden Abschnitten vornehmen werden, für die Bereitstellung auf jedem Hosting-Dienst nützlich sein können (oder für die Entwicklung), könnten andere das nicht sein. Sie können dies mit <code>git</code> über die 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 erfahren, siehe <a href="https://docs.github.com/en/get-started/start-your-journey/git-and-github-learning-resources" class="external" target="_blank">Learning Git</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 man <em>LocalLibrary</em> auf <a href="https://glitch.com/" class="external" target="_blank">Glitch</a> hostet.</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 aus mehreren Gründen für die Nutzung von Glitch:</p> <ul> <li> <p> Glitch hat einen <a href="https://glitch.com/pricing" class="external" target="_blank">kostenlosen Einstiegstarif</a>, der <em>wirklich</em> kostenlos ist, wenn auch mit einigen Einschränkungen. Die Tatsache, dass es für alle Entwickler erschwinglich ist, ist MDN sehr wichtig! </p> </li> <li> <p> Glitch kümmert sich um die Infrastruktur, sodass Sie es nicht tun müssen. Sich nicht um Server, Lastverteiler, Reverse Proxies usw. sorgen zu müssen, macht es viel einfacher zu beginnen. </p> </li> <li> <p>Die Fähigkeiten und Konzepte, die Sie bei der Verwendung von Glitch lernen werden, sind übertragbar.</p> </li> <li> <p> Die Dienst- und Planbeschränkungen haben keinen wirklichen Einfluss auf die Verwendung von Glitch für das Tutorial. Zum Beispiel: </p> <ul> <li> Der Starterplan bietet nur 1000 "Projektstunden" pro Monat, die monatlich zurückgesetzt werden. Diese werden verwendet, wenn Sie die Website aktiv bearbeiten oder wenn jemand darauf zugreift. Wenn niemand auf die Seite oder Änderungen daran vornimmt, wird sie in den Ruhezustand versetzt. </li> <li> Die Starterplanumgebung hat einen begrenzten Container-RAM und Speicherplatz. Es gibt mehr als genug für das Tutorial, insbesondere weil unsere Datenbank anderswo gehostet wird. </li> <li>Benutzerdefinierte Domains werden nicht gut unterstützt (zum Zeitpunkt des Schreibens).</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 technischen Einschränkungsseite</a>.</li> </ul> </li> </ul> <p>Während Glitch für das Hosting dieser Demonstration geeignet ist, sollten Sie sich die Zeit nehmen zu bestimmen, ob es für <a href="#einen_hosting-anbieter_w%C3%A4hlen">Ihre eigene Website 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 aus GitHub importieren und die Projektdateien hinzufügen und bearbeiten können. Während 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 Rätsel – Glitch sagt es nicht. Es ist jedoch klar, dass solange Sie eine relativ standardmäßige Nodejs-Webanwendung erstellen (zum Beispiel using <code>package.json</code> für Ihre Abhängigkeiten), und nicht mehr Ressourcen verwenden als in den <a href="https://help.glitch.com/hc/en-us/articles/16287495313293-Technical-Restrictions" class="external" target="_blank">Technischen Restriktionen</a> gelistet sind, sollte Ihre Anwendung "einfach funktionieren". </p> <p> Sobald die Anwendung ausgeführt wird, kann sie für die Produktion mit <a href="https://help.glitch.com/hc/en-us/articles/16287550167437-Adding-Private-Data" class="external" target="_blank">privaten Daten</a> konfiguriert werden, die in einer <code>.env</code>-Datei bereitgestellt werden. Die Werte in den geheimen Daten werden wie Umgebungsvariablen von der Anwendung gelesen, was, Sie sich aus einem vorherigen Abschnitt erinnern, wie wir unsere Anwendung konfigurierten, damit sie ihre Datenbank-URL erhielt. Beachten Sie, dass die Variablen <em>geheim</em> sind: die <code>.env</code>-Datei sollte nicht in Ihr GitHub-Repository aufgenommen werden. </p> <p>Die Glitch-Bearbeitungsansicht bietet auch Terminal-Zugriff auf die Webanwendungsumgebung, den Sie verwenden können, um mit der Webanwendung genauso zu arbeiten, als ob Sie auf Ihrer lokalen Maschine ausgeführt wird.</p> <p> Das ist alles, was Sie brauchen, 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 nutzen, müssen Sie zuerst 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, um sich mit Ihren GitHub-Anmeldedaten anzumelden.</li> <li>Sie werden dann in das Glitch-Dashboard eingeloggt: <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 in der Regel einige Hauptversionen der neuesten Node.js-Veröffentlichungen. Wenn die in Ihrer <code>package.json</code>-Datei angegebene "kleine" Version nicht unterstützt wird, weichen sie normalerweise auf die nächste unterstützte Version aus (und oft wird das 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>-Datei verwendete Version wie gezeigt reduzieren. 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 zu aktualisieren und in Zukunft besser aktualisiert zu halten</a> – und es kann sein, dass die Versionsbeschränkung nicht mehr existiert, wenn Sie dies lesen. Anstelle der Herabstufung der <code>node</code>-Version könnten Sie Ihr Projekt hochladen und sehen, ob es erstellt wird. Wenn Fehler auftreten und Ihre Anwendung nicht lädt, sollten Sie versuchen, die <code>node</code>-Version in Ihrer <code>package.json</code>-Datei im Glitch-Editor auf <code>>=v16</code> zu setzen. </p> <div class="notecard note"> <p><strong>Hinweis:</strong> Sie können auch die unterstützten Versionen überprü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="bereitstellung_auf_glitch_von_github"><h3 id="bereitstellung_auf_glitch_von_github"><a href="#bereitstellung_auf_glitch_von_github">Bereitstellung auf Glitch von GitHub</a></h3><div class="section-content"><p> Als nächstes importieren wir das Bibliotheksprojekt von GitHub. Wählen Sie zuerst die <strong>Dashboard</strong> Option aus dem Hauptmenü der Seite und wählen Sie dann die <strong>Neues Projekt</strong> Schaltfläche. Glitch zeigt eine Liste von Optionen für das neue Projekt; wählen Sie <strong>Importieren von GitHub</strong>. </p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/glitch_new_project_import_github.png" alt="Glitch Website-Dashboard, das eine neue Projekt-Schaltfläche und ein Popup-Menü mit der Option "Vom GitHub importieren" anzeigt" width="1097" height="724" loading="lazy"> </p> <p> Ein Popup erscheint. Geben Sie die URL Ihres GitHub-Bibliotheks-Repositories 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/Server-side/Express_Nodejs/deployment/glitch_new_project_github_repo_url.png" alt="Glitch-Popup zum Eingeben der URL des GitHub-Repos, um es zu importieren" width="462" height="208" loading="lazy"> </p> <p> Glitch wird dann das Projekt importieren und Fortschrittsmitteilungen anzeigen. Nach Abschluss wird es die Bearbeitungsansicht für das neue Projekt anzeigen, wie unten gezeigt. </p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/glitch_imported_project_in_editor.png" alt="Glitch-Bearbeitungsansicht für importiertes Projekt" width="1309" height="726" loading="lazy"> </p> <p>Sie können die Live-Seiten-URL erhalten, indem Sie die <strong>Teilen</strong> Schaltfläche auswählen.</p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/glitch_share_project.png" alt="Glitch-Bearbeitungsansicht für importiertes Projekt" width="1311" height="721" loading="lazy"> </p> <p> Öffnen Sie einen neuen Browser-Tab und kopieren Sie den Link zur Live-Seite in die Adressleiste. Die lokale Bibliotheksseite 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 synchron zu halten. </p> </div></div></section><section aria-labelledby="verwenden_sie_eine_produktionsdatenbank_bei_mongodb"><h3 id="verwenden_sie_eine_produktionsdatenbank_bei_mongodb"><a href="#verwenden_sie_eine_produktionsdatenbank_bei_mongodb">Verwenden Sie eine Produktionsdatenbank bei MongoDB</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 sind so konfiguriert, dass wir MongoDB verwenden), bieten viele andere Seiten MongoDB-Datenbanken als Dienst an. </p> <p>Eine Option besteht darin, den Anweisungen unter <a href="/de/docs/Learn/Server-side/Express_Nodejs/mongoose#setting_up_the_mongodb_database">Einrichten der MongoDB-Datenbank</a> zu folgen, um früher im Tutorial eine neue Produktionsdatenbank einzurichten.</p> <p> Um die Produktionsdatenbank für die Bibliotheksanwendung zugänglich zu machen, öffnen Sie die <code>.env</code>-Datei in der Bearbeitungsansicht des Projekts. Geben Sie die Datenbank-URL-Variable <code>MONGODB_URI</code> und die URL Ihrer Produktionsdatenbank ein. Die Seite wird aktualisiert, während Sie Werte in den Editor eingeben. </p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/glitch_env.png" alt="Glitch .env-Dateieditor 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> gedacht und wurde automatisch beim Import in Glitch erstellt. Sie wird nie 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, dass wir in einem vorhergehenden Abschnitt das <a href="#set_node_env_to_production">Setzen von NODE_ENV auf 'production'</a> benötigen, um unsere Leistung zu verbessern und weniger ausführliche Fehlermeldungen zu generieren. Wir tun dies im selben Datei, in der wir die <code>MONGODB_URI</code>-Variable gesetzt haben.</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 lokale Bibliotheksanwendung ist nun für die Produktion eingerichtet und konfiguriert. Sie können Daten über die Benutzeroberfläche der Website hinzufügen, und sie sollte genauso funktionieren wie während der Entwicklung (wenn auch mit weniger auf Debugging bezogenen Informationen bei ungültigen Seiten). </p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie nur einige Daten zum Testen hinzufügen möchten, können Sie das <code>populatedb</code>-Skript verwenden (mit Ihrer MongoDB-Produktionsdatenbank-URL), wie in dem Abschnitt <a href="/de/docs/Learn/Server-side/Express_Nodejs/mongoose#testing_%E2%80%94_create_some_items">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose) Testen — einige Einträge 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 ermöglicht effektives Debuggen. Einige der Dinge, die Sie tun können, sind: </p> <ul> <li>Wählen Sie die Log-Schaltfläche unten in der Bearbeitungsansicht aus, um Log-Informationen von Ihrem Server zu sehen, wie z.B. die Konsolenlogausgabe.</li> <li> Wählen Sie die Terminal-Schaltfläche unten in der Bearbeitungsansicht aus, um ein Terminal in der Hosting-Umgebung zu öffnen. Sie können dies verwenden, um Befehle und Tools in der Umgebung wie auf Ihrer lokalen Maschine auszuführen. Zum Beispiel könnten Sie <code>node -v</code> verwenden, um die Node-Version zu überprüfen. </li> <li>Interaktives Debuggen in VS Code mit 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 man <em>LocalLibrary</em> auf <a href="https://railway.app/" class="external" target="_blank">Railway</a> installiert.</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 vollständig kostenlosen Starter-Tarif mehr. Wir haben diese Anweisungen beibehalten, weil Railway einige großartige Funktionen hat und für einige Benutzer eine 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 tun müssen. Sich nicht um Server, Lastverteiler, Reverse Proxies usw. sorgen zu müssen, macht es viel einfacher zu beginnen. </li> <li>Railway hat einen <a href="https://docs.railway.app/maturity/compare-to-heroku" class="external" target="_blank">Fokus auf die Entwicklererfahrung von Entwicklung und Bereitstellung</a>, was zu einer schnelleren und weicheren Lernkurve als bei vielen anderen Alternativen führt.</li> <li> Die Fähigkeiten und Konzepte, die Sie bei der Nutzung von Railway lernen werden, sind übertragbar. Auch wenn Railway einige hervorragende neue Funktionen hat, verwenden 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, ist die Preisgestaltung 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 <a href="#einen_hosting-anbieter_w%C3%A4hlen">Ihre eigene Website 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 einem eigenen isolierten und unabhängigen virtualisierten Container ausgeführt. Um Ihre Anwendung auszuführen, benötigt Railway die Möglichkeit, die entsprechende 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 basierend auf ihrer Verwendung von "üblichen 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 Paketmanager für den Aufbau aus der "Lock"-Datei bestimmen. Zum Beispiel, wenn die Anwendung die Datei <strong>package-lock.json</strong> enthält, weiß Railway, dass <em>npm</em> verwendet wird, um die Pakete zu installieren, während es, wenn es <strong>yarn.lock</strong> findet, weiß, dass <em>yarn</em> verwendet wird. Nachdem alle Abhängigkeiten installiert wurde, wird Railway nach Skripten namens "build" und "start" in der Paketdatei suchen und diese zum Bauen und Ausführen des Codes verwenden. </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 wurden. Sie müssen nichts weiter für dieses Tutorial wissen, aber Sie können mehr über Optionen für die Bereitstellung von Node-Anwendungen in <a href="https://nixpacks.com/docs/providers/node" class="external" target="_blank">Nixpacks Node</a> erfahren. </p> </div> <p> Sobald die Anwendung läuft, kann sie sich mit Informationen aus <a href="https://docs.railway.app/guides/variables" class="external" target="_blank">Umgebungsvariablen</a> konfigurieren. Zum Beispiel muss eine Anwendung, die eine Datenbank verwendet, die Adresse mit einer Variablen erhalten. Der Datenbankdienst kann selbst 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. Mit dem CLI können Sie ein lokales GitHub-Repository mit einem Railway-Projekt verknüpfen, das Repository vom lokalen Branch auf die Live-Site hochladen, die Protokolle des laufenden Prozesses anzeigen, Konfigurationsvariablen setzen und abrufen und vieles mehr. Einer 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 der Überblick, den Sie brauchen, um die App bei Railway bereitzustellen. Als Nächstes werden wir ein Railway-Konto einrichten, unsere Website und eine Datenbank installieren und den Railway-Client ausprobieren. </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 zuerst 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>Login</strong> Link in der oberen Symbolleiste.</li> <li>Wählen Sie GitHub im Popup, um sich mit Ihren GitHub-Anmeldeinformationen anzumelden.</li> <li>Wenn möglich, sollten Sie Ihre E-Mail überprüfen und bestätigen.</li> <li>Sie werden dann in das Railway.app-Dashboard eingeloggt: <a href="https://railway.app/dashboard" class="external" target="_blank">https://railway.app/dashboard</a>.</li> </ul></div></section><section aria-labelledby="bereitstellung_auf_railway_von_github"><h3 id="bereitstellung_auf_railway_von_github"><a href="#bereitstellung_auf_railway_von_github">Bereitstellung auf Railway von GitHub</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 <strong>Dashboard</strong> Option aus dem Hauptmenü der Seite und wählen Sie dann die <strong>Neues Projekt</strong> Schaltfläche: </p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_new_project_button.png" alt="Railway-Website-Dashboard mit Hervorhebung der 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 aus einer Vorlage in Ihrem GitHub-Konto zu erstellen, und einer Reihe von Datenbanken. Wählen Sie <strong>Von GitHub-Repo bereitstellen</strong>. </p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_new_project_button_deploy_github_repo.png" alt="Railway-Popup, das Bereitstellungsoptionen mit hervorgehobener Option "Von GitHub-Repo bereitstellen" zeigt" width="521" height="571" loading="lazy"> </p> <p> Alle Projekte in den GitHub-Repos, die Sie bei der Einrichtung mit Railway geteilt haben, werden angezeigt. Wählen Sie Ihr GitHub-Repository für die lokale Bibliothek: <code><benutzername>/express-locallibrary-tutorial</code>. </p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_new_project_button_deploy_github_selectrepo.png" alt="Railway-Popup, das GitHub-Repos zeigt, die bereitgestellt werden können" width="542" height="442" loading="lazy"> </p> <p>Bestätigen Sie Ihre Bereitstellung, indem Sie <strong>Jetzt bereitstellen</strong> auswählen.</p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_new_project_deploy_confirm.png" alt="Bildschirm mit Bestätigunssoption zur Bereitstellung des Projekts" width="526" height="380" loading="lazy"> </p> <p> Railway wird dann Ihr Projekt laden und bereitstellen und Fortschritte auf der Registerkarte "Bereitstellungen" anzeigen. Wenn die Bereitstellung erfolgreich abgeschlossen ist, sehen Sie einen Bildschirm wie den unten gezeigten. </p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_project_deploy.png" alt="Railway-Dashboard, das die Registerkarte "Bereitstellungen" für das bereitgestellte Projekt zeigt" 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/Server-side/Express_Nodejs/deployment/railway_project_generate_domain.png" alt="Railway-Projekteinstellungen-Tab mit Schaltfläche zum Generieren einer Domain hervorgehoben" width="696" height="435" loading="lazy"> </p> <p>Dies wird die Seite veröffentlichen und die Domain anstelle der Schaltfläche anzeigen, wie unten gezeigt.</p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_project_domain.png" alt="Railway-Projekteinstellungen-Tab mit Link zur lokalen Bibliotheksseite" width="509" height="197" loading="lazy"> </p> <p> Wählen Sie die Domain-URL aus, um Ihre Bibliotheksanwendung zu öffnen. Da wir keine Produktionsdatenbank angegeben haben, wird die lokale Bibliothek mit Ihren Entwicklungsdaten geöffnet. </p></div></section><section aria-labelledby="eine_mongodb-datenbank_bereitstellen_und_verbinden"><h3 id="eine_mongodb-datenbank_bereitstellen_und_verbinden"><a href="#eine_mongodb-datenbank_bereitstellen_und_verbinden">Eine MongoDB-Datenbank bereitstellen und verbinden</a></h3><div class="section-content"><p> Anstatt unsere Entwicklungsdaten zu verwenden, wollen wir als nächstes eine Produktions-MongoDB-Datenbank erstellen. Wir werden die Datenbank als Teil des Railway-Anwendungsprojekts erstellen, obwohl Sie nichts daran hindert, eine in einem eigenen separaten Projekt oder tatsächlich eine <em>MongoDB Atlas</em>-Datenbank für Produktionsdaten zu erstellen, genauso wie Sie es für die Entwicklungsdatenbank getan haben. </p> <p> Auf Railway, wählen Sie die <strong>Dashboard</strong> Option im Hauptmenü der Seite und wählen Sie dann Ihr Anwendungsprojekt. Zu diesem Zeitpunkt enthält es nur einen einzelnen Dienst für Ihre Anwendung (dies kann ausgewählt werden, um Variablen und andere Details des Dienstes festzulegen). Wählen Sie die <strong>Neu</strong> Schaltfläche, die verwendet wird, um Dienste zum aktuellen Projekt hinzuzufügen. </p> <p> <img src="/de/docs/Learn/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 <strong>Datenbank</strong>, wenn Sie nach dem Typ des hinzuzufügenden Dienstes gefragt werden.</p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_database_add.png" alt="Railway-Popup, das Optionen für einen neuen Dienst zeigt, wie Datenbank, GitHub-Repo, leeren Dienst und so weiter" width="512" height="285" loading="lazy"> </p> <p>Dann wählen Sie <strong>MongoDB hinzufügen</strong>, um die Datenbank hinzuzufügen</p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_database_select_type.png" alt="Railway-Popup, das verschiedene Datenbanken zeigt, die ausgewählt werden können: Postgres, MySQL, MongoDB und so weiter" width="518" height="333" loading="lazy"> </p> <p> Railway wird dann einen Dienst mit einer leeren Datenbank im selben Projekt bereitstellen. Nach Abschluss sehen Sie nun in der Projektansicht sowohl die Anwendungs- als auch die Datenbankdienste. </p> <p> <img src="/de/docs/Learn/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/Server-side/Express_Nodejs/deployment/railway_mongodb_connect.png" alt="Railway-Datenbankeinstellungen-Bildschirm, der die zum Verbinden mit der Datenbank erforderliche URL zeigt" width="1842" height="750" loading="lazy"> </p> <p> Um dies für die Bibliotheksanwendung zugänglich zu machen, müssen wir es über eine Umgebungsvariable zum Anwendungsprozess hinzufügen. Öffnen Sie zuerst den Anwendungsdienst. Dann wählen Sie 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="#datenbankkonfiguration">wir die Anwendung konfigurierten</a>, um die Datenbankadresse zu lesen). Dies wird ähnlich wie der unten gezeigte Bildschirm aussehen. </p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_variables_database_url.png" alt="Railway-Website-Variablenscreen während der Eingabe der MONGODB_URI-Variablen und Adresse" width="1016" height="400" loading="lazy"> </p> <p>Wählen Sie <strong>Hinzufügen</strong>, um die Variable hinzuzufügen.</p> <p>Railway startet Ihre App neu, wenn sie Variablen aktualisiert. Wenn Sie die Startseite jetzt überprüfen, sollte sie null Werte für Ihre Objektanzahlen anzeigen, da die obigen Änderungen bedeuten, dass wir jetzt 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, dass wir in einem vorhergehenden Abschnitt das <a href="#set_node_env_to_production">Setzen von NODE_ENV auf 'production'</a> benötigen, um unsere Leistung zu verbessern und weniger ausführliche Fehlermeldungen zu generieren. Wir können dies im selben Bildschirm wie die <code>MONGODB_URI</code>-Variable setzen.</p> <p> Öffnen Sie den Anwendungsdienst. Wählen Sie dann die Registerkarte <em>Variablen</em>, wo Sie sehen können, 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/Server-side/Express_Nodejs/deployment/railway_variables_new.png" alt="Railway-Variablenregisterkarte mit hervorgehobener neuer Variablen-Schaltfläche" width="1005" height="386" loading="lazy"> </p> <p> Geben Sie <code>NODE_ENV</code> als Name für die neue Variable ein und <code>production</code> als Name der Umgebung. Dann drücken Sie die <strong>Hinzufügen</strong> Schaltfläche. </p> <p> <img src="/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_variables_new_node_env.png" alt="Railway-Variablenregisterkarte mit neuer NODE_ENV-Variable, die auf 'production' gesetzt wird" width="706" height="379" loading="lazy"> </p> <p> Die lokale Bibliotheksanwendung ist nun für die Produktion eingerichtet und konfiguriert. Sie können Daten über die Benutzeroberfläche der Website hinzufügen, und sie sollte in der gleichen Weise funktionieren, wie sie während der Entwicklung tat (wenn auch mit weniger Debug-Informationen für ungültige Seiten). </p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie nur einige Daten für Tests hinzufügen möchten, können Sie das <code>populatedb</code>-Skript (mit Ihrer MongoDB-Produktionsdatenbank-URL) verwenden, wie in dem Abschnitt <a href="/de/docs/Learn/Server-side/Express_Nodejs/mongoose#testing_%E2%80%94_create_some_items">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose) Testen — einige Einträge 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 die Bereitstellung des aktuellen Verzeichnisses Ihres Computers für ein zugeordnetes Railway-Projekt (ohne dass Sie es auf GitHub hochladen müssen) und das lokale Ausführen Ihres Projekts mit denselben Einstellungen wie auf dem Produktionsserver. </p> <p>Sie können eine Liste aller möglichen Befehle anzeigen, indem Sie Folgendes in einem 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, um das Ende von Logs anzuzeigen (ein ausführlicheres Log ist auf der Seite für jedes Projekt 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 zur Einrichtung von Express-Apps in der Produktion und auch das Ende der Reihe von Tutorials zum Arbeiten mit Express. Wir hoffen, dass Sie sie nützlich gefunden haben. Sie können eine vollständig durchgearbeitete Version des <a href="https://github.com/mdn/express-locallibrary-tutorial" class="external" target="_blank">Quellcodes auf GitHub hier</a> überprüfen.</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">Production best practices: performance and reliability</a> (Express-Dokumentationen)</p> </li> <li> <p><a href="https://expressjs.com/en/advanced/best-practice-security.html" class="external" target="_blank">Production Best Practices: Security</a> (Express-Dokumentationen)</p> </li> <li> <p>Railway-Dokumentationen</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-Dokumentationen)</li> <li><a href="https://devcenter.heroku.com/articles/deploying-nodejs" class="external" target="_blank">Deploying Node.js Applications on Heroku</a> (Heroku-Dokumentationen)</li> <li><a href="https://devcenter.heroku.com/articles/nodejs-support" class="external" target="_blank">Heroku Node.js Support</a> (Heroku-Dokumentationen)</li> <li><a href="https://devcenter.heroku.com/articles/node-concurrency" class="external" target="_blank">Optimizing Node.js Application Concurrency</a> (Heroku-Dokumentationen)</li> <li><a href="https://devcenter.heroku.com/articles/how-heroku-works" class="external" target="_blank">How Heroku works</a> (Heroku-Dokumentationen)</li> <li><a href="https://devcenter.heroku.com/articles/dynos" class="external" target="_blank">Dynos and the Dyno Manager</a> (Heroku-Dokumentationen)</li> <li><a href="https://devcenter.heroku.com/articles/config-vars" class="external" target="_blank">Configuration and Config Vars</a> (Heroku-Dokumentationen)</li> <li><a href="https://devcenter.heroku.com/articles/limits" class="external" target="_blank">Limits</a> (Heroku-Dokumentationen)</li> </ul> </li> </ul><ul class="prev-next"> <li><a class="button secondary" href="/de/docs/Learn/Server-side/Express_Nodejs/forms"><span class="button-wrap"> Zurück </span></a></li> <li><a class="button secondary" href="/de/docs/Learn/Server-side/Express_Nodejs"><span class="button-wrap"> Übersicht: Express-Webframework (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/server-side/express_nodejs/deployment/index.md?plain=1" title="Folder: de/learn/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%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%2Fserver-side%2Fexpress_nodejs%2Fdeployment%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn%2FServer-side%2FExpress_Nodejs%2Fdeployment%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Flearn%2Fserver-side%2Fexpress_nodejs%2Fdeployment%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2Fnull%0A*+Document+last+modified%3A+*date+not+known*%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://mozilla.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 width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></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–2024 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/Server-side/Express_Nodejs/deployment","doc":{"isMarkdown":true,"isTranslated":true,"isActive":true,"flaws":{},"title":"Express-Tutorial Teil 7: Bereitstellung für die Produktion","mdn_url":"/de/docs/Learn/Server-side/Express_Nodejs/deployment","locale":"de","native":"Deutsch","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Learn/Getting_started_with_the_web\">Komplette Anfänger beginnen hier!</a></li><li><details><summary>Erste Schritte mit dem Web</summary><ol><li><a href=\"/de/docs/Learn/Getting_started_with_the_web\">Einführung ins Web</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">Installation von grundlegender Software</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like\">Wie wird Ihre Website aussehen?</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">Umgang mit Dateien</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/HTML_basics\">HTML-Grundlagen</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/CSS_basics\">CSS-Grundlagen</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics\">JavaScript-Grundlagen</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/Publishing_your_website\">Veröffentlichung Ihrer Website</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/How_the_Web_works\">Wie das Web funktioniert</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/HTML\">HTML — Strukturierung des Webs</a></li><li><details><summary>Einführung in HTML</summary><ol><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML\">Einführung in HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Erste Schritte mit HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\">Was ist im Kopfbereich? Metadaten in HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">Grundlagen des HTML-Textes</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">Erstellen von Hyperlinks</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting\">Erweiterte Textformatierung</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure\">Struktur eines Dokuments und einer Website</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML\">Debugging HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter\">Markierung eines Briefes</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content\">Die Strukturierung einer Seite mit Inhalt</a></li></ol></details></li><li><details><summary>Multimedia und Einbettung</summary><ol><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding\">Multimedia und Einbettung</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">Bilder in HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content\">Video- und Audioinhalte</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies\">Von Objekt zu iframe — andere Einbettungstechnologien</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web\">Vektorgrafiken zum Web hinzufügen</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\">Responsive Images</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page\">Mozilla Splash-Seite</a></li></ol></details></li><li><details><summary>HTML-Tabellen</summary><ol><li><a href=\"/de/docs/Learn/HTML/Tables\">HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn/HTML/Tables/Basics\">HTML Table Grundlagen</a></li><li><a href=\"/de/docs/Learn/HTML/Tables/Advanced\">Erweiterte Funktionen und Barrierefreiheit von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn/HTML/Tables/Structuring_planet_data\">Strukturierung von Planeten-Daten</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/CSS\">CSS — Gestaltung des Webs</a></li><li><details><summary>CSS erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/CSS/First_steps\">Erste Schritte mit CSS</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/What_is_CSS\">Was ist CSS?</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/Getting_started\">Einstieg in CSS</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/How_CSS_is_structured\">Wie CSS strukturiert ist</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/How_CSS_works\">Wie CSS funktioniert</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/Styling_a_biography_page\">Eine Biografieseite stylen</a></li></ol></details></li><li><details><summary>CSS-Bausteine</summary><ol><li><a href=\"/de/docs/Learn/CSS/Building_blocks\">CSS-Grundbausteine</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors\">CSS-Selektoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors\">Typ-, Klassen- und ID-Selektoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors\">Attributselektoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements\">Pseudo-Klassen und Pseudo-Elemente</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Combinators\">Kombinatoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance\">Kaskade, Spezifität und Vererbung</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Cascade_layers\">Kaskadenschichten</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/The_box_model\">Das Boxmodell</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders\">Hintergründe und Rahmen</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Handling_different_text_directions\">Umgang mit unterschiedlichen Textausrichtungen</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Overflowing_content\">Überlaufender Inhalt</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Values_and_units\">CSS-Werte und Einheiten</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS\">Größe von Elementen in CSS</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Images_media_form_elements\">Bilder, Medien und Formularelemente</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Styling_tables\">Tabellen stylen</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Advanced_styling_effects\">Erweiterte Styling-Effekte</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Organizing\">Organisieren Ihres CSS</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension\">Grundlegendes CSS-Verständnis</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper\">Erstellen von stilvollem Briefpapier</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/A_cool_looking_box\">Eine cool aussehende Box</a></li></ol></details></li><li><details><summary>Textgestaltung</summary><ol><li><a href=\"/de/docs/Learn/CSS/Styling_text\">CSS Textgestaltung</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Fundamentals\">Grundlegende Text- und Schriftgestaltung</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Styling_lists\">Listen stilisieren</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Styling_links\">Styling von Links</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Web_fonts\">Web-Fonts</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Typesetting_a_homepage\">Setzen einer Community-Schul-Startseite</a></li></ol></details></li><li><details><summary>CSS-Layout</summary><ol><li><a href=\"/de/docs/Learn/CSS/CSS_layout\">CSS-Layout</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Introduction\">Einführung in CSS Layout</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Normal_Flow\">Normaler Fluss</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Grids\">Raster</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Floats\">Floats</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Positioning\">Positioning</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Multiple-column_Layout\">Mehrspaltiges Layout</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Responsive_Design\">Responsives Design</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Media_queries\">Einsteigerleitfaden für Media Queries</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods\">Legacy-Layout-Methoden</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers\">Unterstützung älterer Browser</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension\">Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/JavaScript\">JavaScript — Dynamisches clientseitiges Skripting</a></li><li><details><summary>JavaScript erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/First_steps\">JavaScript erste Schritte</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/What_is_JavaScript\">Was ist JavaScript?</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/A_first_splash\">Ein erster Sprung in JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/What_went_wrong\">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Variables\">Speichern der benötigten Informationen — Variablen</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Math\">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Strings\">Umgang mit Text — Strings in JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Useful_string_methods\">Nützliche String-Methoden</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Arrays\">Arrays</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Silly_story_generator\">Silly Story Generator</a></li></ol></details></li><li><details><summary>JavaScript-Bausteine</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks\">JavaScript-Bausteine</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/conditionals\">Entscheidungen in Ihrem Code treffen — Bedingte Anweisungen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Looping_code\">Schleifen-Code</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Functions\">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Build_your_own_function\">Erstellen Sie Ihre eigene Funktion</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Return_values\">Funktionsrückgabewerte</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Events\">Einführung in Ereignisse</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Event_bubbling\">Event bubbling</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Image_gallery\">Bildgalerie</a></li></ol></details></li><li><details><summary>Einführung in JavaScript-Objekte</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Objects\">Einführung in JavaScript-Objekte</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Basics\">JavaScript Objekt Grundlagen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Object_prototypes\">Objektprototypen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Object-oriented_programming\">Objektorientierte Programmierung</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Classes_in_JavaScript\">Klassen in JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/JSON\">Arbeiten mit JSON</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Object_building_practice\">Objekt-Baupraxis</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features\">Hinzufügen von Funktionen zu unserem hüpfenden Kugeln-Demo</a></li></ol></details></li><li><details><summary>Asynchrones JavaScript</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous\">Asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Introducing\">Einführung in asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Promises\">Anleitung zur Verwendung von Promises</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API\">Anleitung zur Implementierung einer Promise-basierten API</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Introducing_workers\">Einführung in Workers</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Sequencing_animations\">Sequenzierung von Animationen</a></li></ol></details></li><li><details><summary>Client-seitige Web-APIs</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs\">Client-Side-Web-APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">Einführung in Web-APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents\">Manipulating documents</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data\">Abrufen von Daten vom Server</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs\">Third-party APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics\">Grafiken zeichnen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs\">Video- und Audio-APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage\">Client-side storage</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Forms\">Webformulare — Arbeiten mit Benutzerdaten</a></li><li><details><summary>Grundlagen der Webformulare</summary><ol><li><a href=\"/de/docs/Learn/Forms\">Bausteine für Webformulare</a></li><li><a href=\"/de/docs/Learn/Forms/Your_first_form\">Ihr erstes Formular</a></li><li><a href=\"/de/docs/Learn/Forms/How_to_structure_a_web_form\">Wie Sie ein Webformular strukturieren</a></li><li><a href=\"/de/docs/Learn/Forms/Basic_native_form_controls\">Basis-Native Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/HTML5_input_types\">Die HTML5 input Typen</a></li><li><a href=\"/de/docs/Learn/Forms/Other_form_controls\">Andere Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/Styling_web_forms\">Styling von Webformularen</a></li><li><a href=\"/de/docs/Learn/Forms/Advanced_form_styling\">Erweiterte Formular-Stilgestaltung</a></li><li><a href=\"/de/docs/Learn/Forms/UI_pseudo-classes\">UI-Pseudo-Klassen</a></li><li><a href=\"/de/docs/Learn/Forms/Form_validation\">Client-seitige Formularvalidierung</a></li><li><a href=\"/de/docs/Learn/Forms/Sending_and_retrieving_form_data\">Senden von Formulardaten</a></li></ol></details></li><li><details><summary>Erweiterte Techniken für Webformulare</summary><ol><li><a href=\"/de/docs/Learn/Forms/How_to_build_custom_form_controls\">Anleitung zur Erstellung benutzerdefinierter Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/Sending_forms_through_JavaScript\">Versenden von Formularen über JavaScript</a></li><li><a href=\"/de/docs/Learn/Forms/Property_compatibility_table_for_form_controls\">CSS-Eigenschaftskompatibilitätstabelle für Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/HTML_forms_in_legacy_browsers\">HTML-Formulare in älteren Browsern</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Accessibility\">Barrierefreiheit — Das Web für alle nutzbar machen</a></li><li><details><summary>Barrierefreiheitsleitfäden</summary><ol><li><a href=\"/de/docs/Learn/Accessibility\">Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Accessibility/What_is_accessibility\">Was ist Barrierefreiheit?</a></li><li><a href=\"/de/docs/Learn/Accessibility/HTML\">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Accessibility/CSS_and_JavaScript\">CSS und JavaScript: Barrierefreiheits-Best Practices</a></li><li><a href=\"/de/docs/Learn/Accessibility/WAI-ARIA_basics\">Grundlagen von WAI-ARIA</a></li><li><a href=\"/de/docs/Learn/Accessibility/Multimedia\">Barrierefreie Multimedia</a></li><li><a href=\"/de/docs/Learn/Accessibility/Mobile\">Barrierefreiheit auf Mobilgeräten</a></li><li><a href=\"/de/docs/Learn/Accessibility/Accessibility_troubleshooting\">Bewertung: Barrierefreiheits-Troubleshooting</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Performance\">Leistung — Websites schnell und reaktionsschnell machen</a></li><li><details><summary>Leitfäden zur Leistung</summary><ol><li><a href=\"/de/docs/Learn/Performance\">Webleistung</a></li><li><a href=\"/de/docs/Learn/Performance/why_web_performance\">Der 'Warum' der Web-Performance</a></li><li><a href=\"/de/docs/Learn/Performance/What_is_web_performance\">Was ist Web-Performance?</a></li><li><a href=\"/de/docs/Learn/Performance/Perceived_performance\">Wahrgenommene Leistung</a></li><li><a href=\"/de/docs/Learn/Performance/Measuring_performance\">Messung der Performance</a></li><li><a href=\"/de/docs/Learn/Performance/Multimedia\">Multimedia: Bilder</a></li><li><a href=\"/de/docs/Learn/Performance/video\">Multimedia: Video</a></li><li><a href=\"/de/docs/Learn/Performance/JavaScript\">JavaScript-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn/Performance/HTML\">HTML-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn/Performance/CSS\">CSS-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn/Performance/business_case_for_performance\">Der geschäftliche Nutzen von Web-Performance</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/MathML\">MathML — Schreiben von Mathematik mit MathML</a></li><li><details><summary>MathML erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/MathML/First_steps\">Erste Schritte mit MathML</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Getting_started\">Erste Schritte mit MathML</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Text_containers\">MathML Text-Container</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Fractions_and_roots\">MathML-Brüche und -Wurzeln</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Scripts\">MathML gescriptete Elemente</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Tables\">MathML-Tabellen</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas\">Drei berühmte mathematische Formeln</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/../Games\">Spiele — Entwicklung von Spielen für das Web</a></li><li><details><summary>Anleitungen und Tutorials</summary><ol><li><a href=\"/de/docs/Games/Introduction\">Einführung in die Spieleentwicklung für das Web</a></li><li><a href=\"/de/docs/Games/Techniques\">Techniken für die Spieleentwicklung</a></li><li><a href=\"/de/docs/Games/Tutorials\">Tutorials</a></li><li><a href=\"/de/docs/Games/Publishing_games\">Publishing Games</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Tools_and_testing\">Werkzeuge und Tests</a></li><li><details><summary>Client-seitige Webentwicklungstools</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools\">Verständnis von Client-seitigen Webentwicklungstools</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview\">Übersicht über clientseitige Werkzeuge</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">Crashkurs zur Kommandozeile</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management\">Grundlagen des Paketmanagements</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain\">Einführung in eine vollständige Toolchain</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment\">Bereitstellung unserer App</a></li></ol></details></li><li><details><summary>Einführung in client-seitige Frameworks</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction\">Einführung in client-seitige Frameworks</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features\">Hauptmerkmale von Frameworks</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\">Erste Schritte mit React</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning\">Beginn unserer React-Task-Liste</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components\">Komponentisieren unserer React-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state\">React-Interaktivität: Ereignisse und Status</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering\">React Interaktivität: Bearbeiten, Filtern, bedingtes Rendering</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility\">Accessibility in React</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources\">React-Ressourcen</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started\">Einstieg in Ember</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization\">Ember App-Struktur und Komponentisierung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state\">Ember-Interaktivität: Events, Klassen und Zustand</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer\">Ember Interaktivität: Footer-Funktionalität, bedingtes Rendering</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing\">Routing in Ember</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources\">Ember-Ressourcen und Fehlerbehebung</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started\">Einstieg in Vue</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component\">Erstellen unserer ersten Vue-Komponente</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists\">Rendering einer Liste von Vue-Komponenten</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models\">Hinzufügen eines neuen Todo-Formulars: Vue-Ereignisse, Methoden und Modelle</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling\">Styling von Vue-Komponenten mit CSS</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties\">Verwendung von Vue computed properties</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering\">Vue bedingte Darstellung: Bearbeitung bestehender Todos</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management\">Vue-Refs und Lifecycle-Methoden zur Fokusverwaltung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources\">Vue-Ressourcen</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started\">Erste Schritte mit Svelte</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning\">Starten unserer Svelte-Tasklisten-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props\">Dynamisches Verhalten in Svelte: Arbeiten mit Variablen und Props</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components\">Komponentisierung unserer Svelte-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility\">Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores\">Arbeiten mit Svelte Stores</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript\">TypeScript-Unterstützung in Svelte</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next\">Bereitstellung und nächste Schritte</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started\">Erste Schritte mit Angular</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning\">Anfang unserer Angular-To-Do-Liste-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling\">Styling unserer Angular-Anwendung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component\">Erstellen einer Item-Komponente</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering\">Filtern unserer To-Do-Elemente</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building\">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git und GitHub</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/GitHub\">Git und GitHub</a></li></ol></details></li><li><details><summary>Cross-Browser-Tests</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing\">Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">Einführung in das Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies\">Strategien zur Durchführung von Tests</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS\">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript\">Umgang mit häufigen JavaScript-Problemen</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility\">Umgang mit häufigen Problemen der Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\">Implementierung von Feature-Erkennung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\">Einführung in automatisiertes Testen</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment\">Einrichten Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Server-side\">Server-seitige Webprogrammierung</a></li><li><details><summary>Erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/Server-side/First_steps\">Server-seitige Website-Programmierung: Erste Schritte</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Introduction\">Einführung in die serverseitige Programmierung</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Client-Server_overview\">Überblick über Client-Server</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Web_frameworks\">Serverseitige Web-Frameworks</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Website_security\">Website-Sicherheit</a></li></ol></details></li><li><details><summary>Django Web-Framework (Python)</summary><ol><li><a href=\"/de/docs/Learn/Server-side/Django\">Django Web Framework (Python)</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Introduction\">Einführung in Django</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/development_environment\">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Tutorial_local_library_website\">Django-Tutorial: Die Local Library Website</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/skeleton_website\">Django-Tutorial Teil 2: Erstellung einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Models\">Django-Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Admin_site\">Django Tutorial Teil 4: Django Admin-Seite</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Home_page\">Django-Tutorial Teil 5: Erstellen unserer Startseite</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Generic_views\">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Sessions\">Django-Tutorial Teil 7: Sessions-Framework</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Authentication\">Django-Tutorial Teil 8: Benutzer-Authentifizierung und Berechtigungen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Forms\">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Testing\">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Deployment\">Django-Tutorial Teil 11: Django in Produktion bereitstellen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/web_application_security\">Django-Webanwendungssicherheit</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/django_assessment_blog\">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li><details open=\"\"><summary>Express Web-Framework (Node.js/JavaScript)</summary><ol><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs\">Express-Webframework (Node.js/JavaScript)</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Introduction\">Einführung in Express/Node</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/development_environment\">Einrichtung einer Node-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express-Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/skeleton_website\">Express Tutorial Teil 2: Erstellung einer Grundstruktur für eine Website</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/mongoose\">Express Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/routes\">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/forms\">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><em><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment\" aria-current=\"page\">Express-Tutorial Teil 7: Bereitstellung für die Produktion</a></em></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Common_questions\">Weitere Ressourcen</a></li><li><details><summary>Häufige Fragen</summary><ol><li><a href=\"/de/docs/Learn/Common_questions\">Häufige Fragen</a></li><li><a href=\"/de/docs/Learn/HTML/Howto\">HTML verwenden, um häufige Probleme zu lösen</a></li><li><a href=\"/de/docs/Learn/CSS/Howto\">CSS verwenden, um häufige Probleme zu lösen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Howto\">Lösen Sie häufige Probleme in Ihrem JavaScript-Code</a></li><li><a href=\"/de/docs/Learn/Common_questions/Web_mechanics\">Web-Mechanik</a></li><li><a href=\"/de/docs/Learn/Common_questions/Tools_and_setup\">Tools und Einrichtung</a></li><li><a href=\"/de/docs/Learn/Common_questions/Design_and_accessibility\">Design und Barrierefreiheit</a></li></ol></details></li></ol>","sidebarMacro":"LearnSidebar","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Server-side/Express_Nodejs/forms\"><span class=\"button-wrap\"> Zurück </span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Server-side/Express_Nodejs\"><span class=\"button-wrap\"> Übersicht: Express-Webframework (Node.js/JavaScript)</span></a></li>\n \n</ul>\n<p>Nachdem Sie nun eine großartige <a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website\">LocalLibrary</a> Webseite erstellt (und getestet) haben, möchten Sie sie wahrscheinlich auf einem öffentlichen Webserver installieren, damit Bibliothekspersonal und Mitglieder über das Internet darauf zugreifen können. Dieser Artikel bietet einen Überblick darüber, wie Sie möglicherweise einen Hoster finden, um Ihre Website bereitzustellen, und was Sie tun müssen, um Ihre Seite für die Produktion vorzubereiten.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Voraussetzungen:</th>\n <td>Schließen Sie alle vorherigen Tutorials ab, einschließlich <a href=\"/de/docs/Learn/Server-side/Express_Nodejs/forms\">Express-Tutorial Teil 6: Arbeiten mit Formularen</a>.</td>\n </tr>\n <tr>\n <th scope=\"row\">Ziel:</th>\n <td>Lernen, wo und wie man eine Express-App für die Produktion bereitstellen kann.</td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"überblick","title":"Überblick","isH3":false,"content":"<p>Sobald Ihre Website fertig ist (oder \"genug\" fertig, um mit dem öffentlichen Test zu beginnen), müssen Sie sie auf einem öffentlich zugänglicheren und zugänglicheren Ort als Ihrem persönlichen Entwicklungscomputer hosten.</p>\n<p>Bisher haben Sie in einer <a href=\"/de/docs/Learn/Server-side/Express_Nodejs/development_environment\">Entwicklungsumgebung</a> gearbeitet, Express/Node als Webserver verwendet, um Ihre Website an den lokalen Browser/das Netzwerk freizugeben, und Ihre Website mit (unsicheren) Entwicklungseinstellungen betrieben, die Debuginformationen und andere private Informationen offenlegen. Bevor Sie eine Webseite extern hosten können, müssen Sie zunächst:</p>\n<ul>\n <li>Eine Umgebung zum Hosten der Express-App wä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 bei der Auswahl einer Hosting-Site, einen kurzen Überblick über das, was Sie tun müssen, um Ihre Express-App für die Produktion vorzubereiten, und ein funktionierendes Beispiel, wie Sie die LocalLibrary-Website auf dem <a href=\"https://railway.app/\" class=\"external\" target=\"_blank\">Railway-Cloud-Hosting-Service</a> installieren können.</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 Servercomputer bereitgestellt wird, auf dem Sie Ihre Website für den externen Zugriff betreiben. Die Umgebung umfasst:</p>\n<ul>\n <li>Computer-Hardware, auf der die Website ausgeführt wird.</li>\n <li>Betriebssystem (z.B. Linux oder Windows).</li>\n <li>Laufzeitumgebung der Programmiersprache und Framework-Bibliotheken, auf denen Ihre Website geschrieben ist.</li>\n <li>Webserver-Infrastruktur, möglicherweise einschließlich eines Webservers, Reverse-Proxy, Lastverteilers usw.</li>\n <li>Datenbanken, von denen Ihre Website abhängig ist.</li>\n</ul>\n<p>Der Servercomputer könnte sich auf Ihrem Gelände befinden und über eine schnelle Verbindung mit dem Internet verbunden sein, aber es ist viel gebräuchlicher, einen Computer zu verwenden, der „in der Cloud“ gehostet wird. Das bedeutet, dass Ihr Code auf einem entfernten Computer (oder möglicherweise einem „virtuellen“ Computer) im Rechenzentrum Ihres Hosting-Unternehmens ausgeführt wird. Der entfernte Server bietet in der Regel ein garantiertes Maß an Rechenressourcen (z.B. CPU, RAM, Speicherkapazität usw.) und Internetverbindung zum bestimmten Preis.</p>\n<p>Diese Art von remote zugänglicher Rechner-/Netzwerkhardware wird als <em>Infrastructure as a Service (IaaS)</em> bezeichnet. Viele IaaS-Anbieter bieten Optionen an, ein bestimmtes Betriebssystem vorzuinstallieren, auf dem Sie die anderen Komponenten Ihrer Produktionsumgebung installieren müssen. Andere Anbieter ermöglichen es Ihnen, funktionsreichere Umgebungen auszuwählen, die möglicherweise eine vollständige Node-Einrichtung umfassen.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Vorgefertigte Umgebungen können das Einrichten Ihrer Website sehr einfach machen, da sie die Konfiguration reduzieren. Die vorhandenen Optionen können jedoch dazu führen, dass Sie auf einen unbekannten Server (oder andere Komponenten) beschränkt sind und möglicherweise 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, eine Idee haben, wo Sie anfangen sollen!</p>\n</div>\n<p>Andere Hosting-Anbieter unterstützen Express im Rahmen eines <em>Platform as a Service</em> (<em>PaaS</em>)-Angebots. Bei dieser Art des Hostings müssen Sie sich nicht um den größten Teil Ihrer Produktionsinfrastruktur (Server, Lastverteiler usw.) kümmern, da die Hostplattform diese für Sie erledigt. Dies macht die Bereitstellung recht einfach, da Sie sich nur auf Ihre Webanwendung und nicht auf andere Serverinfrastruktur konzentrieren müssen.</p>\n<p>Einige Entwickler entscheiden sich für die erhöhte Flexibilität, die von IaaS gegenüber PaaS angeboten wird, während andere den geringeren Wartungsaufwand und die einfachere Skalierbarkeit von PaaS bevorzugen. Wenn Sie gerade anfangen, ist es viel einfacher, Ihre Website auf einem PaaS-System einzurichten, daher werden wir das in diesem Tutorial tun.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Wenn Sie sich für einen Node/Express-freundlichen Hosting-Anbieter entscheiden, sollte er Anleitungen dazu bereitstellen, wie Sie eine Express-Website mithilfe verschiedener Konfigurationen von Webserver, Anwendungsserver, Reverse-Proxy usw. einrichten können. Beispielsweise gibt es viele Schritt-für-Schritt-Leitfaden 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":"einen_hosting-anbieter_wählen","title":"Einen Hosting-Anbieter wählen","isH3":false,"content":"<p>Es gibt zahlreiche Hosting-Anbieter, die dafür bekannt sind, <em>Node</em> (und <em>Express</em>) entweder aktiv zu unterstützen oder damit gut zu arbeiten. Diese Anbieter stellen unterschiedliche Arten von Umgebungen (IaaS, PaaS) sowie unterschiedliche Ebenen von Rechen- und Netzwerkressourcen zu unterschiedlichen Preisen zur Verfügung.</p>\n<div class=\"notecard note\">\n <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 im Folgenden einige Optionen vorstellen, ist es wichtig, 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 stark Ihre Seite voraussichtlich frequentiert wird und die Kosten für die Daten- und Rechenressourcen, die erforderlich sind, um diese Nachfrage zu decken.</li>\n <li>Unterstützung für horizontale (Hinzufügen weiterer Maschinen) und vertikale Skalierung (Upgrade auf leistungsstärkere Maschinen) und die Kosten dafür.</li>\n <li>Die Standorte, an denen der Anbieter Rechenzentren hat, und wo der Zugriff daher voraussichtlich am schnellsten ist.</li>\n <li>Die historische Verfügbarkeit und Ausfallzeiten des Hosts.</li>\n <li>Die bereitgestellten Tools zur Verwaltung der Site – sind sie einfach zu bedienen und sicher (z.B. SFTP vs. FTP).</li>\n <li>Eingebaute Frameworks zur Überwachung Ihres Servers.</li>\n <li>Bekannte Einschränkungen. Einige Hosts blockieren absichtlich bestimmte Dienste (z.B. E-Mail). Andere bieten in einigen Preisklassen nur eine bestimmte Anzahl von \"Live-Zeit\"-Stunden an oder nur eine geringe Speichermenge.</li>\n <li>Zusätzliche Vorteile. Einige Anbieter bieten kostenlose Domain-Namen und Unterstützung für TLS-Zertifikate an, für deren Zahlung Sie sonst aufkommen müssten.</li>\n <li>Ob die \"kostenlose\" Stufe, auf die Sie sich verlassen, im Laufe der Zeit abläuft und ob die Kosten für den Wechsel zu einer teureren Stufe bedeuten, dass es besser gewesen wäre, von Anfang an einen anderen Dienst zu nutzen!</li>\n</ul>\n<p>\n Die gute Nachricht beim Einstieg ist, dass es einige Seiten gibt, die \"kostenlose\" Computerumgebungen bereitstellen, die für Tests und Bewertungen vorgesehen sind.\n Diese sind in der Regel recht ressourceneingeschränkte/lokale Umgebungen, und Sie müssen sich bewusst sein, dass sie möglicherweise nach einer Einführungszeit ablaufen oder andere Einschränkungen haben.\n Sie sind jedoch großartig, um Websites mit geringem Datenverkehr in einer gehosteten Umgebung zu testen und können einen einfachen Übergang zur Bezahlung für mehr Ressourcen ermöglichen, wenn Ihre Website beliebter wird.\n 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>, etc.\n</p>\n<p>\n Die meisten Anbieter bieten auch eine \"Basis-\" oder \"Hobby-\"Stufe an, die für kleine Produktionsseiten gedacht ist und nützlichere Computerkapazitäten und weniger Einschränkungen bietet.\n <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 eine relativ preiswerte Basis-Computing-Stufe bieten (im Bereich von 5 bis 10 USD pro Monat).\n</p>\n<div class=\"notecard note\">\n <p>\n <strong>Hinweis:</strong> Denken Sie daran, dass der Preis nicht das einzige Auswahlkriterium ist.\n Wenn Ihre Website erfolgreich ist, könnte sich herausstellen, dass die Skalierbarkeit das wichtigste Kriterium ist.\n </p>\n</div>"}},{"type":"prose","value":{"id":"ihre_website_für_die_veröffentlichung_bereit_machen","title":"Ihre Website für die Veröffentlichung bereit machen","isH3":false,"content":"<p>\n Die wichtigsten Dinge, über die Sie bei der Veröffentlichung Ihrer Website nachdenken sollten, sind Websicherheit und Leistung.\n Mindestens werden Sie die Datenbankkonfiguration ändern wollen, damit Sie für die Produktion eine andere Datenbank verwenden und deren Anmeldeinformationen sichern können, die Stack-Traces entfernen, die auf Fehlerseiten während der Entwicklung angezeigt werden, Ihr Logging überarbeiten und die geeigneten Header setzen, um viele gängige Sicherheitsbedrohungen zu vermeiden.\n</p>\n<p>In den folgenden Abschnitten skizzieren wir die wichtigsten Änderungen, die Sie an Ihrer App vornehmen sollten.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Es gibt weitere nützliche Tipps in den Express-Dokumentationen – siehe <a href=\"https://expressjs.com/en/advanced/best-practice-performance.html\" class=\"external\" target=\"_blank\">Production best practices: performance and reliability</a> und <a href=\"https://expressjs.com/en/advanced/best-practice-security.html\" class=\"external\" target=\"_blank\">Production Best Practices: Security</a>.</p>\n</div>"}},{"type":"prose","value":{"id":"datenbankkonfiguration","title":"Datenbankkonfiguration","isH3":true,"content":"<p>\n Bisher haben wir in diesem Tutorial eine einzelne Entwicklungsdatenbank verwendet, deren Adresse und Anmeldedaten in <strong>app.js</strong> fest codiert sind.\n Da die Entwicklungsdatenbank keine Informationen enthält, die uns Sorgen machen, wenn sie offengelegt oder beschädigt werden, besteht kein besonderes Risiko, diese Details preiszugeben.\n Wenn Sie jedoch mit echten Daten arbeiten, insbesondere mit persönlichen Benutzerinformationen, ist der Schutz Ihrer Datenbankanmeldedaten sehr wichtig.\n</p>\n<p>Aus diesem Grund möchten wir für die Produktion eine andere Datenbank verwenden als die, die wir für die Entwicklung verwenden, und auch die Anmeldedaten der Produktionsdatenbank vom Quellcode trennen, damit sie ordnungsgemäß geschützt werden können.</p>\n<p>\n Wenn Ihr Hosting-Anbieter die Einrichtung von Umgebungsvariablen über eine Weboberfläche unterstützt (was viele tun), besteht eine Möglichkeit darin, dass der Server die Datenbank-URL aus einer Umgebungsvariablen abruft.\n Im Folgenden ändern wir die LocalLibrary-Website, um die Datenbank-URI aus einer Betriebssystem-Umgebungsvariablen zu erhalten, falls sie definiert wurde, und andernfalls die Entwicklungsdatenbank-URL zu verwenden.\n</p>\n<p>\n Öffnen Sie <strong>app.js</strong> und finden Sie die Zeile, die die MongoDB-Verbindungsvariable setzt.\n Sie wird etwa so aussehen:\n</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 Verbindungszeichenfolgeverbindung aus einer Umgebungsvariablen namens <code>MONGODB_URI</code> zu erhalten, wenn sie 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> Eine andere gebräuchliche Methode, um die Anmeldeinformationen der Produktionsdatenbank von Quellcodes 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 mithilfe des npm-Moduls <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 Umgebungsvariable <code>NODE_ENV</code> auf <em>production</em> setzen (sie ist standardmäßig auf '<em>development</em>' gesetzt). Neben der Generierung weniger ausführlicher Fehlermeldungen cachet das Setzen der Variablen auf <em>production</em> Vorlagendateien und CSS-Dateien, die aus CSS-Erweiterungen generiert wurden. Tests zeigen, dass das Setzen von <code>NODE_ENV</code> auf <em>production</em> die Anwendungsleistung um den Faktor drei verbessern kann!</p>\n<p>Diese Änderung kann entweder mit <code>export</code>, einer Umgebungsdatei oder dem OS-Initialisierungssystem vorgenommen werden.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Dies ist tatsächlich eine Änderung, die Sie in Ihrer Umgebungseinstellung vornehmen und nicht in Ihrer App, aber wichtig genug, um hier darauf hingewiesen zu werden! Wir zeigen, wie dies für unser Hosting-Beispiel unten eingestellt wird.</p>\n</div>"}},{"type":"prose","value":{"id":"angemessenes_logging","title":"Angemessenes Logging","isH3":true,"content":"<p>Loggings-Aufrufe können sich auf eine Website mit hohem Traffic auswirken. In einer Produktionsumgebung müssen Sie möglicherweise die Website-Aktivität protokollieren (z.B. Tracking-Traffic oder Protokollieren von API-Aufrufen), aber Sie sollten versuchen, die Menge an Logging für Debugging-Zwecke zu minimieren.</p>\n<p>\n Ein Weg, um \"Debug\"-Logging in der Produktion zu minimieren, besteht darin, ein Modul wie <a href=\"https://www.npmjs.com/package/debug\" class=\"external\" target=\"_blank\">debug</a> zu verwenden, mit dem Sie steuern können, welches Logging durch das Setzen einer Umgebungsvariable durchgeführt wird.\n Zum Beispiel zeigt das folgende Codefragment, wie Sie das Logging für \"author\" einrichten könnten.\n Die Debug-Variable wird mit dem Namen 'author' deklariert, und der Präfix \"author\" wird automatisch für alle Logs von diesem Objekt angezeigt.\n</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>\n Dann können Sie eine bestimmte Menge von Logs aktivieren, indem Sie sie als durch Kommas getrennte Liste in der <code>DEBUG</code>-Umgebungsvariablen angeben.\n Sie können die Variablen für die Anzeige von Author- und Book-Logs wie gezeigt setzen (auch Platzhalter werden unterstützt).\n</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> Aufrufe zu <code>debug</code> können Logging ersetzen, das Sie möglicherweise zuvor mit <code>console.log()</code> oder <code>console.error()</code> gemacht haben. Ersetzen Sie in Ihrem Code alle <code>console.log()</code>-Aufrufe durch Logging über das <a href=\"https://www.npmjs.com/package/debug\" class=\"external\" target=\"_blank\">debug</a> Module. Schalten Sie das Logging in Ihrer Entwicklungsumgebung durch das Setzen der DEBUG-Variablen ein und aus und beobachten Sie die Auswirkungen auf das Logging.</p>\n</div>\n<p>Wenn Sie Website-Aktivitäten protokollieren müssen, können Sie eine Logging-Bibliothek wie <em>Winston</em> oder <em>Bunyan</em> verwenden. Für weitere Informationen zu diesem Thema siehe: <a href=\"https://expressjs.com/en/advanced/best-practice-performance.html\" class=\"external\" target=\"_blank\">Production best practices: performance and reliability</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 gesendet werden, komprimieren, was die Zeit, die der Client benötigt, um die Seite zu erhalten und zu laden, erheblich verkürzt. Die verwendete Komprimierungsmethode hängt von den Dekomprimierungsmethoden ab, die der Client im Antrag angibt (die Antwort wird nicht komprimiert gesendet, wenn keine Komprimierungsmethoden unterstützt werden).</p>\n<p>Fügen Sie diese Funktionalität zu Ihrer Seite hinzu, indem Sie <a href=\"https://www.npmjs.com/package/compression\" class=\"external\" target=\"_blank\">compression</a> Middleware verwenden. Installieren Sie dies im Hauptverzeichnis 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 benötigen Sie die Kompressionsbibliothek wie gezeigt. Fügen Sie die Kompressionsbibliothek zur Middleware-Kette mit der <code>use()</code>-Methode 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> Für eine stark frequentierte Website in der 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_zum_schutz_vor_bekannten_schwachstellen","title":"Verwenden Sie Helmet zum Schutz vor bekannten Schwachstellen","isH3":true,"content":"<p><a href=\"https://www.npmjs.com/package/helmet\" class=\"external\" target=\"_blank\">Helmet</a> ist ein Middleware-Paket. Es kann geeignete HTTP-Header setzen, die Ihrer App helfen, sich vor bekannten Webschwachstellen zu schützen (weitere Informationen darüber, welche Header es setzt und welche Schwachstellen es schützt, finden Sie in den <a href=\"https://helmetjs.github.io/\" class=\"external\" target=\"_blank\">Dokumenten</a>).</p>\n<p>Installieren Sie dies im Hauptverzeichnis 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>\n Öffnen Sie <strong>./app.js</strong> und benötigen Sie die <em>helmet</em>-Bibliothek wie gezeigt.\n Fügen Sie das Modul dann der Middleware-Kette mit der <code>use()</code>-Methode hinzu.\n</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>\n Normalerweise hätten wir einfach <code>app.use(helmet());</code> eingefügt, um den <em>Teil</em> der sicherheitsbezogenen Header hinzuzufügen, die für die meisten Sites sinnvoll sind.\n In der <a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template\">LocalLibrary-Basistemplate</a> enthalten wir jedoch einige Bootstrap- und jQuery-Skripte.\n Diese verstoßen gegen die <em>Standard</em>- <a href=\"/de/docs/Web/HTTP/CSP\">Content Security Policy (CSP)</a> von Helmet, die das Laden von Cross-Site-Skripten nicht zulässt.\n Um diese Skripte zu laden, ändern wir die Helmet-Konfiguration so, dass sie CSP-Direktiven festlegt, um das Laden von Skripten von den angegebenen Domains zu ermöglichen.\n Für Ihren eigenen Server können Sie spezifische Header nach Bedarf hinzufügen/deaktivieren, indem Sie den <a href=\"https://www.npmjs.com/package/helmet\" class=\"external\" target=\"_blank\">Anweisungen zur Verwendung von Helmet hier</a> folgen.\n</p>"}},{"type":"prose","value":{"id":"fügen_sie_ratenbegrenzung_zu_den_api-routen_hinzu","title":"Fügen Sie Ratenbegrenzung zu den API-Routen hinzu","isH3":true,"content":"<p>\n <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.\n Es gibt viele Gründe, warum übermäßige Anfragen an Ihre Website gerichtet werden könnten, wie z.B. Denial-of-Service-Angriffe, Brute-Force-Angriffe oder sogar nur ein Client oder Skript, das nicht wie erwartet funktioniert.\n Abgesehen von Leistungsproblemen, die durch zu viele Anfragen entstehen können, die Ihren Server verlangsamen, können Sie auch für den zusätzlichen Datenverkehr belastet werden.\n Dieses Paket kann verwendet werden, um die Anzahl der Anfragen zu begrenzen, die an eine bestimmte Route oder einen Satz von Routen gestellt werden können.\n</p>\n<p>Installieren Sie dies im Hauptverzeichnis 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>\n Öffnen Sie <strong>./app.js</strong> und benötigen Sie die <em>express-rate-limit</em>-Bibliothek wie gezeigt.\n Fügen Sie das Modul dann der Middleware-Kette mit der <code>use()</code>-Methode hinzu.\n</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 Befehl oben 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> Drittanbieterdienste wie <a href=\"https://www.cloudflare.com/\" class=\"external\" target=\"_blank\">Cloudflare</a> können ebenfalls verwendet werden, wenn Sie einen fortschrittlicheren Schutz 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 Abhängigkeiten und die Einstiegspunktdatei der Anwendung herauszufinden.</p>\n<p>\n Die einzige wichtige Information, die in unserer aktuellen <strong>package.json</strong> fehlt, ist die von der Bibliothek benötigte Node-Version.\n Sie können die für die Entwicklung verwendete Node-Version herausfinden, indem Sie den Befehl ausführen:\n</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 Informationen als <strong>engines > node</strong> wie gezeigt hinzu (verwenden Sie die Versionnummer 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 Hostingdienst unterstützt möglicherweise nicht die spezifische angegebene Node-Version, aber diese Änderung sollte sicherstellen, dass er versucht, eine Version mit der gleichen Hauptversionsnummer oder eine neuere Version zu verwenden.</p>\n<p>Beachten Sie, dass es andere Möglichkeiten geben kann, die Node-Version bei verschiedenen Hostingdiensten anzugeben, aber der <strong>package.json</strong>-Ansatz wird weitgehend unterstützt.</p>\n<h4 id=\"abhängigkeiten_erhalten_und_erneut_testen\">Abhängigkeiten erhalten und erneut testen</h4>\n<p>Bevor wir fortfahren, lassen Sie uns die Seite erneut testen und sicherstellen, dass keine unserer Änderungen die Seite beeinflusst hat.</p>\n<p>Zuerst müssen wir unsere Abhängigkeiten abrufen. Sie können dies tun, indem Sie im Terminal im Hauptverzeichnis des Projekts 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\n</code></pre></div>\n<p>Führen Sie die Seite nun aus (siehe <a href=\"/de/docs/Learn/Server-side/Express_Nodejs/routes#testing_the_routes\">Testing the routes</a> für die entsprechenden Befehle) und überprüfen Sie, dass sich die Seite immer noch wie erwartet verhält.</p>"}},{"type":"prose","value":{"id":"erstellen_eines_anwendungsspeichers_in_github","title":"Erstellen eines Anwendungsspeichers in GitHub","isH3":true,"content":"<p>\n Viele Hostingdienste erlauben es Ihnen, Projekte aus einem lokalen Repository oder von cloudbasierten Quellversionskontrollplattformen zu importieren und/oder zu synchronisieren.\n Dies kann die Bereitstellung und iterative Entwicklung erheblich erleichtern.\n</p>\n<p>Für dieses Tutorial richten wir ein <a href=\"https://github.com/\" class=\"external\" target=\"_blank\">GitHub</a> Konto und ein Repository für die Bibliothek ein und verwenden das <strong>git</strong>-Tool, um unseren Quellcode hochzuladen.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Sie können diesen Schritt überspringen, wenn Sie bereits GitHub zur Verwaltung Ihres Quellcodes verwenden!</p>\n <p>Beachten Sie, dass die Verwendung von Quellcodeverwaltungs-Tools eine gute Software-Entwicklungspraxis ist, da Sie damit Änderungen ausprobieren können und bei Bedarf zwischen Ihren Experimenten und dem \"bekannten guten Code\" wechseln können!</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 eingeloggt 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 auf diesem Formular aus. Obwohl diese nicht zwingend erforderlich sind, werden sie dringend empfohlen.</p>\n <ul>\n <li>\n <p>Geben Sie einen neuen Repository-Namen ein (z.B. <em>express-locallibrary-tutorial</em>) und eine Beschreibung (z.B. \"Local Library website written in Express (Node)\").</p>\n </li>\n <li>\n <p>Wählen Sie <strong>Node</strong> in der Auswahliste <em>Add .gitignore</em>.</p>\n </li>\n <li>\n <p>Wählen Sie Ihre bevorzugte Lizenz in der Auswahliste <em>Add license</em>.</p>\n </li>\n <li>\n <p>Aktivieren Sie <strong>Initialize this repository with a README</strong>.</p>\n </li>\n </ul>\n <div class=\"notecard warning\">\n <p><strong>Warnung:</strong> Der Standardzugriff \"Öffentlich\" macht <em>alle</em> Quellcodes – einschließlich Ihres Datenbankbenutzernamens und -passworts – für jeden im Internet sichtbar! Stellen Sie sicher, dass der Quellcode Anmeldeinformationen <em>nur</em> aus Umgebungsvariablen liest und keine Anmeldeinformationen fest kodiert sind.</p>\n <p>Wählen Sie andernfalls die Option \"Privat\", damit nur ausgewählte Personen den Quellcode sehen können.</p>\n </div>\n </li>\n <li>\n <p>Drücken Sie <strong>Create repository</strong>.</p>\n </li>\n <li>\n <p>Klicken Sie auf den grünen <strong>Clone or download</strong> Button auf Ihrer neuen Repo-Seite.</p>\n </li>\n <li>\n <p>\n Kopieren Sie den URL-Wert aus dem Textfeld im erscheinenden Dialogfeld.\n Wenn Sie den Repository-Namen \"express-locallibrary-tutorial\" verwendet haben, sollte die URL in etwa so aussehen: <code>https://github.com/<your_git_user_id>/express-locallibrary-tutorial.git</code>.\n </p>\n </li>\n</ol>\n<p>Jetzt, wo das Repository (\"Repo\") auf GitHub erstellt wurde, wollen wir es auf unseren lokalen Computer klonen (kopieren):</p>\n<ol>\n <li>\n <p>Installieren Sie <em>git</em> auf Ihrem lokalen Computer (Versionen für verschiedene Plattformen finden Sie <a href=\"https://git-scm.com/downloads\" class=\"external\" target=\"_blank\">hier</a>).</p>\n </li>\n <li>\n <p>Öffnen Sie ein Eingabeaufforderungs-/Terminal-Fenster und klonen Sie Ihr Repo 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 Anwendungs-Quellcodedateien 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 Eingabeaufforderungs-/Terminal-Fenster und verwenden Sie den Befehl <code>add</code>, 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>\n Verwenden Sie den Befehl <code>status</code>, um zu überprüfen, ob alle Dateien, die sie <code>commit</code> möchten, korrekt sind (Sie möchten Quellcodedateien, keine Binärdateien, temporären Dateien, usw. einfügen).\n Es sollte ein wenig wie die untenstehende Auflistung aussehen.\n </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>\n Wenn Sie zufrieden sind, <code>commit</code> die Dateien zu Ihrem lokalen Repo.\n Dies entspricht dem Signieren der Änderungen ab und macht sie zu einem offiziellen Teil des lokalen Repos.\n </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>\n Bis zu diesem Punkt wurde das Remote-Repo nicht geändert.\n Der letzte Schritt besteht darin, Ihr lokales Repo mit dem folgenden Befehl zum Remote-GitHub-Repo zu synchronisieren (<code>push</code>).\n </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>Wenn dieser Vorgang abgeschlossen ist, sollten Sie in der Lage sein, zurück zu der Seite auf GitHub zu gehen, wo Sie Ihr Repo erstellt haben, die Seite zu aktualisieren und zu sehen, dass Ihre gesamte Anwendung nun hochgeladen wurde. Sie können Ihr Repo weiterhin aktualisieren, wenn sich Dateien ändern, indem Sie diesen Hinzufügen/Commit-/Push-Zyklus verwenden.</p>\n<p>\n Dies ist ein guter Punkt, um eine Sicherungskopie Ihres \"Vanilla\" Projekts zu erstellen – während einige der Änderungen, die wir in den folgenden Abschnitten vornehmen werden, für die Bereitstellung auf jedem Hosting-Dienst nützlich sein können (oder für die Entwicklung), könnten andere das nicht sein.\n Sie können dies mit <code>git</code> über die Befehlszeile tun:\n</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>\n <strong>Hinweis:</strong> Git ist unglaublich leistungsfähig!\n Um mehr zu erfahren, siehe <a href=\"https://docs.github.com/en/get-started/start-your-journey/git-and-github-learning-resources\" class=\"external\" target=\"_blank\">Learning Git</a>.\n </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 man <em>LocalLibrary</em> auf <a href=\"https://glitch.com/\" class=\"external\" target=\"_blank\">Glitch</a> hostet.</p>"}},{"type":"prose","value":{"id":"warum_glitch","title":"Warum Glitch?","isH3":true,"content":"<p>Wir entscheiden uns aus mehreren Gründen für die Nutzung von Glitch:</p>\n<ul>\n <li>\n <p>\n Glitch hat einen <a href=\"https://glitch.com/pricing\" class=\"external\" target=\"_blank\">kostenlosen Einstiegstarif</a>, der <em>wirklich</em> kostenlos ist, wenn auch mit einigen Einschränkungen.\n Die Tatsache, dass es für alle Entwickler erschwinglich ist, ist MDN sehr wichtig!\n </p>\n </li>\n <li>\n <p>\n Glitch kümmert sich um die Infrastruktur, sodass Sie es nicht tun müssen.\n Sich nicht um Server, Lastverteiler, Reverse Proxies usw. sorgen zu müssen, macht es viel einfacher zu beginnen.\n </p>\n </li>\n <li>\n <p>Die Fähigkeiten und Konzepte, die Sie bei der Verwendung von Glitch lernen werden, sind übertragbar.</p>\n </li>\n <li>\n <p>\n Die Dienst- und Planbeschränkungen haben keinen wirklichen Einfluss auf die Verwendung von Glitch für das Tutorial.\n Zum Beispiel:\n </p>\n <ul>\n <li>\n Der Starterplan bietet nur 1000 \"Projektstunden\" pro Monat, die monatlich zurückgesetzt werden.\n Diese werden verwendet, wenn Sie die Website aktiv bearbeiten oder wenn jemand darauf zugreift.\n Wenn niemand auf die Seite oder Änderungen daran vornimmt, wird sie in den Ruhezustand versetzt.\n </li>\n <li>\n Die Starterplanumgebung hat einen begrenzten Container-RAM und Speicherplatz.\n Es gibt mehr als genug für das Tutorial, insbesondere weil unsere Datenbank anderswo gehostet wird.\n </li>\n <li>Benutzerdefinierte Domains werden nicht gut unterstützt (zum Zeitpunkt des Schreibens).</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 technischen Einschränkungsseite</a>.</li>\n </ul>\n </li>\n</ul>\n<p>Während Glitch für das Hosting dieser Demonstration geeignet ist, sollten Sie sich die Zeit nehmen zu bestimmen, ob es für <a href=\"#einen_hosting-anbieter_w%C3%A4hlen\">Ihre eigene Website geeignet ist</a>.</p>"}},{"type":"prose","value":{"id":"wie_funktioniert_glitch","title":"Wie funktioniert Glitch?","isH3":true,"content":"<p>\n Glitch bietet eine webbasierte Oberfläche, in der Sie Projekte aus Starter-Templates erstellen oder aus GitHub importieren und die Projektdateien hinzufügen und bearbeiten können.\n Während Sie Änderungen vornehmen, wird das Projekt in seinem eigenen isolierten und unabhängigen virtualisierten Container erstellt und ausgeführt.\n</p>\n<p>\n Wie das alles \"unter der Haube\" funktioniert, ist ein Rätsel – Glitch sagt es nicht.\n Es ist jedoch klar, dass solange Sie eine relativ standardmäßige Nodejs-Webanwendung erstellen (zum Beispiel using <code>package.json</code> für Ihre Abhängigkeiten), und nicht mehr Ressourcen verwenden als in den <a href=\"https://help.glitch.com/hc/en-us/articles/16287495313293-Technical-Restrictions\" class=\"external\" target=\"_blank\">Technischen Restriktionen</a> gelistet sind, sollte Ihre Anwendung \"einfach funktionieren\".\n</p>\n<p>\n Sobald die Anwendung ausgeführt wird, kann sie für die Produktion mit <a href=\"https://help.glitch.com/hc/en-us/articles/16287550167437-Adding-Private-Data\" class=\"external\" target=\"_blank\">privaten Daten</a> konfiguriert werden, die in einer <code>.env</code>-Datei bereitgestellt werden.\n Die Werte in den geheimen Daten werden wie Umgebungsvariablen von der Anwendung gelesen, was, Sie sich aus einem vorherigen Abschnitt erinnern, wie wir unsere Anwendung konfigurierten, damit sie ihre Datenbank-URL erhielt.\n Beachten Sie, dass die Variablen <em>geheim</em> sind: die <code>.env</code>-Datei sollte nicht in Ihr GitHub-Repository aufgenommen werden.\n</p>\n<p>Die Glitch-Bearbeitungsansicht bietet auch Terminal-Zugriff auf die Webanwendungsumgebung, den Sie verwenden können, um mit der Webanwendung genauso zu arbeiten, als ob Sie auf Ihrer lokalen Maschine ausgeführt wird.</p>\n<p>\n Das ist alles, was Sie brauchen, um loszulegen.\n Als nächstes richten wir ein Glitch-Konto ein, laden das Bibliotheksprojekt von GitHub hoch und verbinden es mit einer Datenbank.\n</p>"}},{"type":"prose","value":{"id":"ein_glitch-konto_erhalten","title":"Ein Glitch-Konto erhalten","isH3":true,"content":"<p>Um Glitch zu nutzen, müssen Sie zuerst 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, um sich mit Ihren GitHub-Anmeldedaten anzumelden.</li>\n <li>Sie werden dann in das Glitch-Dashboard eingeloggt: <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>\n Hosting-Anbieter unterstützen in der Regel einige Hauptversionen der neuesten Node.js-Veröffentlichungen.\n Wenn die in Ihrer <code>package.json</code>-Datei angegebene \"kleine\" Version nicht unterstützt wird, weichen sie normalerweise auf die nächste unterstützte Version aus (und oft wird das einfach funktionieren).\n</p>\n<p>\n Leider ist zum Zeitpunkt des Schreibens die höchste unterstützte Version auf Glitch Node.js 16.\n Wenn Sie mit Node.js 17 oder höher entwickelt haben, sollten Sie die in Ihrer <code>package.json</code>-Datei verwendete Version wie gezeigt reduzieren.\n Sie müssen auch erneut testen:\n</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>\n Glitch <a href=\"https://blog.glitch.com/post/rebuilding-glitch/\" class=\"external\" target=\"_blank\">plant, Node zu aktualisieren und in Zukunft besser aktualisiert zu halten</a> – und es kann sein, dass die Versionsbeschränkung nicht mehr existiert, wenn Sie dies lesen.\n Anstelle der Herabstufung der <code>node</code>-Version könnten Sie Ihr Projekt hochladen und sehen, ob es erstellt wird.\n Wenn Fehler auftreten und Ihre Anwendung nicht lädt, sollten Sie versuchen, die <code>node</code>-Version in Ihrer <code>package.json</code>-Datei im Glitch-Editor auf <code>>=v16</code> zu setzen.\n</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Sie können auch die unterstützten Versionen überprü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":"bereitstellung_auf_glitch_von_github","title":"Bereitstellung auf Glitch von GitHub","isH3":true,"content":"<p>\n Als nächstes importieren wir das Bibliotheksprojekt von GitHub.\n Wählen Sie zuerst die <strong>Dashboard</strong> Option aus dem Hauptmenü der Seite und wählen Sie dann die <strong>Neues Projekt</strong> Schaltfläche.\n Glitch zeigt eine Liste von Optionen für das neue Projekt; wählen Sie <strong>Importieren von GitHub</strong>.\n</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/glitch_new_project_import_github.png\" alt=\"Glitch Website-Dashboard, das eine neue Projekt-Schaltfläche und ein Popup-Menü mit der Option "Vom GitHub importieren" anzeigt\" width=\"1097\" height=\"724\" loading=\"lazy\">\n</p>\n<p>\n Ein Popup erscheint.\n Geben Sie die URL Ihres GitHub-Bibliotheks-Repositories in das Popup ein und drücken Sie <strong>OK</strong>.\n Unten haben wir das Repo für das bearbeitete Projekt eingegeben.\n</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/glitch_new_project_github_repo_url.png\" alt=\"Glitch-Popup zum Eingeben der URL des GitHub-Repos, um es zu importieren\" width=\"462\" height=\"208\" loading=\"lazy\">\n</p>\n<p>\n Glitch wird dann das Projekt importieren und Fortschrittsmitteilungen anzeigen.\n Nach Abschluss wird es die Bearbeitungsansicht für das neue Projekt anzeigen, wie unten gezeigt.\n</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/glitch_imported_project_in_editor.png\" alt=\"Glitch-Bearbeitungsansicht für importiertes Projekt\" width=\"1309\" height=\"726\" loading=\"lazy\">\n</p>\n<p>Sie können die Live-Seiten-URL erhalten, indem Sie die <strong>Teilen</strong> Schaltfläche auswählen.</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/glitch_share_project.png\" alt=\"Glitch-Bearbeitungsansicht für importiertes Projekt\" width=\"1311\" height=\"721\" loading=\"lazy\">\n</p>\n<p>\n Öffnen Sie einen neuen Browser-Tab und kopieren Sie den Link zur Live-Seite in die Adressleiste.\n Die lokale Bibliotheksseite sollte geöffnet werden und Daten aus der Entwicklungsdatenbank anzeigen.\n</p>\n<div class=\"notecard note\">\n <p>\n <strong>Hinweis:</strong> Dieser Vorgang war ein einmaliger Import von GitHub.\n 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 synchron zu halten.\n </p>\n</div>"}},{"type":"prose","value":{"id":"verwenden_sie_eine_produktionsdatenbank_bei_mongodb","title":"Verwenden Sie eine Produktionsdatenbank bei MongoDB","isH3":true,"content":"<p>\n Sie sollten eine andere Datenbank für die Produktion als für die Entwicklung einrichten.\n Während Glitch nur SQLite-Datenbanken hostet (und wir sind so konfiguriert, dass wir MongoDB verwenden), bieten viele andere Seiten MongoDB-Datenbanken als Dienst an.\n</p>\n<p>Eine Option besteht darin, den Anweisungen unter <a href=\"/de/docs/Learn/Server-side/Express_Nodejs/mongoose#setting_up_the_mongodb_database\">Einrichten der MongoDB-Datenbank</a> zu folgen, um früher im Tutorial eine neue Produktionsdatenbank einzurichten.</p>\n<p>\n Um die Produktionsdatenbank für die Bibliotheksanwendung zugänglich zu machen, öffnen Sie die <code>.env</code>-Datei in der Bearbeitungsansicht des Projekts.\n Geben Sie die Datenbank-URL-Variable <code>MONGODB_URI</code> und die URL Ihrer Produktionsdatenbank ein.\n Die Seite wird aktualisiert, während Sie Werte in den Editor eingeben.\n</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/glitch_env.png\" alt=\"Glitch .env-Dateieditor für private Daten mit Produktionsvariablen\" width=\"1015\" height=\"768\" loading=\"lazy\">\n</p>\n<div class=\"notecard note\">\n <p>\n <strong>Hinweis:</strong> Wir haben diese Datei nicht erstellt.\n 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> gedacht und wurde automatisch beim Import in Glitch erstellt.\n Sie wird nie exportiert oder kopiert.\n </p>\n</div>"}},{"type":"prose","value":{"id":"andere_konfigurationsvariablen","title":"Andere Konfigurationsvariablen","isH3":true,"content":"<p>Sie erinnern sich, dass wir in einem vorhergehenden Abschnitt das <a href=\"#set_node_env_to_production\">Setzen von NODE_ENV auf 'production'</a> benötigen, um unsere Leistung zu verbessern und weniger ausführliche Fehlermeldungen zu generieren. Wir tun dies im selben Datei, in der wir die <code>MONGODB_URI</code>-Variable gesetzt haben.</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>\n Die lokale Bibliotheksanwendung ist nun für die Produktion eingerichtet und konfiguriert.\n Sie können Daten über die Benutzeroberfläche der Website hinzufügen, und sie sollte genauso funktionieren wie während der Entwicklung (wenn auch mit weniger auf Debugging bezogenen Informationen bei ungültigen Seiten).\n</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Wenn Sie nur einige Daten zum Testen hinzufügen möchten, können Sie das <code>populatedb</code>-Skript verwenden (mit Ihrer MongoDB-Produktionsdatenbank-URL), wie in dem Abschnitt <a href=\"/de/docs/Learn/Server-side/Express_Nodejs/mongoose#testing_%E2%80%94_create_some_items\">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose) Testen — einige Einträge 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>\n Glitch ermöglicht effektives Debuggen.\n Einige der Dinge, die Sie tun können, sind:\n</p>\n<ul>\n <li>Wählen Sie die Log-Schaltfläche unten in der Bearbeitungsansicht aus, um Log-Informationen von Ihrem Server zu sehen, wie z.B. die Konsolenlogausgabe.</li>\n <li>\n Wählen Sie die Terminal-Schaltfläche unten in der Bearbeitungsansicht aus, um ein Terminal in der Hosting-Umgebung zu öffnen.\n Sie können dies verwenden, um Befehle und Tools in der Umgebung wie auf Ihrer lokalen Maschine auszuführen.\n Zum Beispiel könnten Sie <code>node -v</code> verwenden, um die Node-Version zu überprüfen.\n </li>\n <li>Interaktives Debuggen in VS Code mit 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 man <em>LocalLibrary</em> auf <a href=\"https://railway.app/\" class=\"external\" target=\"_blank\">Railway</a> installiert.</p>"}},{"type":"prose","value":{"id":"warum_railway","title":"Warum Railway?","isH3":true,"content":"<div class=\"notecard warning\">\n <p>\n <strong>Warnung:</strong> Railway hat keinen vollständig kostenlosen Starter-Tarif mehr.\n Wir haben diese Anweisungen beibehalten, weil Railway einige großartige Funktionen hat und für einige Benutzer eine bessere Option sein wird.\n </p>\n</div>\n<p>Railway ist eine attraktive Hosting-Option aus mehreren Gründen:</p>\n<ul>\n <li>\n Railway kümmert sich um den Großteil der Infrastruktur, sodass Sie es nicht tun müssen.\n Sich nicht um Server, Lastverteiler, Reverse Proxies usw. sorgen zu müssen, macht es viel einfacher zu beginnen.\n </li>\n <li>Railway hat einen <a href=\"https://docs.railway.app/maturity/compare-to-heroku\" class=\"external\" target=\"_blank\">Fokus auf die Entwicklererfahrung von Entwicklung und Bereitstellung</a>, was zu einer schnelleren und weicheren Lernkurve als bei vielen anderen Alternativen führt.</li>\n <li>\n Die Fähigkeiten und Konzepte, die Sie bei der Nutzung von Railway lernen werden, sind übertragbar.\n Auch wenn Railway einige hervorragende neue Funktionen hat, verwenden andere beliebte Hosting-Services viele der gleichen Ideen und Ansätze.\n </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, ist die Preisgestaltung 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 <a href=\"#einen_hosting-anbieter_w%C3%A4hlen\">Ihre eigene Website geeignet ist</a>.</p>"}},{"type":"prose","value":{"id":"wie_funktioniert_railway","title":"Wie funktioniert Railway?","isH3":true,"content":"<p>\n Webanwendungen werden jeweils in einem eigenen isolierten und unabhängigen virtualisierten Container ausgeführt.\n Um Ihre Anwendung auszuführen, benötigt Railway die Möglichkeit, die entsprechende Umgebung und Abhängigkeiten einzurichten und auch zu verstehen, wie sie gestartet wird.\n</p>\n<p>\n Railway macht dies einfach, da es viele verschiedene Webanwendungs-Frameworks und Umgebungen basierend auf ihrer Verwendung von \"üblichen Konventionen\" automatisch erkennen und installieren kann.\n Zum Beispiel erkennt Railway Node-Anwendungen, weil sie eine <strong>package.json</strong>-Datei haben und kann den verwendeten Paketmanager für den Aufbau aus der \"Lock\"-Datei bestimmen.\n Zum Beispiel, wenn die Anwendung die Datei <strong>package-lock.json</strong> enthält, weiß Railway, dass <em>npm</em> verwendet wird, um die Pakete zu installieren, während es, wenn es <strong>yarn.lock</strong> findet, weiß, dass <em>yarn</em> verwendet wird.\n Nachdem alle Abhängigkeiten installiert wurde, wird Railway nach Skripten namens \"build\" und \"start\" in der Paketdatei suchen und diese zum Bauen und Ausführen des Codes verwenden.\n</p>\n<div class=\"notecard note\">\n <p>\n <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 wurden.\n Sie müssen nichts weiter für dieses Tutorial wissen, aber Sie können mehr über Optionen für die Bereitstellung von Node-Anwendungen in <a href=\"https://nixpacks.com/docs/providers/node\" class=\"external\" target=\"_blank\">Nixpacks Node</a> erfahren.\n </p>\n</div>\n<p>\n Sobald die Anwendung läuft, kann sie sich mit Informationen aus <a href=\"https://docs.railway.app/guides/variables\" class=\"external\" target=\"_blank\">Umgebungsvariablen</a> konfigurieren.\n Zum Beispiel muss eine Anwendung, die eine Datenbank verwendet, die Adresse mit einer Variablen erhalten.\n Der Datenbankdienst kann selbst von Railway oder einem anderen Anbieter gehostet werden.\n</p>\n<p>\n 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.\n Mit dem CLI können Sie ein lokales GitHub-Repository mit einem Railway-Projekt verknüpfen, das Repository vom lokalen Branch auf die Live-Site hochladen, die Protokolle des laufenden Prozesses anzeigen, Konfigurationsvariablen setzen und abrufen und vieles mehr.\n Einer 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.\n</p>\n<p>\n Das ist der Überblick, den Sie brauchen, um die App bei Railway bereitzustellen.\n Als Nächstes werden wir ein Railway-Konto einrichten, unsere Website und eine Datenbank installieren und den Railway-Client ausprobieren.\n</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 zuerst 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>Login</strong> Link in der oberen Symbolleiste.</li>\n <li>Wählen Sie GitHub im Popup, um sich mit Ihren GitHub-Anmeldeinformationen anzumelden.</li>\n <li>Wenn möglich, sollten Sie Ihre E-Mail überprüfen und bestätigen.</li>\n <li>Sie werden dann in das Railway.app-Dashboard eingeloggt: <a href=\"https://railway.app/dashboard\" class=\"external\" target=\"_blank\">https://railway.app/dashboard</a>.</li>\n</ul>"}},{"type":"prose","value":{"id":"bereitstellung_auf_railway_von_github","title":"Bereitstellung auf Railway von GitHub","isH3":true,"content":"<p>\n Als nächstes richten wir Railway ein, um unsere Bibliothek von GitHub bereitzustellen.\n Wählen Sie zuerst die <strong>Dashboard</strong> Option aus dem Hauptmenü der Seite und wählen Sie dann die <strong>Neues Projekt</strong> Schaltfläche:\n</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_new_project_button.png\" alt=\"Railway-Website-Dashboard mit Hervorhebung der Schaltfläche "Neues Projekt"\" width=\"877\" height=\"583\" loading=\"lazy\">\n</p>\n<p>\n Railway zeigt eine Liste von Optionen für das neue Projekt an, einschließlich der Option, ein Projekt aus einer Vorlage in Ihrem GitHub-Konto zu erstellen, und einer Reihe von Datenbanken.\n Wählen Sie <strong>Von GitHub-Repo bereitstellen</strong>.\n</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_new_project_button_deploy_github_repo.png\" alt=\"Railway-Popup, das Bereitstellungsoptionen mit hervorgehobener Option "Von GitHub-Repo bereitstellen" zeigt\" width=\"521\" height=\"571\" loading=\"lazy\">\n</p>\n<p>\n Alle Projekte in den GitHub-Repos, die Sie bei der Einrichtung mit Railway geteilt haben, werden angezeigt.\n Wählen Sie Ihr GitHub-Repository für die lokale Bibliothek: <code><benutzername>/express-locallibrary-tutorial</code>.\n</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_new_project_button_deploy_github_selectrepo.png\" alt=\"Railway-Popup, das GitHub-Repos zeigt, die bereitgestellt werden können\" width=\"542\" height=\"442\" loading=\"lazy\">\n</p>\n<p>Bestätigen Sie Ihre Bereitstellung, indem Sie <strong>Jetzt bereitstellen</strong> auswählen.</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_new_project_deploy_confirm.png\" alt=\"Bildschirm mit Bestätigunssoption zur Bereitstellung des Projekts\" width=\"526\" height=\"380\" loading=\"lazy\">\n</p>\n<p>\n Railway wird dann Ihr Projekt laden und bereitstellen und Fortschritte auf der Registerkarte \"Bereitstellungen\" anzeigen.\n Wenn die Bereitstellung erfolgreich abgeschlossen ist, sehen Sie einen Bildschirm wie den unten gezeigten.\n</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_project_deploy.png\" alt=\"Railway-Dashboard, das die Registerkarte "Bereitstellungen" für das bereitgestellte Projekt zeigt\" width=\"1050\" height=\"387\" loading=\"lazy\">\n</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>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_project_generate_domain.png\" alt=\"Railway-Projekteinstellungen-Tab mit Schaltfläche zum Generieren einer Domain hervorgehoben\" width=\"696\" height=\"435\" loading=\"lazy\">\n</p>\n<p>Dies wird die Seite veröffentlichen und die Domain anstelle der Schaltfläche anzeigen, wie unten gezeigt.</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_project_domain.png\" alt=\"Railway-Projekteinstellungen-Tab mit Link zur lokalen Bibliotheksseite\" width=\"509\" height=\"197\" loading=\"lazy\">\n</p>\n<p>\n Wählen Sie die Domain-URL aus, um Ihre Bibliotheksanwendung zu öffnen.\n Da wir keine Produktionsdatenbank angegeben haben, wird die lokale Bibliothek mit Ihren Entwicklungsdaten geöffnet.\n</p>"}},{"type":"prose","value":{"id":"eine_mongodb-datenbank_bereitstellen_und_verbinden","title":"Eine MongoDB-Datenbank bereitstellen und verbinden","isH3":true,"content":"<p>\n Anstatt unsere Entwicklungsdaten zu verwenden, wollen wir als nächstes eine Produktions-MongoDB-Datenbank erstellen.\n Wir werden die Datenbank als Teil des Railway-Anwendungsprojekts erstellen, obwohl Sie nichts daran hindert, eine in einem eigenen separaten Projekt oder tatsächlich eine <em>MongoDB Atlas</em>-Datenbank für Produktionsdaten zu erstellen, genauso wie Sie es für die Entwicklungsdatenbank getan haben.\n</p>\n<p>\n Auf Railway, wählen Sie die <strong>Dashboard</strong> Option im Hauptmenü der Seite und wählen Sie dann Ihr Anwendungsprojekt.\n Zu diesem Zeitpunkt enthält es nur einen einzelnen Dienst für Ihre Anwendung (dies kann ausgewählt werden, um Variablen und andere Details des Dienstes festzulegen).\n Wählen Sie die <strong>Neu</strong> Schaltfläche, die verwendet wird, um Dienste zum aktuellen Projekt hinzuzufügen.\n</p>\n<p>\n <img src=\"/de/docs/Learn/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\">\n</p>\n<p>Wählen Sie <strong>Datenbank</strong>, wenn Sie nach dem Typ des hinzuzufügenden Dienstes gefragt werden.</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_database_add.png\" alt=\"Railway-Popup, das Optionen für einen neuen Dienst zeigt, wie Datenbank, GitHub-Repo, leeren Dienst und so weiter\" width=\"512\" height=\"285\" loading=\"lazy\">\n</p>\n<p>Dann wählen Sie <strong>MongoDB hinzufügen</strong>, um die Datenbank hinzuzufügen</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_database_select_type.png\" alt=\"Railway-Popup, das verschiedene Datenbanken zeigt, die ausgewählt werden können: Postgres, MySQL, MongoDB und so weiter\" width=\"518\" height=\"333\" loading=\"lazy\">\n</p>\n<p>\n Railway wird dann einen Dienst mit einer leeren Datenbank im selben Projekt bereitstellen.\n Nach Abschluss sehen Sie nun in der Projektansicht sowohl die Anwendungs- als auch die Datenbankdienste.\n</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_project_two_services.png\" alt=\"Railway-Projekt mit Anwendungs- und Datenbankdiensten\" width=\"953\" height=\"477\" loading=\"lazy\">\n</p>\n<p>\n Wählen Sie den MongoDB-Dienst, um Informationen über die Datenbank anzuzeigen.\n Öffnen Sie die Registerkarte <em>Variablen</em> und kopieren Sie die \"Mongo_URL\" (dies ist die Adresse der Datenbank).\n</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_mongodb_connect.png\" alt=\"Railway-Datenbankeinstellungen-Bildschirm, der die zum Verbinden mit der Datenbank erforderliche URL zeigt\" width=\"1842\" height=\"750\" loading=\"lazy\">\n</p>\n<p>\n Um dies für die Bibliotheksanwendung zugänglich zu machen, müssen wir es über eine Umgebungsvariable zum Anwendungsprozess hinzufügen.\n Öffnen Sie zuerst den Anwendungsdienst.\n Dann wählen Sie die Registerkarte <em>Variablen</em> und drücken Sie die <strong>Neue Variable</strong> Schaltfläche.\n</p>\n<p>\n 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=\"#datenbankkonfiguration\">wir die Anwendung konfigurierten</a>, um die Datenbankadresse zu lesen).\n Dies wird ähnlich wie der unten gezeigte Bildschirm aussehen.\n</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_variables_database_url.png\" alt=\"Railway-Website-Variablenscreen während der Eingabe der MONGODB_URI-Variablen und Adresse\" width=\"1016\" height=\"400\" loading=\"lazy\">\n</p>\n<p>Wählen Sie <strong>Hinzufügen</strong>, um die Variable hinzuzufügen.</p>\n<p>Railway startet Ihre App neu, wenn sie Variablen aktualisiert. Wenn Sie die Startseite jetzt überprüfen, sollte sie null Werte für Ihre Objektanzahlen anzeigen, da die obigen Änderungen bedeuten, dass wir jetzt eine neue (leere) Datenbank verwenden.</p>"}},{"type":"prose","value":{"id":"andere_konfigurationsvariablen_2","title":"Andere Konfigurationsvariablen","isH3":true,"content":"<p>Sie erinnern sich, dass wir in einem vorhergehenden Abschnitt das <a href=\"#set_node_env_to_production\">Setzen von NODE_ENV auf 'production'</a> benötigen, um unsere Leistung zu verbessern und weniger ausführliche Fehlermeldungen zu generieren. Wir können dies im selben Bildschirm wie die <code>MONGODB_URI</code>-Variable setzen.</p>\n<p>\n Öffnen Sie den Anwendungsdienst.\n Wählen Sie dann die Registerkarte <em>Variablen</em>, wo Sie sehen können, dass <code>MONGODB_URI</code> bereits definiert ist, und drücken Sie die <strong>Neue Variable</strong> Schaltfläche.\n</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_variables_new.png\" alt=\"Railway-Variablenregisterkarte mit hervorgehobener neuer Variablen-Schaltfläche\" width=\"1005\" height=\"386\" loading=\"lazy\">\n</p>\n<p>\n Geben Sie <code>NODE_ENV</code> als Name für die neue Variable ein und <code>production</code> als Name der Umgebung.\n Dann drücken Sie die <strong>Hinzufügen</strong> Schaltfläche.\n</p>\n<p>\n <img src=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment/railway_variables_new_node_env.png\" alt=\"Railway-Variablenregisterkarte mit neuer NODE_ENV-Variable, die auf 'production' gesetzt wird\" width=\"706\" height=\"379\" loading=\"lazy\">\n</p>\n<p>\n Die lokale Bibliotheksanwendung ist nun für die Produktion eingerichtet und konfiguriert.\n Sie können Daten über die Benutzeroberfläche der Website hinzufügen, und sie sollte in der gleichen Weise funktionieren, wie sie während der Entwicklung tat (wenn auch mit weniger Debug-Informationen für ungültige Seiten).\n</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Wenn Sie nur einige Daten für Tests hinzufügen möchten, können Sie das <code>populatedb</code>-Skript (mit Ihrer MongoDB-Produktionsdatenbank-URL) verwenden, wie in dem Abschnitt <a href=\"/de/docs/Learn/Server-side/Express_Nodejs/mongoose#testing_%E2%80%94_create_some_items\">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose) Testen — einige Einträge 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>\n Nachdem der Client installiert ist, können Sie Befehle ausführen.\n Einige der wichtigeren Operationen umfassen die Bereitstellung des aktuellen Verzeichnisses Ihres Computers für ein zugeordnetes Railway-Projekt (ohne dass Sie es auf GitHub hochladen müssen) und das lokale Ausführen Ihres Projekts mit denselben Einstellungen wie auf dem Produktionsserver.\n</p>\n<p>Sie können eine Liste aller möglichen Befehle anzeigen, indem Sie Folgendes in einem 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, um das Ende von Logs anzuzeigen (ein ausführlicheres Log ist auf der Seite für jedes Projekt 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 zur Einrichtung von Express-Apps in der Produktion und auch das Ende der Reihe von Tutorials zum Arbeiten mit Express. Wir hoffen, dass Sie sie nützlich gefunden haben. Sie können eine vollständig durchgearbeitete Version des <a href=\"https://github.com/mdn/express-locallibrary-tutorial\" class=\"external\" target=\"_blank\">Quellcodes auf GitHub hier</a> überprüfen.</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\">Production best practices: performance and reliability</a> (Express-Dokumentationen)</p>\n </li>\n <li>\n <p><a href=\"https://expressjs.com/en/advanced/best-practice-security.html\" class=\"external\" target=\"_blank\">Production Best Practices: Security</a> (Express-Dokumentationen)</p>\n </li>\n <li>\n <p>Railway-Dokumentationen</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-Dokumentationen)</li>\n <li><a href=\"https://devcenter.heroku.com/articles/deploying-nodejs\" class=\"external\" target=\"_blank\">Deploying Node.js Applications on Heroku</a> (Heroku-Dokumentationen)</li>\n <li><a href=\"https://devcenter.heroku.com/articles/nodejs-support\" class=\"external\" target=\"_blank\">Heroku Node.js Support</a> (Heroku-Dokumentationen)</li>\n <li><a href=\"https://devcenter.heroku.com/articles/node-concurrency\" class=\"external\" target=\"_blank\">Optimizing Node.js Application Concurrency</a> (Heroku-Dokumentationen)</li>\n <li><a href=\"https://devcenter.heroku.com/articles/how-heroku-works\" class=\"external\" target=\"_blank\">How Heroku works</a> (Heroku-Dokumentationen)</li>\n <li><a href=\"https://devcenter.heroku.com/articles/dynos\" class=\"external\" target=\"_blank\">Dynos and the Dyno Manager</a> (Heroku-Dokumentationen)</li>\n <li><a href=\"https://devcenter.heroku.com/articles/config-vars\" class=\"external\" target=\"_blank\">Configuration and Config Vars</a> (Heroku-Dokumentationen)</li>\n <li><a href=\"https://devcenter.heroku.com/articles/limits\" class=\"external\" target=\"_blank\">Limits</a> (Heroku-Dokumentationen)</li>\n </ul>\n </li>\n</ul><ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Server-side/Express_Nodejs/forms\"><span class=\"button-wrap\"> Zurück </span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Server-side/Express_Nodejs\"><span class=\"button-wrap\"> Übersicht: Express-Webframework (Node.js/JavaScript)</span></a></li>\n \n</ul>"}}],"toc":[{"text":"Überblick","id":"überblick"},{"text":"Was ist eine Produktionsumgebung?","id":"was_ist_eine_produktionsumgebung"},{"text":"Einen Hosting-Anbieter wählen","id":"einen_hosting-anbieter_wählen"},{"text":"Ihre Website für die Veröffentlichung bereit machen","id":"ihre_website_für_die_veröffentlichung_bereit_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"}],"summary":"Nachdem Sie nun eine großartige LocalLibrary Webseite erstellt (und getestet) haben, möchten Sie sie wahrscheinlich auf einem öffentlichen Webserver installieren, damit Bibliothekspersonal und Mitglieder über das Internet darauf zugreifen können. Dieser Artikel bietet einen Überblick darüber, wie Sie möglicherweise einen Hoster finden, um Ihre Website bereitzustellen, und was Sie tun müssen, um Ihre Seite für die Produktion vorzubereiten.","popularity":0,"modified":null,"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":"正體中文 (繁體)"}],"pageType":"unknown","source":{"folder":"de/learn/server-side/express_nodejs/deployment","github_url":"https://github.com/mdn/translated-content/blob/main/files/de/learn/server-side/express_nodejs/deployment/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/null","filename":"index.md"},"short_title":"Express-Tutorial Teil 7: Bereitstellung für die Produktion","parents":[{"uri":"/de/docs/Learn","title":"Webentwicklung lernen"},{"uri":"/de/docs/Learn/Server-side","title":"Server-side-Website-Programmierung"},{"uri":"/de/docs/Learn/Server-side/Express_Nodejs","title":"Express-Webframework (Node.js/JavaScript)"},{"uri":"/de/docs/Learn/Server-side/Express_Nodejs/deployment","title":"Express-Tutorial Teil 7: Bereitstellung für die Produktion"}],"pageTitle":"Express-Tutorial Teil 7: Bereitstellung für die Produktion - Webentwicklung lernen | MDN","noIndexing":false}}</script></body></html>