Kuidas parandada 404-vead pärast veebisaidi või äpi avaldamist

Kui su äpp töötab kohapeal, aga lehed annavad pärast juurutamist 404, on kõige tavalisem põhjus puuduv ühelehelise äpi (SPA) marsruutimine: server otsib faili nimega /dashboard, mida ei ole, sest see marsruut eksisteerib ainult JavaScriptis. Parandus on tagasilangemisreegel, mis serveerib äpi marsruutidele index.html-i. Teised põhjused on failid, mis puuduvad ehitusväljundist, suur- ja väiketähtede tundlikkus, lõpu-kaldkriipsude erinevused, vale baasteetee ja API-marsruudid, mida pole kunagi juurutatud.

Alusta sellest, et märgid täpselt üles, millise URL-i puhul 404 tuleb ja kuidas sinna jõudsid. Muster osutab otse põhjusele.

Samm 1: leia muster

Et näha tegelikku staatusekoodi, ava arendajatööriistad (parem klõps → Inspect), mine Network vahelehele, laadi uuesti ja vaata esimese päringu staatust.

Samm 2: lisa SPA tagasilangemine

See on klassikaline. React-, Vue- või Svelte-ühelehelises äpis on serveril vaid mõned tegelikud failid: index.html ja mõni JavaScripti- ja CSS-fail. Marsruudid nagu /dashboard või /projects/42 töötlevad brauseris ruuter.

• Lingi klõpsamine töötab: ruuter muudab URL-i ja joonistab uue lehe ilma serverilt küsimata.
• Värskendamine või lingi otsene avamine ebaõnnestub: brauser küsib serverilt /dashboard, serveril pole sellist faili ja ta tagastab 404.

Parandus on reegel, mis ütleb: kui päring ei vasta tegelikule failile, serveeri index.html staatusega 200 ja las ruuter võtab üle. Kuidas seda lisada, sõltub hostist. Kontrolli oma hosti praegust dokumentatsiooni, sest detailid muutuvad.

Veendu, et reegel ei neela päris faile: päringud /assets/app.js peavad ikka tagastama JavaScripti faili. Kui need tagastavad index.html-i, saad tühja lehe ja veateate „Failed to load module script“. Vaata tühja valge lehe parandamist.

Anna ruuterile ka kõige-püüdev marsruut, et URL-id, mis ei vasta ühelegi lehele, näitaksid sõbralikku „Lehte ei leitud“ sõnumit.

Kui sa ei saa serveri seadeid muuta, väldib räsi-marsruutimine (URL-id nagu /#/dashboard) probleemi, sest osa pärast #-i ei saadeta kunagi serverile. See on lahendus, mitte esimene valik, sest URL-id on koledamad ja otsingumootoritele vähem sõbralikud.

Raamistikud, mis renderdavad lehed serveris või genereerivad need ehitusajal (Next.js, Astro ja sarnased), omavad tavaliselt iga lehe jaoks päris faile või serveri marsruute, seega on see probleem seal harvem. Nende vastav probleem on leht, mida ehitusajal ei genereeritud.

Samm 3: kontrolli, mis tegelikult juurutati

Kui kõik annab 404, ei serveeri server tõenäoliselt sinu ehitatud äppi.

• Õige kaust. Host peab avaldama ehitusväljundi (tavaliselt dist Vite puhul, build Create React Appi puhul, out staatilise Next.js ekspordi puhul), mitte projekti juurkausta.
• Ehitus käivitus. Loe juurutuslogi. Kui ehitus ebaõnnestus, võib host juurutada üldse midagi või vana versiooni.
• index.html on avaldatava kausta ülatasemel, mitte alamkaustas.
• Baasteetee sobib. Kui äpp serveeritakse aadressil example.com/app/, peab see olema ehitatud selle baasiga (Vite'i base, React Routeri basename), muidu jääb iga marsruut ja vara puudu.

Samm 4: paranda puuduvad failid ja valed teed

Kui lehed laadivad, aga varad annavad 404:

• Suur- ja väiketähtede tundlikkus. macOS ja Windows käsitlevad tavaliselt Logo.png ja logo.png ühe failina. Enamik Linuxi servereid ei tee seda. Tee iga viide täpselt vastavaks tegelikule failinimele.
• Failid väljaspool ehitust. Vite'is kopeeritakse public/ kaustas olevad failid nagu on ja viidatakse neile juurest (/logo.png). Koodis imporditud failid pakitakse kokku. Mujal projektis olev fail ei pruugi üldse juurutuda.
• Suhtelised teed. images/photo.jpg lahendatakse praeguse URL-i suhtes, seega puruneb see lehel /blog/post-1. Kasuta /images/photo.jpg.
• Kohalikule kettale salvestatud üleslaadimised. Kui kasutajate üleslaadimised kirjutati serveri enda kausta, kaovad need, kui uus versioon juurutatakse. Kasuta korralikku failisalvestust.

Samm 5: käsitle lõpu-kaldkriipse järjekindlalt

/about ja /about/ on erinevad URL-id. Hostid erinevad selle poolest, kas nad lisavad või eemaldavad kaldkriipsu, ja mittevastavus sinu linkide või ruuteriga võib tekitada 404-sid või ümbersuunamise silmuseid. Vali üks stiil, tee oma lingid sellele vastavaks ja seadista host teist vormi ümber suunama. Järjekindlus aitab ka otsingumootoreid, kes muidu võivad näha iga lehe kahte koopiat.

Samm 6: paranda API-marsruudid, mis annavad 404

Kui leht laadib, aga Network vahelehel näed /api/... päringuid, mis annavad 404:

• Taustateenust pole juurutatud. Staatiline host serveerib ainult faile; taustateenus peab töötama kuskil.
• Tee on tootmises teistmoodi marsruudistatud. Arenduses võis proxy suunata /api eraldi serverisse. Tootmises peab host vajama samaväärset ümbersuunamist või esikülg peab kutsuma API päris aadressi.
• Tagasilangemine püüdis selle kinni. Kui API-päring tagastab index.html-i staatusega 200, on tagasilangemisreegel liiga lai. Jäta /api/* sellest välja.

Avaldatud äpi päringud /api/orders annavad 404, aga eelvaates need töötavad. Kontrolli, kuidas /api on eelvaates ja avaldatud äpis marsruudistatud, ja tee avaldatud esikülg taustateenusele samal viisil kättesaadavaks.

Samm 7: suuna vanad URL-id ümber

Kui oled kolinud teisest saidist või struktureerinud ümber, annavad vanad URL-id, mida inimesed ja otsingumootorid veel kasutavad, 404. Lisa iga vana URL-i jaoks 301 (püsiv) ümbersuunamine uude asukohta. Pea nimekirja ja testi proovi pärast käivitamist. Meie juhend WordPressi saidi kolimisest selgitab selle nimekirja koostamist.

Samm 8: kontrolli domeeni

Kui äpp töötab hosti aadressil, aga annab kohandatud domeenil 404, võib domeen osutada vale projekti peale või host ei pruugi domeeni veel sinu saidiga ühendada. Kontrolli DNS-kirjeid ja hosti domeeniseadeid. Vaata kuidas ühendada kohandatud domeen.

Tee oma päris 404-leht kasulikuks

Mõned 404-d on õiged: keegi kirjutas URL-i valesti. Tee see leht abivalmis:

• Lühike sõnum ja link esilehele ning peamistele jaotustele
• Otsinguväli, kui saidil on otsing
• Sama päis ja navigeerimine nagu ülejäänud saidil

Kus su seadistus lubab, tagasta päris 404-staatus lehtedele, mida ei ole. Lehe „ei leitud“ sõnum staatusega 200 on see, mida otsingumootorid nimetavad pehmeks 404-ks. See võib raisata nende indekseerimisaega ja segada indekseerimist.

Levinud vead

• Testimine ainult klõpsamisega. Testi alati, kleepides sügavad URL-id uude vahelehte ja värskendades.
• Tagasilangemine, mis püüab kõik kinni. Varad ja API-marsruudid tagastavad index.html-i, mis põhjustab tühje lehti ja segadust tekitavaid API-vigu.
• Vastamatu suur- ja väiketähtede kasutus, mis puruneb ainult serveris.
• Lähtekausta juurutamine ehitusväljundi asemel.
• URL-ide ümberstruktureerimine ilma ümbersuunamisteta. Iga vana link muutub 404-ks.

404-d Mythexis

Mythexis avaldad töötsoonist ja staatilised esikülje juurutatakse staatiliste saitidena. Kui avaldatud leht annab 404, anna agendile täpne URL, ütle, kas see juhtub värskendamisel või klõpsamisel ning mida Network vaheleht näitab, ja palu tal marsruutimist kontrollida. Avalda pärast parandust uuesti, sest elav äpp on hetkepilt kuni uuesti avaldamiseni. Kui hiljuti muutsid projekti ja elav sait tundub vana, avalda uuesti ja tee kõva värskendus. Kui ehitus ebaõnnestub, kasuta avaldamisdialoogis Fix with AI. Vaata dokumentatsioonist How to publish ja Publish troubleshooting ning meie juhendit AI-ga ehitatud äpi silumisest.

404 kontrollnimekiri

• Märgitud täpselt, millised URL-id annavad 404 ja kas klõpsamisel, värskendamisel või mõlemal
• SPA tagasilangemine serveerib index.html-i äpi marsruutidele staatusega 200
• Tagasilangemine jätab välja päris failid ja /api/*
• Ruuteril on kõige-püüdev „ei leitud“ marsruut
• Ehitusväljundi kaust on see, mis avaldatakse, ja ehitus õnnestus
• Baasteetee sobib kohaga, kus äpp serveeritakse
• Failinimede suur- ja väiketähed vastavad igale viitele
• Varateed algavad kaldkriipsuga /
• Lõpu-kaldkriipsu stiil on järjekindel
• API-marsruudid on juurutatud ja marsruudistatud tootmises
• 301 ümbersuunamised vanadele URL-idele
• Sügavad lingid testitud, kleepides need uude vahelehte

Küsimused