Kaip ištaisyti 404 klaidas po svetainės ar programėlės diegimo

Jei jūsų programėlė veikia lokaliai, bet puslapiai po diegimo grąžina 404, dažniausia priežastis – trūkstamas vienos puslapio programėlės (SPA) maršrutizavimas: serveris ieško failo, pavadinto /dashboard, kurio nėra, nes šis maršrutas egzistuoja tik JavaScript kode. Pataisymas – atsarginė taisyklė, kuri programėlės maršrutams pateikia index.html. Kitos priežastys: kūrimo rezultate trūkstami failai, kelių raidžių dydis, galūnės brūkšnio skirtumai, neteisingas bazinis kelias ir API maršrutai, kurie niekada nebuvo įdiegti.

Pradėkite pastebėdami, kuris tiksliai URL rodo 404 ir kaip į jį patekote. Šablonas tiesiai nukreipia į priežastį.

1 žingsnis: raskite šabloną

Norėdami pamatyti tikrąjį statuso kodą, atidarykite kūrėjo įrankius (dešiniuoju pelės klavišu → Inspect), eikite į Network skirtuką, atnaujinkite puslapį ir pažiūrėkite pirmosios užklausos statusą.

2 žingsnis: pridėkite SPA atsarginį variantą

Tai klasikinė problema. React, Vue ar Svelte vienos puslapio programėlėje serveris turi tik kelis tikrus failus: index.html ir kelis JavaScript bei CSS failus. Maršrutus, pavyzdžiui, /dashboard ar /projects/42, tvarko naršyklėje veikiantis maršrutizatorius.

• Paspaudus nuorodą veikia: maršrutizatorius pakeičia URL ir nupiešia naują puslapį, nieko neprašydamas serverio.
• Atnaujinus puslapį arba atidarius nuorodą tiesiogiai neveikia: naršyklė prašo serverio /dashboard, serveris tokio failo neturi ir grąžina 404.

Pataisymas – taisyklė, kuri sako: jei užklausa neatitinka tikro failo, pateikti index.html su 200 statusu ir leisti maršrutizatoriui perimti valdymą. Kaip tai įdėti, priklauso nuo serverio (patikrinkite dabartinę serverio dokumentaciją, nes detalės keičiasi):

Įsitikinkite, kad taisyklė neperima tikrų failų: užklausos į /assets/app.js vis tiek turi grąžinti JavaScript failą. Jei jos grąžina index.html, gausite tuščią puslapį su klaida „Failed to load module script“. Žr. kaip ištaisyti tuščią baltą puslapį.

Taip pat suteikite maršrutizatoriui visas gaudantį maršrutą, kad URL, neatitinkantys jokio puslapio, rodytų draugišką pranešimą „Puslapis nerastas“, o ne tuštumą.

Jei negalite keisti serverio nustatymų, maišos maršrutizavimas (URL pavyzdžiui /#/dashboard) išvengia problemos, nes dalis po # niekada nesiunčiama serveriui. Tai apėjimo būdas, o ne pirmas pasirinkimas: URL atrodo prasčiau ir mažiau draugiški paieškos sistemoms.

Karkasai, kurie puslapius generuoja serveryje ar kūrimo metu (Next.js, Astro ir panašūs), paprastai turi tikrus failus ar serverio maršrutus kiekvienam puslapiui, todėl ši konkreti problema ten pasitaiko rečiau. Jų atitikmuo – puslapis, kuris nebuvo sugeneruotas kūrimo metu.

3 žingsnis: patikrinkite, kas iš tiesų įdiegta

Jei viskas rodo 404, serveris greičiausiai neteikia jūsų kurtos programėlės.

• Teisingas aplankas. Serveris turi publikuoti kūrimo rezultatą (dažnai dist Vite, build Create React App, out statiniam Next.js eksportui), o ne projekto šakninį katalogą.
• Kūrimas įvyko. Perskaitykite diegimo žurnalą. Jei kūrimas nepavyko, serveris galbūt nieko neįdiegė arba įdiegė seną versiją.
• index.html yra viršutiniame publikuojamo aplanko lygyje, o ne poaplankyje.
• Bazinis kelias sutampa. Jei programėlė teikiama adresu example.com/app/, ji turi būti sukurta su tuo pačiu baziniu keliu (Vite base, React Router basename), kitaip kiekvienas maršrutas ir išteklius nepataiko.

4 žingsnis: ištaisykite trūkstamus failus ir neteisingus kelius

Kai puslapiai įkeliami, bet ištekliai rodo 404:

• Raidžių dydis. macOS ir Windows paprastai laiko Logo.png ir logo.png tuo pačiu failu. Dauguma Linux serverių – ne. Padarykite, kad kiekviena nuoroda tiksliai atitiktų tikrą failo pavadinimą.
• Failai už kūrimo ribų. Vite projekte public/ aplanko failai kopijuojami tiesiogiai ir nurodomi nuo šaknies (/logo.png). Kode importuojami failai supakuojami. Failas, esantis kitur projekte, gali visai nebūti įdiegtas.
• Santykiniai keliai. images/photo.jpg išsprendžiamas pagal dabartinį URL, todėl lūžta ties /blog/post-1. Naudokite /images/photo.jpg.
• Įkelti failai, įrašyti į vietinį diską. Jei naudotojų įkėlimai buvo įrašyti į serverio aplanką, jie dings, kai bus įdiegta nauja versija. Naudokite tinkamą failų saugyklą.

5 žingsnis: vienodai tvarkykite galūnės brūkšnius

/about ir /about/ yra skirtingi URL. Serveriai skiriasi tuo, ar prideda, ar pašalina brūkšnį, o neatitikimas su jūsų nuorodomis ar maršrutizatoriumi gali sukelti 404 arba nukreipimų ciklus. Pasirinkite vieną stilių, padarykite nuorodas tokias pačias ir sukonfigūruokite serverį, kad kitą formą nukreiptų į ją. Nuoseklumas padeda ir paieškos sistemoms, kurios kitaip gali matyti dvi kiekvieno puslapio kopijas.

6 žingsnis: ištaisykite API maršrutus, kurie rodo 404

Jei puslapis įkeliamas, bet Network skirtuke matote /api/... užklausas, grąžinančias 404:

• Galinė dalis neįdiegta. Statinis serveris teikia tik failus; galinė dalis turi veikti kažkur kitur.
• Kelias produkcijoje maršrutizuojamas kitaip. Kūrimo metu tarpinis serveris galėjo perduoti /api atskiram serveriui. Produkcijoje serveriui reikia lygiavertio perrašymo arba priekinė dalis turi kreiptis į tikrą API adresą.
• SPA atsarginis variantas pagavo užklausą. API užklausa, kuri grąžina index.html su 200 statusu, reiškia, kad atsarginė taisyklė per plati. Išskirkite iš jos /api/*.

Publikuotos programėlės užklausos į /api/orders grąžina 404, nors peržiūroje jos veikia. Patikrinkite, kaip /api maršrutizuojamas peržiūroje ir publikuotoje programėlėje, ir padarykite, kad publikuota priekinė dalis pasiektų galinę dalį tuo pačiu būdu.

7 žingsnis: nukreipkite senus URL

Jei persikėlėte iš kitos svetainės ar ją perstruktūravote, seni URL, kuriuos vis dar naudoja žmonės ir paieškos sistemos, rodys 404. Pridėkite 301 (nuolatinį) nukreipimą iš kiekvieno seno URL į jo naują vietą. Laikykite sąrašą ir po paleidimo patikrinkite pavyzdį. Mūsų vadove kaip perkelti WordPress svetainę aprašyta, kaip tokį sąrašą sudaryti.

8 žingsnis: patikrinkite domeną

Jei programėlė veikia serverio adresu, bet rodo 404 jūsų pasirinktame domene, domenas gali rodyti į neteisingą projektą arba serveris dar nepririšo domeno prie jūsų svetainės. Patikrinkite DNS įrašus ir serverio domeno nustatymus. Žr. kaip prijungti savo domeną.

Padarykite tikrą 404 puslapį naudingą

Kai kurie 404 yra teisingi: kažkas parašė URL klaidingai. Padarykite tą puslapį naudingą:

• Trumpas pranešimas ir nuoroda į pagrindinį puslapį bei svarbiausias sritis
• Paieškos laukas, jei svetainėje yra paieška
• Ta pati antraštė ir navigacija kaip ir kitose svetainės dalyse

Kur jūsų sąranka leidžia, grąžinkite tikrą 404 statusą puslapiams, kurių nėra. Pranešimas „nerasta“, grąžinamas su 200 statusu, paieškos sistemų vadinamas minkšta 404 klaida, ir jis gali eikvoti jų naršymo laiką bei supainioti indeksavimą.

Dažniausios klaidos

• Testavimas tik spaudinėjant. Visada tikrinkite įklijuodami giluminius URL į naują skirtuką ir atnaujindami puslapį.
• Atsarginis variantas, kuris gaudo viską. Ištekliai ir API maršrutai grąžina index.html, o tai sukelia tuščius puslapius ir painias API klaidas.
• Nesutampantys raidžių dydžiai, kurie lūžta tik serveryje.
• Šaltinio aplanko diegimas vietoj kūrimo rezultato.
• URL perstruktūravimas be nukreipimų. Kiekviena sena nuoroda tampa 404.

404 klaidos Mythex

Mythex publikuojate iš darbo srities, o statinės priekinės dalys diegiamos kaip statinės svetainės. Jei publikuotas puslapis rodo 404, nurodykite agentui tikslų URL, ar tai nutinka atnaujinus, ar paspaudus nuorodą, ką rodo Network skirtukas, ir paprašykite patikrinti maršrutizavimą. Po pataisymo publikuokite iš naujo, nes tiesioginė programėlė yra momentinė nuotrauka, kol ją iš naujo nepublikuojate. Jei neseniai pakeitėte projektą, o tiesioginė svetainė atrodo sena, publikuokite iš naujo ir atlikite priverstinį atnaujinimą. Jei kūrimas nepavyksta, publikavimo dialoge naudokite Fix with AI. Žr. dokumentacijos kaip publikuoti ir publikavimo problemų sprendimas, taip pat mūsų vadovą kaip ištaisyti DI sukurtą programėlę.

404 kontrolinis sąrašas

• Užfiksuota, kurie tiksliai URL rodo 404 ir ar paspaudus, atnaujinus, ar abiem atvejais
• SPA atsarginis variantas pateikia index.html programėlės maršrutams su 200 statusu
• Atsarginis variantas neapima tikrų failų ir /api/*
• Maršrutizatorius turi visas gaudantį maršrutą „nerasta“
• Publikuojamas kūrimo rezultato aplankas ir kūrimas pavyko
• Bazinis kelias sutampa su vieta, kur programėlė teikiama
• Failų pavadinimų raidžių dydis sutampa su kiekviena nuoroda
• Išteklių keliai prasideda /
• Galūnės brūkšnio stilius nuoseklus
• API maršrutai įdiegti ir maršrutizuojami produkcijoje
• 301 nukreipimai senoms URL
• Giluminės nuorodos patikrintos įklijuojant jas į naują skirtuką

Klausimai