Jak opravit chyby 404 po nasazení webu nebo aplikace

Pokud vaše aplikace funguje lokálně, ale stránky po nasazení vracejí 404, nejčastější příčinou je chybějící směrování jednostránkové aplikace (SPA): server hledá soubor /dashboard, který neexistuje, protože tato trasa existuje jen v JavaScriptu. Oprava je pravidlo záložního směrování, které vrací index.html pro aplikační trasy. Další příčiny jsou soubory chybějící ve výstupu sestavení, cesty citlivé na velikost písmen, rozdíly v koncovém lomítku, špatná základní cesta a API trasy, které nebyly nasazeny.

Nejdřív si zapište přesně, která URL vrací 404 a jak jste se na ni dostali. Vzorec obvykle přímo ukáže příčinu.

Krok 1: Najděte vzorec

Pro zobrazení skutečného stavového kódu otevřete vývojářské nástroje (pravý klik → Prozkoumat), přejděte na záložku Síť, obnovte stránku a podívejte se na stav prvního požadavku.

Krok 2: Přidejte záložní SPA směrování

Tohle je klasický případ. V jednostránkové aplikaci React, Vue nebo Svelte má server jen hrstku skutečných souborů: index.html a několik JavaScriptových a CSS souborů. Trasy jako /dashboard nebo /projects/42 zpracovává směrovač v prohlížeči.

• Kliknutí na odkaz funguje: směrovač změní URL a vykreslí novou stránku, aniž by se ptal serveru.
• Obnovení nebo přímé otevření odkazu selže: prohlížeč se serveru zeptá na /dashboard, server takový soubor nemá a vrátí 404.

Oprava je pravidlo, které říká: pokud požadavek neodpovídá skutečnému souboru, vraťte index.html se stavem 200 a nechte převzít směrovač. Jak to přidat, závisí na hostingu (ověřte aktuální dokumentaci hostingu, protože podrobnosti se mění):

Ujistěte se, že pravidlo nepohltí skutečné soubory: požadavky na /assets/app.js musí dál vracet JavaScriptový soubor. Pokud místo něj vracejí index.html, dostanete prázdnou stránku s chybou „Failed to load module script“. Viz oprava prázdné bílé stránky.

Dejte také směrovači zachytávací trasu, aby URL, které neodpovídají žádné stránce, zobrazily přátelské „Stránka nenalezena“ místo prázdna.

Pokud nemůžete změnit nastavení serveru, směrování přes hash (URL jako /#/dashboard) problém obchází, protože část za # se na server nikdy neposílá. Je to spíš provizorní řešení než první volba: URL jsou méně hezké a hůř se indexují ve vyhledávačích.

Frameworky, které stránky renderují na serveru nebo je generují při sestavení (Next.js, Astro a podobné), obvykle mají skutečné soubory nebo serverové trasy pro každou stránku, takže tento problém je tam méně častý. Jejich ekvivalentem je stránka, která nebyla vygenerována při sestavení.

Krok 3: Zkontrolujte, co bylo skutečně nasazeno

Pokud se všechno vrací jako 404, server pravděpodobně neobsluhuje vaši sestavenou aplikaci.

• Správná složka. Hosting musí publikovat výstup sestavení (běžně dist pro Vite, build pro Create React App, out pro statický export Next.js), ne kořen projektu.
• Sestavení proběhlo. Přečtěte si log nasazení. Pokud sestavení selhalo, hosting možná nenasadil nic, nebo starou verzi.
• index.html je v nejvyšší úrovni publikované složky, ne v podsložce.
• Základní cesta sedí. Pokud je aplikace servírována z priklad.cz/app/, musí být sestavena s touto základní cestou (base ve Vite, basename v React Routeru), jinak každá trasa a každý asset mine cíl.

Krok 4: Opravte chybějící soubory a špatné cesty

Když se stránky načtou, ale assety vrací 404:

• Citlivost na velikost písmen. macOS a Windows obvykle berou Logo.png a logo.png jako stejný soubor. Většina Linuxových serverů ne. Každý odkaz musí přesně odpovídat skutečnému názvu souboru.
• Soubory mimo sestavení. Ve Vite se soubory v public/ kopírují beze změny a odkazují se z kořene (/logo.png). Soubory importované v kódu se zabalí do bundlu. Soubor někde jinde v projektu se nemusí nasadit vůbec.
• Relativní cesty. images/photo.jpg se vyhodnocuje vzhledem k aktuální URL, takže se rozbije na /blog/post-1. Použijte /images/photo.jpg.
• Nahrané soubory uložené na lokální disk. Pokud se uživatelské nahrávky zapisovaly do vlastní složky serveru, po nasazení nové verze zmizí. Použijte správné úložiště souborů.

Krok 5: Jednotně řešte koncová lomítka

/about a /about/ jsou různé URL. Hostingy se liší v tom, zda lomítko přidávají nebo odebírají, a neshoda s vašimi odkazy nebo s směrovačem může vést k 404 nebo smyčkám přesměrování. Zvolte jeden styl, nechte odkazy používat ten samý a nastavte hosting, aby druhou variantu přesměroval na tu zvolenou. Konzistence pomáhá i vyhledávačům, které jinak mohou vidět dvě kopie každé stránky.

Krok 6: Opravte API trasy, které vracejí 404

Pokud se stránka načte, ale v záložce Síť se požadavky na /api/... vrací s 404:

• Backend není nasazen. Statický hosting slouží jen soubory; backend musí běžet někde jinde.
• Cesta se v produkci směruje jinak. Ve vývoji mohl proxy přeposílat /api na samostatný server. V produkci hosting potřebuje ekvivalentní přepis, nebo frontend musí volat skutečnou adresu API.
• Záložní SPA směrování to zachytilo. Požadavek na API, který vrací index.html se stavem 200, znamená, že záložní pravidlo je příliš široké. Vyjměte z něj /api/*.

Publikovaná aplikace posílá požadavky na /api/orders a vrací 404, ale v náhledu fungují. Zkontrolujte, jak je /api směrováno v náhledu a v publikované aplikaci, a udělejte tak, aby publikovaný frontend dosáhl backendu stejným způsobem.

Krok 7: Přesměrujte staré URL

Pokud jste přešli z jiného webu nebo jste přestavěli strukturu, staré URL, která lidé a vyhledávače stále používají, budou vracet 404. Od každé staré URL přidejte trvalé přesměrování 301 na její nový domov. Veďte seznam a po spuštění otestujte vzorek. Náš návod ke stěhování WordPress webu pokrývá sestavení tohoto seznamu.

Krok 8: Zkontrolujte doménu

Pokud aplikace funguje na adrese hostingu, ale na vaší vlastní doméně vrací 404, doména může ukazovat na špatný projekt, nebo hosting k vašemu webu ještě nepřipojil doménu. Zkontrolujte záznamy DNS a nastavení domény u hostingu. Viz jak připojit vlastní doménu.

Udělejte skutečnou stránku 404 užitečnou

Některé 404 jsou správné: někdo překlepl URL. Udělejte z té stránky užitečnou:

• Krátkou zprávu a odkaz na úvodní stránku a klíčové sekce
• Vyhledávací pole, pokud web vyhledávání má
• Stejnou hlavičku a navigaci jako zbytek webu

Tam, kde to vaše nastavení umožňuje, vraťte pro neexistující stránky skutečný stavový kód 404. Zpráva „nenalezeno“ vrácená se stavem 200 je to, čemu vyhledávače říkají měkká 404, a může plýtvat jejich časem procházení a mást indexování.

Časté chyby

• Testovat jen klikáním. Vždy testujte vložením hlubokých URL do nové záložky a obnovením.
• Záložní pravidlo, které chytá všechno. Assety a API trasy vracejí index.html, což způsobuje prázdné stránky a matoucí chyby API.
• Nesouhlasící velikost písmen, která se projeví jen na serveru.
• Nasazení zdrojové složky místo výstupu sestavení.
• Přestavba URL bez přesměrování. Každý starý odkaz se stane 404.

404 v Mythex

V Mythex publikujete z pracovního prostoru a statické frontendy se nasazují jako statické weby. Pokud publikovaná stránka vrací 404, dejte agentovi přesnou URL, napište, zda se to děje při obnovení, nebo při kliknutí, a co ukazuje záložka Síť, a požádejte ho o kontrolu směrování. Po opravě publikujte znovu, protože živá aplikace je snímek, dokud ji znovu nepublikujete. Pokud jste nedávno projekt změnili a živý web vypadá staře, publikujte znovu a udělejte tvrdé obnovení. Pokud sestavení selže, použijte v dialogu publikace Fix with AI. Viz Jak publikovat a Řešení problémů s publikací v dokumentaci a náš návod jak ladit aplikaci postavenou s AI.

Kontrolní seznam 404

• Zapsáno, které URL vrací 404 a zda při kliknutí, obnovení, nebo obojím
• Záložní SPA pravidlo vrací index.html pro aplikační trasy, se stavem 200
• Záložní pravidlo vynechává skutečné soubory a /api/*
• Směrovač má zachytávací trasu „nenalezeno“
• Publikována je složka výstupu sestavení a sestavení proběhlo
• Základní cesta odpovídá místu, kde je aplikace servírována
• Velikost písmen v názvech souborů odpovídá každému odkazu
• Cesty k assetům začínají /
• Styl koncového lomítka je konzistentní
• API trasy nasazeny a směrovány v produkci
• 301 přesměrování pro staré URL
• Hluboké odkazy otestovány vložením do nové záložky

Otázky