{"id":56,"date":"2026-05-24T10:30:48","date_gmt":"2026-05-24T10:30:48","guid":{"rendered":"https:\/\/mudosdigital.com\/de\/?p=56"},"modified":"2026-05-24T10:30:49","modified_gmt":"2026-05-24T10:30:49","slug":"so-testest-du-deine-lokale-website-auf-einem-echten-smartphone","status":"publish","type":"post","link":"https:\/\/mudosdigital.com\/de\/so-testest-du-deine-lokale-website-auf-einem-echten-smartphone\/","title":{"rendered":"So testest du deine lokale Website auf einem echten Smartphone?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Wenn du eine Website lokal entwickelst, findet die erste Vorschau meistens im Browser auf demselben Computer statt. Das ist n\u00fctzlich, beantwortet aber eine sehr praktische Frage nicht vollst\u00e4ndig: Wie f\u00fchlt sich die Website auf einem echten Smartphone an?<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"https:\/\/mudosdigital.com\/wp-content\/uploads\/2026\/05\/ScreenRecording_05-24-2026-12-27-46_1.webm\" playsinline><\/video><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p class=\"wp-block-paragraph\">Bildschirmaufnahme von einem echten Smartphone, das mit demselben lokalen Netzwerk verbunden ist. Das Video zeigt, wie die lokal entwickelte Website \u00fcber die LAN-IP-Adresse des Computers ge\u00f6ffnet wird, und best\u00e4tigt damit, dass der Entwicklungsserver von einem echten mobilen Ger\u00e4t aus erreichbar ist.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In der nativen App-Entwicklung ist ein solcher Ablauf normal. Bei iOS-Projekten arbeitet man typischerweise mit Xcode, Simulatoren und Tests auf echten Ger\u00e4ten. Bei Android geh\u00f6ren Android Studio, Emulatoren sowie USB- oder Wireless-Debugging oft selbstverst\u00e4ndlich zum Entwicklungsprozess.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Webentwicklung beginnt h\u00e4ufig lockerer: <code>localhost<\/code> \u00f6ffnen, das Browserfenster kleiner ziehen, vielleicht den Responsive-Modus in den DevTools verwenden und weitermachen. Das ist bequem, kann aber echte mobile Probleme bis sp\u00e4t im Projekt verstecken. Ein besserer Web-Workflow macht Tests auf echten Ger\u00e4ten zu einem normalen Teil der lokalen Entwicklung.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Diese Anleitung gilt nicht nur f\u00fcr Django. Die Methode funktioniert f\u00fcr die meisten lokalen Web-Stacks: Django, Laravel, Rails, Express, Vite, Next.js, Flask, FastAPI und viele andere.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Grundidee ist einfach:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Die lokale Netzwerk-IP des Computers finden.<\/li>\n\n\n\n<li>Den Entwicklungsserver auf <code>0.0.0.0<\/code> starten, nicht nur auf <code>127.0.0.1<\/code>.<\/li>\n\n\n\n<li>Falls das Framework Host-Validierung nutzt, den LAN-Host erlauben.<\/li>\n\n\n\n<li>Auf dem Smartphone <code>http:\/\/COMPUTER_IP:PORT\/<\/code> \u00f6ffnen.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">In diesem Artikel ist Django das getestete Beispielprojekt, aber die Netzwerkmethode ist framework-unabh\u00e4ngig.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die fertige Smartphone-URL in diesem Setup lautet:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>http:&#47;&#47;192.168.1.113:8000\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Deine IP-Adresse wird wahrscheinlich anders sein, aber die Methode bleibt gleich.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Die lokale Netzwerk-IP des Computers finden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Das Smartphone kann nicht <code>127.0.0.1<\/code> verwenden, um den Entwicklungsserver auf deinem Computer zu erreichen. Auf dem Smartphone bedeutet <code>127.0.0.1<\/code> das Smartphone selbst.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Der erste Schritt ist daher, die LAN-IP-Adresse des Computers zu finden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unter Windows PowerShell:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Get-NetIPAddress -AddressFamily IPv4 |\n  Where-Object { $_.IPAddress -notlike '127.*' -and $_.IPAddress -notlike '169.254*' } |\n  Select-Object InterfaceAlias, IPAddress, PrefixLength<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In diesem Projekt war die passende Netzwerkschnittstelle:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Ethernet 3    192.168.1.113    \/24<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das bedeutet: Wenn das Smartphone im selben Netzwerk ist, sollte es diese Adresse verwenden:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>http:&#47;&#47;192.168.1.113:8000\/<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">2. Den Entwicklungsserver an 0.0.0.0 binden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Viele Entwicklungsserver binden standardm\u00e4\u00dfig an <code>127.0.0.1<\/code>. Dadurch werden nur Verbindungen vom selben Computer akzeptiert.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr Tests auf dem Smartphone muss der Server auf allen Netzwerk-Interfaces lauschen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>0.0.0.0<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Der Unterschied ist entscheidend:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>127.0.0.1:8000   nur der Computer selbst\n0.0.0.0:8000     Zugriff aus dem lokalen Netzwerk m\u00f6glich<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Der genaue Befehl h\u00e4ngt vom Framework ab.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr das Django-Beispielprojekt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$env:DJANGO_ALLOWED_HOSTS=\"127.0.0.1,localhost,192.168.1.113\"\npython manage.py runserver 0.0.0.0:8000<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Bei anderen Stacks sieht der Befehl anders aus, aber die Idee ist dieselbe:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># Vite \/ React \/ Vue \/ Svelte\nnpm run dev -- --host 0.0.0.0\n\n# Next.js\nnext dev -H 0.0.0.0\n\n# Express\napp.listen(3000, \"0.0.0.0\")\n\n# Laravel\nphp artisan serve --host=0.0.0.0 --port=8000\n\n# Rails\nbin\/rails server -b 0.0.0.0\n\n# Flask\nflask run --host=0.0.0.0\n\n# FastAPI\nuvicorn main:app --host 0.0.0.0 --port 8000<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Andere Tools, dasselbe Netzwerkprinzip.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Host-Validierung im Framework beachten<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Einige Frameworks akzeptieren LAN-Anfragen sofort, sobald der Server auf <code>0.0.0.0<\/code> l\u00e4uft. Andere pr\u00fcfen zus\u00e4tzlich den Host.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Django ist eines der strengeren Beispiele. Es pr\u00fcft den eingehenden <code>Host<\/code>-Header. Wenn das Smartphone <code>http:\/\/192.168.1.113:8000\/<\/code> \u00f6ffnet, sieht Django:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Host: 192.168.1.113:8000<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn dieser Host nicht erlaubt ist, kann Django die Anfrage ablehnen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Statt eine einzelne IP fest in <code>settings.py<\/code> einzutragen, wurde das Django-Beispielprojekt so angepasst, dass erlaubte Hosts aus einer Umgebungsvariable gelesen werden:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import os\nfrom pathlib import Path\n\nALLOWED_HOSTS = &#91;\n    host.strip()\n    for host in os.environ.get(\"DJANGO_ALLOWED_HOSTS\", \"127.0.0.1,localhost\").split(\",\")\n    if host.strip()\n]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das h\u00e4lt das Projekt flexibel. Heute ist die IP <code>192.168.1.113<\/code>; morgen kann sie anders sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du ein anderes Framework verwendest, suche nach den entsprechenden Einstellungen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>allowed hosts<\/li>\n\n\n\n<li>trusted hosts<\/li>\n\n\n\n<li>host header validation<\/li>\n\n\n\n<li>dev server host allowlist<\/li>\n\n\n\n<li>CORS- oder Origin-Einstellungen, falls das Smartphone eine separate API aufruft<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Die Namen unterscheiden sich, aber der Grund ist derselbe: Das Framework muss dem Host vertrauen, den dein Smartphone verwendet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Pr\u00fcfen, ob der Server wirklich lauscht<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nach dem Start des Servers solltest du pr\u00fcfen, ob er nicht nur an localhost gebunden ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unter Windows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Get-NetTCPConnection -LocalPort 8000<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das Ergebnis sollte ungef\u00e4hr so aussehen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>LocalAddress    LocalPort    State\n0.0.0.0         8000         Listen<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In diesem Projekt wurde best\u00e4tigt, dass der Server hier lauscht:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>0.0.0.0:8000<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das bedeutet: LAN-Verbindungen k\u00f6nnen den Prozess erreichen, sofern die Firewall sie zul\u00e4sst.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Das Host-Verhalten testen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Da das Beispielprojekt Django verwendet, wurde das Host-Verhalten direkt getestet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Der erste Test beweist, dass ein LAN-Host die Startseite rendern kann, wenn er erlaubt ist:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@override_settings(ALLOWED_HOSTS=&#91;\"192.168.1.113\"])\ndef test_lan_host_can_render_homepage_when_allowed(self):\n    response = self.client.get(\n        reverse(\"services:service_list\"),\n        HTTP_HOST=\"192.168.1.113:8000\",\n    )\n\n    self.assertEqual(response.status_code, 200)\n    self.assertContains(response, \"Professional Cleaning Services\")<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Der zweite Test beweist das Gegenteil: Derselbe Host wird abgelehnt, wenn er nicht erlaubt ist.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@override_settings(ALLOWED_HOSTS=&#91;\"127.0.0.1\"])\ndef test_lan_host_is_rejected_when_not_allowed(self):\n    response = self.client.get(\n        reverse(\"services:service_list\"),\n        HTTP_HOST=\"192.168.1.113:8000\",\n    )\n\n    self.assertEqual(response.status_code, 400)<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Damit ist die Sicherheitsgrenze im Django-Beispiel dokumentiert. Die Smartphone-URL funktioniert nur, wenn der LAN-Host ausdr\u00fccklich erlaubt ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In einem anderen Framework w\u00fcrdest du dieses Verhalten anders testen. Du k\u00f6nntest zum Beispiel pr\u00fcfen, ob der Dev-Server auf der LAN-URL antwortet, ob die API den Origin akzeptiert oder ob eine Host-Allowlist die LAN-IP enth\u00e4lt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Die Testsuite ausf\u00fchren<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nach dem Hinzuf\u00fcgen der LAN-Host-Tests wurde die vollst\u00e4ndige Testsuite ausgef\u00fchrt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>python manage.py test<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ergebnis:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Found 13 test(s).\nSystem check identified no issues (0 silenced).\n.............\n----------------------------------------------------------------------\nRan 13 tests in 0.834s\n\nOK<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das Beispielprojekt hat damit automatisierte Abdeckung f\u00fcr das normale Website-Verhalten und f\u00fcr den Zugriff \u00fcber das lokale Netzwerk.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Localhost, LAN und TCP-Zugriff pr\u00fcfen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Zuerst wurde der lokale Computer gepr\u00fcft:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Invoke-WebRequest -UseBasicParsing http:\/\/127.0.0.1:8000\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ergebnis:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>localhost status=200 contains=True<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dann wurde die LAN-IP vom selben Computer aus gepr\u00fcft:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Invoke-WebRequest -UseBasicParsing http:\/\/192.168.1.113:8000\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ergebnis:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>lan status=200 contains=True<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Zum Schluss wurde der TCP-Port gepr\u00fcft:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Test-NetConnection -ComputerName 192.168.1.113 -Port 8000<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ergebnis:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>TcpTestSucceeded: True<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">An diesem Punkt lauscht der Entwicklungsserver auf dem richtigen Interface, das Beispiel-Framework erlaubt den LAN-Host, und der Port antwortet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Die Website auf dem Smartphone \u00f6ffnen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6ffne auf einem Smartphone im selben WLAN oder lokalen Netzwerk:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>http:&#47;&#47;192.168.1.113:8000\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn die Seite ge\u00f6ffnet wird, siehst du dieselbe lokale Website auf einem echten mobilen Ger\u00e4t.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Falls sie nicht ge\u00f6ffnet wird, pr\u00fcfe diese Punkte:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Smartphone und Computer sind im selben Netzwerk.<\/li>\n\n\n\n<li>Der Entwicklungsserver l\u00e4uft auf <code>0.0.0.0<\/code>, nicht nur auf <code>127.0.0.1<\/code>.<\/li>\n\n\n\n<li>Das Framework erlaubt die LAN-IP des Computers als Host, falls es Host-Validierung nutzt.<\/li>\n\n\n\n<li>Die Windows Firewall erlaubt eingehenden Zugriff auf den Prozess oder Port.<\/li>\n\n\n\n<li>Das Netzwerk ist privat\/vertraut und kein isoliertes Gast-WLAN.<\/li>\n\n\n\n<li>Falls das Frontend eine separate API aufruft, muss auch diese API vom Smartphone erreichbar sein.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">9. Warum das wichtig ist<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Der Responsive-Modus im Browser ist hilfreich, bleibt aber eine Ann\u00e4herung. Ein echtes Smartphone kann Details zeigen, die Desktop-Browser-Tools \u00fcbersehen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gr\u00f6\u00dfe von Touch-Zielen<\/li>\n\n\n\n<li>echtes Font-Rendering<\/li>\n\n\n\n<li>mobile Browser-Oberfl\u00e4che<\/li>\n\n\n\n<li>Netzwerklatenz<\/li>\n\n\n\n<li>Scroll-Verhalten<\/li>\n\n\n\n<li>Layout-Probleme rund um Sticky Header oder Formulare<\/li>\n\n\n\n<li>Verhalten der echten Ger\u00e4tetastatur<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">LAN-Zugriff macht es m\u00f6glich, die lokale Website vor dem Deployment auf einem echten Ger\u00e4t zu testen. Das ist eine kleine Setup-\u00c4nderung, verbessert aber das Feedback deutlich.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Damit n\u00e4hert sich Webentwicklung der Testdisziplin an, die in der mobilen App-Entwicklung bereits erwartet wird. Du brauchst kein Xcode oder Android Studio, um eine Website auf dem Smartphone zu testen, aber du brauchst einen lokalen Testpfad f\u00fcr echte Ger\u00e4te. Den Entwicklungsserver vom eigenen Smartphone aus zu \u00f6ffnen, liefert genau diesen Pfad mit sehr wenig Aufwand.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist besonders w\u00e4hrend aktiver Entwicklung n\u00fctzlich:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Du erkennst mobile Abstands- und Layout-Probleme, bevor der Kunde sie sieht.<\/li>\n\n\n\n<li>Du testest Navigation, Buttons, Formulare und Sticky Header mit echter Touch-Eingabe.<\/li>\n\n\n\n<li>Du siehst, ob das Design innerhalb der mobilen Browser-Oberfl\u00e4che weiterhin gut wirkt.<\/li>\n\n\n\n<li>Du pr\u00fcfst, ob lokale API-Aufrufe und Frontend-Verhalten au\u00dferhalb des Desktop-Browsers funktionieren.<\/li>\n\n\n\n<li>Du kannst echte Screenshots f\u00fcr Dokumentation, QA oder Kundenupdates erstellen.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Entscheidend ist das Timing. Mobile Testing sollte kein finaler Polishing-Schritt sein. Es sollte stattfinden, w\u00e4hrend die Website noch gebaut wird.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">10. Was, wenn der Kunde nicht im selben Netzwerk ist?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Die LAN-Methode hat eine klare Grenze: <code>192.168.1.113<\/code> ist eine private Netzwerkadresse. Sie funktioniert nur f\u00fcr Ger\u00e4te im selben lokalen Netzwerk.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn ein Kunde nicht in deinem WLAN oder lokalen Netzwerk ist, kann er diese Adresse nicht \u00f6ffnen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>http:&#47;&#47;192.168.1.113:8000\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr einen entfernten Kunden brauchst du einen \u00f6ffentlichen oder geteilten Zugriffsweg. Es gibt mehrere g\u00e4ngige Optionen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Option 1: Tempor\u00e4rer Tunnel<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr eine schnelle Demo kannst du ein Tunneling-Tool wie Ngrok, Cloudflare Tunnel, Tailscale Funnel oder LocalTunnel verwenden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Idee:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>local port 8000 -&gt; public HTTPS tunnel URL -&gt; Kundenbrowser<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Beispiel:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ngrok http 8000<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Der Kunde erh\u00e4lt eine URL wie:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;example-subdomain.ngrok-free.app<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist meistens der schnellste Weg, lokale Arbeit einem entfernten Kunden zu zeigen. Es eignet sich gut f\u00fcr kurze Demos, Design Reviews und schnelle Feedbackrunden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nutze es vorsichtig:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Den Tunnel nur so lange offen lassen, wie er gebraucht wird.<\/li>\n\n\n\n<li>Keine echten Secrets oder Produktionsdaten freigeben.<\/li>\n\n\n\n<li>HTTPS-Tunnel-URLs bevorzugen.<\/li>\n\n\n\n<li>Basic Authentication aktivieren, wenn das Tool sie unterst\u00fctzt.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Option 2: Privates Netzwerk oder VPN<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du Remote-Zugriff erm\u00f6glichen willst, ohne die Website \u00f6ffentlich zu machen, kannst du private Netzwerktools wie Tailscale, ZeroTier oder ein klassisches VPN verwenden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Der Kunde tritt einem kontrollierten privaten Netzwerk bei und \u00f6ffnet deinen Entwicklungsserver \u00fcber diese private Route.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist sicherer als ein \u00f6ffentlicher Tunnel, erfordert aber, dass der Kunde etwas installiert oder konfiguriert.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es funktioniert gut, wenn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>der Kunde technisch genug ist,<\/li>\n\n\n\n<li>Zugriff auf genehmigte Personen beschr\u00e4nkt bleiben soll,<\/li>\n\n\n\n<li>das Projekt nicht \u00f6ffentlich erreichbar sein darf,<\/li>\n\n\n\n<li>wiederholte private Reviews n\u00f6tig sind.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Option 3: Staging Deployment<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr Kundenfreigaben, QA und realistische Tests ist Staging meistens die professionellste Option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Statt deinen Laptop freizugeben, deployest du das Projekt in eine Staging-Umgebung:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Git repository -&gt; staging server -&gt; staging URL -&gt; Kundenreview<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Beispiel:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;staging.example.com<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Eine Staging-Umgebung ist besser, wenn:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>der Kunde wiederholt Zugriff braucht,<\/li>\n\n\n\n<li>mehrere Personen die Website pr\u00fcfen,<\/li>\n\n\n\n<li>echtes HTTPS- und Domain-Verhalten ben\u00f6tigt wird,<\/li>\n\n\n\n<li>Deployment-Logs wichtig sind,<\/li>\n\n\n\n<li>eine stabile URL gebraucht wird,<\/li>\n\n\n\n<li>der Review-Prozess Tage oder Wochen dauern kann.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr dieses Projekt w\u00e4re eine Managed Platform mit PostgreSQL und Umgebungsvariablen ein guter Staging-Zielort.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Option 4: Router Port Forwarding<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Technisch kannst du deinen Computer direkt freigeben, indem du Router Port Forwarding einrichtest.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das bedeutet meistens:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public router IP -&gt; forwarded port -&gt; local computer -&gt; dev server<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr Kundendemos ist das in der Regel die unattraktivste Option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gr\u00fcnde, es zu vermeiden:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Heim- oder B\u00fcro-IPs k\u00f6nnen sich \u00e4ndern,<\/li>\n\n\n\n<li>HTTPS ist nicht automatisch vorhanden,<\/li>\n\n\n\n<li>Firewall-Regeln k\u00f6nnen fragil sein,<\/li>\n\n\n\n<li>dein Computer muss online bleiben,<\/li>\n\n\n\n<li>der Entwicklungsserver wird direkter exponiert,<\/li>\n\n\n\n<li>ein offener Port wird leicht vergessen.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Nutze stattdessen einen Tunnel, ein privates Netzwerk oder ein Staging Deployment.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Entscheidungstabelle<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Die Faustregel ist einfach: LAN-Zugriff f\u00fcr deine eigenen Ger\u00e4te, Tunnel f\u00fcr schnelle Remote-Demos und Staging f\u00fcr ernsthafte Kundenreviews.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Damit eine lokale Website auf dem Smartphone ge\u00f6ffnet werden kann, m\u00fcssen drei Dinge stimmen:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Die LAN-IP des Computers muss bekannt sein.<\/li>\n\n\n\n<li>Der Entwicklungsserver muss auf <code>0.0.0.0<\/code> lauschen.<\/li>\n\n\n\n<li>Das Framework muss den LAN-Host erlauben, falls es Hosts validiert.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">In diesem Projekt lautet die funktionierende Smartphone-URL:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>http:&#47;&#47;192.168.1.113:8000\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das Setup wurde mit Framework-Tests, HTTP-Checks und einem TCP-Port-Check verifiziert. Django war das getestete Beispiel, aber die Methode gilt breit f\u00fcr lokale Webentwicklung.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr Kunden au\u00dferhalb deines Netzwerks reicht die LAN-URL nicht aus. Nutze einen tempor\u00e4ren Tunnel f\u00fcr schnelle Demos, ein privates Netzwerk f\u00fcr kontrollierten Zugriff oder ein Staging Deployment f\u00fcr professionelle Kundenreviews.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Evidence<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lokale Netzwerk-IP wurde als 192.168.1.113 erkannt<\/li>\n\n\n\n<li>Der Entwicklungsserver wurde auf 0.0.0.0:8000 gestartet<\/li>\n\n\n\n<li>Das Django-Beispielprojekt erlaubte 127.0.0.1, localhost und 192.168.1.113<\/li>\n\n\n\n<li>Localhost-Anfrage gab 200 zur\u00fcck<\/li>\n\n\n\n<li>LAN-IP-Anfrage gab 200 zur\u00fcck<\/li>\n\n\n\n<li>TCP-Test zu 192.168.1.113:8000 war erfolgreich<\/li>\n\n\n\n<li>Testsuite bestanden: 13 Tests<\/li>\n\n\n\n<li>Optionen f\u00fcr Remote-Kundenzugriff wurden konzeptionell dokumentiert: Tunnel, VPN\/privates Netzwerk, Staging Deployment und Production Deployment<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A practical walkthrough for making any local development website accessible from a real phone, so mobile testing becomes part of the build process instead of a final guess.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-56","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/de\/wp-json\/wp\/v2\/posts\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudosdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudosdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudosdigital.com\/de\/wp-json\/wp\/v2\/comments?post=56"}],"version-history":[{"count":1,"href":"https:\/\/mudosdigital.com\/de\/wp-json\/wp\/v2\/posts\/56\/revisions"}],"predecessor-version":[{"id":57,"href":"https:\/\/mudosdigital.com\/de\/wp-json\/wp\/v2\/posts\/56\/revisions\/57"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/de\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudosdigital.com\/de\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudosdigital.com\/de\/wp-json\/wp\/v2\/tags?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}