Jinsi ya Kurekebisha Makosa ya 404 Baada ya Kuweka Tovuti au App Yako Hewani

Ikiwa app yako inafanya kazi kwenye kompyuta yako lakini kurasa zinatoa 404 baada ya kuweka hewani, sababu ya kawaida zaidi ni kukosekana kwa routing ya single-page app (SPA): server inatafuta faili linaloitwa /dashboard ambalo halipo, kwa sababu njia hiyo ipo kwenye JavaScript pekee. Suluhisho ni kanuni ya fallback inayotoa index.html kwa njia za app. Sababu nyingine ni faili zinazokosekana kwenye matokeo ya build, njia zenye herufi kubwa au ndogo, tofauti ya slash ya mwisho, njia ya msingi isiyo sahihi, na API zisizowekwa hewani.

Anza kwa kuandika URL kamili inayotoa 404 na jinsi ulivyofika hapo. Muundo unaelekeza moja kwa moja kwenye chanzo.

Hatua ya 1: Tafuta muundo

Ili kuona hali halisi ya msimbo, fungua zana za msanidi (bonyeza kulia → Inspect), nenda kwenye kichupo cha Network, onyesha upya, na uangalie hali ya ombi la kwanza.

Hatua ya 2: Ongeza fallback ya SPA

Hii ni ile ya kawaida. Kwenye app ya ukurasa mmoja ya React, Vue au Svelte, server ina faili chache halisi: index.html na baadhi ya faili za JavaScript na CSS. Njia kama /dashboard au /projects/42 zinashughulikiwa na router kwenye kivinjari.

• Kubofya kiungo kunafanya kazi: router inabadilisha URL na kuchora ukurasa mpya bila kuuliza server.
• Kuonyesha upya au kufungua kiungo moja kwa moja kunashindwa: kivinjari kinauliza server /dashboard, server haina faili kama hilo, na inarudisha 404.

Suluhisho ni kanuni inayosema: ikiwa ombi halilingani na faili halisi, toa index.html kwa hali 200, na acha router ichukue. Jinsi ya kuiongeza inategemea host (angalia docs za sasa za host yako, kwani maelezo hubadilika):

Hakikisha kanuni haichukui faili halisi: maombi ya /assets/app.js lazima bado yarudishe faili la JavaScript. Yakirudisha index.html, utapata ukurasa mweupe wenye hitilafu ya "Failed to load module script". Tazama jinsi ya kurekebisha ukurasa mweupe tupu.

Pia mpe router route ya kukamata yote ili URL zisizolingana na ukurasa wowote zionyeshe ukurasa wa "Ukurasa haupatikani" wa kirafiki badala ya kutoonyesha chochote.

Ukiwezi kubadilisha mipangilio ya server, routing ya hash (URL kama /#/dashboard) inaepuka tatizo, kwa sababu sehemu iliyo baada ya # haitumwi kamwe kwa server. Ni suluhisho la muda, si chaguo la kwanza: URL ni mbaya zaidi na ni ngumu zaidi kwa injini za utafutaji.

Frameworks zinazoonyesha kurasa upande wa server au kuzitengeneza wakati wa build (Next.js, Astro na zinazofanana) kwa kawaida zina faili halisi au routes za server kwa kila ukurasa, kwa hiyo tatizo hili ni la kawaida kidogo huko. Sawa yake huko ni ukurasa ambao haukuzalishwa wakati wa build.

Hatua ya 3: Angalia kile kilichowekwa hewani

Ikiwa kila kitu kinatoa 404, server pengine haitoi app yako iliyojengwa.

• Folda sahihi. Host lazima ichapishe matokeo ya build (kwa kawaida dist kwa Vite, build kwa Create React App, out kwa export tuli ya Next.js), si folda ya mzizi wa mradi.
• Build ilikimbia. Soma kumbukumbu ya deploy. Ikiwa build ilishindwa, host inaweza kuwa haijaweka chochote, au toleo la zamani.
• index.html iko kwenye kiwango cha juu cha folda iliyochapishwa, si kwenye folda ndogo.
• Njia ya msingi inalingana. Ikiwa app inatolewa kutoka example.com/app/, lazima ijengwe nayo (base ya Vite, basename ya React Router), la sivyo kila route na asset zitakosekana.

Hatua ya 4: Rekebisha faili zinazokosekana na njia zisizo sahihi

Kurasa zinapopakia lakini assets zinatoa 404:

• Herufi kubwa au ndogo. macOS na Windows kwa kawaida huona Logo.png na logo.png kama faili moja. Servers nyingi za Linux hazifanyi hivyo. Fanya kila marejeo lilingane kabisa na jina halisi la faili.
• Faili nje ya build. Kwenye Vite, faili zilizo kwenye public/ hunakiliwa jinsi zilivyo na kurejelewa kutoka mzizi (/logo.png). Faili zinazoagizwa kwenye msimbo zinajumuishwa kwenye bundle. Faili iliyo mahali pengine kwenye mradi inaweza kutowekwa kabisa.
• Njia za jamaa. images/photo.jpg inatatuliwa kulingana na URL ya sasa, kwa hiyo inavunjika kwenye /blog/post-1. Tumia /images/photo.jpg.
• Faili zilizopakiwa zilizohifadhiwa kwenye diski ya ndani. Ikiwa uploads za watumiaji ziliandikwa kwenye folda ya server yenyewe, zinapotea deploy mpya inapoingia. Tumia hifadhi sahihi ya faili.

Hatua ya 5: Shughulikia slash za mwisho kwa uthabiti

/about na /about/ ni URL tofauti. Hosts hutofautiana kama zinaongeza au kuondoa slash, na tofauti na viungo vyako au router inaweza kuzaa 404 au loops za kuelekezwa upya. Chagua mtindo mmoja, fanya viungo vyako vitumie huo, na usanidi host ielekeze upya aina nyingine kwake. Uthabiti pia unasaidia injini za utafutaji, ambazo vinginevyo zinaweza kuona nakala mbili za kila ukurasa.

Hatua ya 6: Rekebisha API zinazotoa 404

Ukurasa unapopakia lakini kichupo cha Network kinaonyesha maombi ya /api/... yanayorudisha 404:

• Backend haijawekwa hewani. Host ya tuli inatoa faili pekee; backend lazima iendeshwe mahali fulani.
• Njia inaelekezwa tofauti kwenye uzalishaji. Wakati wa maendeleo, proxy ilipeleka /api kwenye server nyingine. Kwenye uzalishaji, host inahitaji rewrite sawa, au frontend lazima ipige anwani halisi ya API.
• Fallback ya SPA ilikamata ombi. Ombi la API linalorudisha index.html kwa hali 200 linamaanisha kanuni ya fallback ni pana mno. Toa /api/* nje yake.

Maombi ya app iliyochapishwa kwa /api/orders yanatoa 404, lakini yanafanya kazi kwenye preview. Angalia jinsi /api inavyoelekezwa kwenye preview dhidi ya app iliyochapishwa, na fanya frontend iliyochapishwa ifikie backend kwa njia ile ile.

Hatua ya 7: Elekeza upya URL za zamani

Ikiwa umehama kutoka tovuti nyingine au umepanga upya muundo, URL za zamani ambazo watu na injini za utafutaji bado wanazitumia zitatoa 404. Ongeza redirect ya 301 (ya kudumu) kutoka kila URL ya zamani kwenda nyumbani kwake jipya. Weka orodha na ujaribu sampuli baada ya uzinduzi. Mwongozo wetu wa kuhamisha tovuti ya WordPress unaonyesha jinsi ya kujenga orodha hiyo.

Hatua ya 8: Angalia domeni

Ikiwa app inafanya kazi kwenye anwani ya host lakini inatoa 404 kwenye domeni yako maalum, domeni inaweza kuwa inaelekeza kwenye mradi usio sahihi, au host haijaunganisha domeni kwenye tovuti yako bado. Angalia rekodi za DNS na mipangilio ya domeni kwenye host. Tazama jinsi ya kuunganisha domeni maalum.

Fanya ukurasa wako halisi wa 404 uwe na msaada

Baadhi ya 404 ni sahihi: mtu aliandika URL vibaya. Fanya ukurasa huo uwe na msaada:

• Ujumbe mfupi na kiungo cha ukurasa wa nyumbani na sehemu muhimu
• Kisanduku cha kutafutia, ikiwa tovuti ina utafutaji
• Kichwa na urambazaji vile vile vya sehemu nyingine ya tovuti

Pale usanidi wako unaporuhusu, rudisha hali halisi ya 404 kwa kurasa zisizokuwepo. Ujumbe wa "haupatikani" uliorudishwa na hali 200 ndio injini za utafutaji zinaita soft 404, na unaweza kupoteza muda wao wa kutambaa na kuchanganya uorodheshaji.

Makosa ya kawaida

• Kujaribu kwa kubofya pekee. Jaribu kila wakati kwa kubandika URL za ndani kwenye kichupo kipya na kuonyesha upya.
• Fallback inayokamata kila kitu. Assets na routes za API zinarudisha index.html, jambo linalosababisha kurasa tupu na makosa ya API yanayochanganya.
• Herufi kubwa au ndogo zisizolingana zinazovunjika tu kwenye server.
• Kuweka folda ya chanzo badala ya matokeo ya build.
• Kupanga upya URL bila redirects. Kila kiungo cha zamani kinakuwa 404.

404 kwenye Mythex

Kwenye Mythex unachapisha kutoka kwenye workspace, na front ends tuli huwekwa kama tovuti tuli. Ikiwa ukurasa uliochapishwa unatoa 404, mpe wakala URL kamili, aeleze ikiwa inatokea wakati wa kuonyesha upya au kubofya, na kile Network tab inaonyesha, kisha umwombe akague routing. Chapisha tena baada ya kurekebisha, kwa sababu app iliyo hai ni picha ya wakati fulani hadi uchapishe tena. Ukibadilisha mradi hivi karibuni na tovuti iliyo hai inaonekana ya zamani, chapisha tena na onyesha upya kwa nguvu. Tumia Rekebisha kwa AI kwenye dirisha la kuchapisha ikiwa build inashindwa. Tazama Jinsi ya kuchapisha na Utatuzi wa uchapishaji kwenye docs, pamoja na mwongozo wetu wa kutatua app iliyojengwa kwa AI.

Orodha ya 404

• Nimeandika URL kamili zinazotoa 404 na kama ni kwa kubofya, kuonyesha upya, au zote mbili
• Fallback ya SPA inatoa index.html kwa njia za app, kwa hali 200
• Fallback inatoa faili halisi na /api/* nje
• Router ina route ya kukamata yote ya "haipatikani"
• Folda ya matokeo ya build ndiyo inayochapishwa, na build ilifanikiwa
• Njia ya msingi inalingana na mahali app inapotolewa
• Herufi kubwa au ndogo za majina ya faili zinalingana na kila marejeo
• Njia za assets zinaanza na /
• Mtindo wa slash ya mwisho ni thabiti
• Routes za API zimewekwa hewani na zimeelekezwa kwenye uzalishaji
• Redirects za 301 kwa URL za zamani
• Deep links zimejaribiwa kwa kuzibandika kwenye kichupo kipya

Maswali