Ako opraviť 404 chyby po nasadení webu alebo aplikácie
Ak vaša aplikácia funguje lokálne, ale stránky po nasadení vracajú 404, najčastejšou príčinou je chýbajúce smerovanie jednostránkovej aplikácie (SPA): server hľadá súbor s názvom /dashboard, ktorý neexistuje, lebo táto trasa existuje len v JavaScripte. Oprava je pravidlo záložného smerovania, ktoré pre trasy aplikácie obslúži index.html. Ďalšie príčiny sú súbory chýbajúce vo výstupe buildu, cesty citlivé na veľkosť písmen, rozdiely v koncovom lomítku, zlá základná cesta a API trasy, ktoré nikdy neboli nasadené.
Začnite tým, že si poznačíte presne, ktorá URL vracia 404 a ako ste sa na ňu dostali. Vzor vás priamo nasmeruje na príčinu.
Krok 1: Nájdite vzor
| Čo vidíte | Najpravdepodobnejšia príčina | Ísť na |
|---|---|---|
| Domovská stránka funguje; kliknutie na odkazy funguje; ale obnovenie alebo otvorenie hlbokého odkazu dá 404 | Chýba záložné pravidlo SPA | Krok 2 |
| Všetky stránky vracajú 404, vrátane domovskej | Publikovaný nesprávny priečinok, alebo sa build nenasadil | Krok 3 |
| Stránky sa načítajú, ale obrázky, fonty alebo skripty vracajú 404 | Súbory chýbajú vo buildu, alebo sú cesty zlé | Krok 4 |
Funguje s /about/, zlyháva s /about (alebo naopak) | Spracovanie koncového lomítka | Krok 5 |
/About zlyháva, ale /about funguje | Server citlivý na veľkosť písmen | Krok 4 |
Stránka sa načíta, ale dátové volania na /api/... vracajú 404 | API nie je nasadené alebo nie je smerované | Krok 6 |
| Staré URL z predchádzajúcej stránky vracajú 404 | Chýbajú presmerovania | Krok 7 |
| Len na vlastnej doméne | Nastavenie DNS alebo domény | Krok 8 |
Aby ste videli skutočný stavový kód, otvorte vývojárske nástroje (pravý klik → Preskúmať), prejdite na kartu Sieť, obnovte stránku a pozrite sa na stav prvej požiadavky.
Krok 2: Pridajte záložné pravidlo SPA
Toto je klasický prípad. V jednostránkovej aplikácii React, Vue alebo Svelte má server len pár skutočných súborov: index.html a nejaký JavaScript a CSS. Trasy ako /dashboard alebo /projects/42 spracúva router v prehliadači.
- Kliknutie na odkaz funguje: router zmení URL a vykreslí novú stránku bez toho, aby sa pýtal server.
- Obnovenie alebo priamy odkaz zlyhá: prehliadač sa pýta servera na
/dashboard, server taký súbor nemá a vráti 404.
Oprava je pravidlo, ktoré hovorí: ak požiadavka nezodpovedá skutočnému súboru, vráť index.html so stavom 200 a nechaj router prevziať riadenie. Ako to pridáte, závisí od hostingu (overte aktuálnu dokumentáciu hostingu, pretože detaily sa menia):
| Hosting | Typické pravidlo záložného smerovania |
|---|---|
| Netlify | Súbor _redirects v publikovanom priečinku s /* /index.html 200 |
| Vercel | Prepisovanie v vercel.json zo všetkých ciest na /index.html (presety frameworkov to často riešia) |
| Cloudflare Pages | Predvolene obsluhuje záložné riešenie v štýle SPA, ak nie je na najvyššej úrovni súbor 404.html |
| Nginx | try_files $uri $uri/ /index.html; v bloku location / |
| Apache | Pravidlo prepisu v .htaccess, ktoré posiela požiadavky na nesúbory na index.html |
| GitHub Pages | Žiadne prepisy na strane servera; bežné obchádzky sú smerovanie cez hash alebo súbor 404.html, ktorý presmeruje |
Uistite sa, že pravidlo nepohlcuje skutočné súbory: požiadavky na /assets/app.js musia stále vracať JavaScriptový súbor. Ak vracajú index.html, dostanete prázdnu stránku s chybou „Failed to load module script“. Pozri ako opraviť prázdnu bielu stránku.
Routeru tiež dajte zachytávaciu trasu, aby URL, ktoré nezodpovedajú žiadnej stránke, zobrazili priateľskú správu „Stránka nebola nájdená“ namiesto ničoho.
Ak nemôžete meniť nastavenia servera, smerovanie cez hash (URL ako /#/dashboard) problém obíde, lebo časť za # sa nikdy neposiela na server. Je to obchádzka, nie prvá voľba: URL sú škaredšie a menej priateľské pre vyhľadávače.
Frameworky, ktoré renderujú stránky na serveri alebo ich generujú pri builde (Next.js, Astro a podobné), zvyčajne majú skutočné súbory alebo serverové trasy pre každú stránku, takže tento konkrétny problém je tam menej častý. Ich ekvivalentom je stránka, ktorá nebola vygenerovaná pri builde.
Krok 3: Skontrolujte, čo sa skutočne nasadilo
Ak sa všetko vracia ako 404, server pravdepodobne neobsluhuje váš zostavený web.
- Správny priečinok. Hosting musí publikovať výstup buildu (bežne
distpre Vite,buildpre Create React App,outpre statický export Next.js), nie koreň projektu. - Build prebehol. Prečítajte si log nasadenia. Ak build zlyhal, hosting možno nenasadil nič alebo staršiu verziu.
index.htmlje na najvyššej úrovni publikovaného priečinka, nie v podpriečinku.- Základná cesta zodpovedá. Ak je aplikácia obsluhovaná z
example.com/app/, musí byť zostavená s touto základnou cestou (basevo Vite,basenamev React Routeri), inak každá trasa a každý súbor minú cieľ.
Krok 4: Opravte chýbajúce súbory a zlé cesty
Ak stránky fungujú, ale súbory vracajú 404:
- Citlivosť na veľkosť písmen. macOS a Windows zvyčajne považujú
Logo.pngalogo.pngza ten istý súbor. Väčšina Linuxových serverov nie. Každý odkaz musí presne zodpovedať skutočnému názvu súboru. - Súbory mimo buildu. Vo Vite sa súbory v
public/kopírujú tak, ako sú, a odkazujú sa z koreňa (/logo.png). Súbory importované v kóde sa zabalia do buildu. Súbor niekde inde v projekte nemusí byť nasadený vôbec. - Relatívne cesty.
images/photo.jpgsa rieši vzhľadom k aktuálnej URL, takže sa rozbije na/blog/post-1. Použite/images/photo.jpg. - Nahrané súbory uložené na lokálny disk. Ak sa nahrané súbory používateľov zapisovali do priečinka servera, pri nasadení novej verzie zmiznú. Použite riadne úložisko súborov.
Krok 5: Riešte koncové lomítka dôsledne
/about a /about/ sú rozdielne URL. Hostingy sa líšia v tom, či koncové lomítko pridávajú alebo odoberajú, a nesúlad s vašimi odkazmi alebo so smerovačom môže spôsobiť 404 alebo nekonečné presmerovania. Vyberte jeden štýl, nechajte vaše odkazy používať ten istý a nakonfigurujte hosting tak, aby druhú formu presmeroval na ňu. Konzistencia pomáha aj vyhľadávačom, ktoré inak môžu vidieť dve kópie každej stránky.
Krok 6: Opravte API trasy, ktoré vracajú 404
Ak sa stránka načíta, ale v karte Sieť sa požiadavky /api/... vracajú s 404:
- Backend nie je nasadený. Statický hosting obsluhuje len súbory; backend musí bežať niekde inde.
- Cesta je v produkcii smerovaná inak. Vo vývoji mohol proxy preposielať
/apina samostatný server. V produkcii hosting potrebuje ekvivalentné prepisovanie, alebo frontend musí volať skutočnú adresu API. - Záložné pravidlo SPA to zachytilo. Požiadavka na API, ktorá vracia
index.htmlso stavom 200, znamená, že pravidlo záložného smerovania je príliš široké. Vylúčte/api/*z neho.
Publikovaná aplikácia volá /api/orders a dostáva 404, ale v náhľade to funguje. Skontroluj, ako je /api smerované v náhľade a v publikovanej aplikácii, a spravi tak, aby publikovaný frontend dosiahol backend rovnakým spôsobom.
Krok 7: Presmerujte staré URL
Ak ste sa presunuli z inej stránky alebo ste zmenili štruktúru, staré URL, ktoré ľudia a vyhľadávače stále používajú, vrátia 404. Pridajte 301 (trvalé) presmerovanie z každej starej URL na jej nové miesto. Veďte zoznam a po spustení otestujte vzorku. Náš návod na migráciu stránky WordPress popisuje, ako takýto zoznam zostaviť.
Krok 8: Skontrolujte doménu
Ak aplikácia funguje na adrese hostingu, ale na vlastnej doméne vracia 404, doména môže ukazovať na zlý projekt, alebo ju hosting ešte nemá pripojenú k vašej stránke. Skontrolujte DNS záznamy a nastavenia domény v hostingu. Pozri ako pripojiť vlastnú doménu.
Nech je vaša skutočná stránka 404 užitočná
Niektoré 404 sú správne: niekto preklepol URL. Urobte túto stránku užitočnou:
- Krátka správa a odkaz na domovskú stránku a kľúčové sekcie
- Vyhľadávacie pole, ak má stránka vyhľadávanie
- Rovnaká hlavička a navigácia ako zvyšok stránky
Tam, kde to vaše nastavenie dovolí, vracajte skutočný stavový kód 404 pre stránky, ktoré neexistujú. Správa „nenájdené“ vrátená so stavom 200 je to, čo vyhľadávače nazývajú soft 404, a môže plytvať ich časom prehľadávania a zmiasť indexovanie.
Časté chyby
- Testovanie len klikaním. Vždy testujte vložením hlbokých URL do nového panela a obnovením.
- Záložné pravidlo, ktoré zachytí všetko. Súbory a API trasy vracajú
index.html, čo spôsobuje prázdne stránky a mätúce chyby API. - Nesúlad veľkosti písmen, ktorý sa rozbije len na serveri.
- Nasadenie zdrojového priečinka namiesto výstupu buildu.
- Preštrukturovanie URL bez presmerovaní. Každý starý odkaz sa stane 404.
404 v Mythex
V Mythex publikujete z pracovného priestoru a statické frontendy sa nasadzujú ako statické stránky. Ak publikovaná stránka vracia 404, dajte agentovi presnú URL, či sa to deje pri obnovení alebo pri kliknutí, a čo ukazuje karta Sieť, a požiadajte ho, aby skontroloval smerovanie. Po oprave znovu publikujte, lebo živá aplikácia je snímka až dovtedy, kým ju znovu nepublikujete. Ak ste nedávno zmenili projekt a živá stránka vyzerá staro, znovu publikujte a tvrdo obnovte. Ak build zlyhá, použite v dialógu publikovania Opraviť s AI. Pozrite si Ako publikovať a Riešenie problémov pri publikovaní v dokumentácii a náš návod ako ladiť aplikáciu vytvorenú s AI.
Kontrolný zoznam 404
- Zapísané presné URL, ktoré vracajú 404, a či pri kliknutí, obnovení alebo oboch
- Záložné pravidlo SPA obsluhuje
index.htmlpre trasy aplikácie so stavom 200 - Záložné pravidlo vylučuje skutočné súbory a
/api/* - Router má zachytávaciu trasu „nenájdené“
- Publikovaný je výstupný priečinok buildu a build bol úspešný
- Základná cesta zodpovedá tomu, kde je aplikácia obsluhovaná
- Názvy súborov sa zhodujú s každým odkazom vrátane veľkosti písmen
- Cesty k súborom začínajú
/ - Štýl koncového lomítka je konzistentný
- API trasy sú nasadené a v produkcii smerované
- 301 presmerovania pre staré URL
- Hlboké odkazy otestované vložením do nového panela
Otázky
Prečo dostávam 404, keď obnovím stránku v mojej React aplikácii?
V jednostránkovej aplikácii trasy ako /dashboard existujú len v JavaScripte. Kliknutie na odkaz funguje, lebo router ho spracuje v prehliadači, ale obnovenie pýta od servera súbor /dashboard, ktorý neexistuje. Oprava je pravidlo záložného smerovania, ktoré pre trasy aplikácie posiela index.html.
Ako pridám záložné pravidlo SPA na Netlify, Vercel alebo Nginx?
Na Netlify pridajte súbor _redirects s riadkom /* /index.html 200. Na Verceli pridajte prepisovanie vo vercel.json, ktoré posiela všetky cesty na /index.html. Na Nginx použite try_files $uri $uri/ /index.html; v bloku location. Pozrite si dokumentáciu vášho hostingu, pravidlá sa menia.
Prečo sa mi obrázky alebo súbory po nasadení zobrazujú ako 404?
Zvyčajne súbor nie je vo výstupe buildu, veľkosť písmen v ceste sa nezhoduje (servery sú často citlivé na veľkosť písmen, kým váš notebook nie), alebo je cesta relatívna tam, kde má začínať lomítkom.
Má chýbajúca stránka vracať skutočný stavový kód 404?
Áno. Zobrazte užitočnú stránku pre nenájdený obsah, ale so stavovým kódom 404, kde to vaše nastavenie dovoľuje. Vyhľadávače považujú správu „nenájdené“ vrátenú so stavom 200 za takzvanú soft 404, ktorá plytvá časom prehľadávania a môže zmiasť indexovanie.