ድረ-ገጽ ወይም መተግበሪያ ካሰማሩ በኋላ 404 ስህተቶችን እንዴት ማስተካከል

በአካባቢዎ የሚሠራ መተግበሪያ ካሰማሩ በኋላ ገጾቹ 404 ከመለሱ፣ በጣም የተለመደው ምክንያት የነጠላ-ገጽ መተግበሪያ (SPA) ራውቲንግ መጎደሉ ነው፦ ሰርቨሩ /dashboard የሚባል ፋይል ይፈልጋል፣ ያ መንገድ የሚኖረው በJavaScript ውስጥ ብቻ ስለሆነ ፋይሉ የለም። መፍትሔው የመተግበሪያ መንገዶች ሲጠየቁ index.html የሚያቀርብ መመለሻ ደንብ ነው። ሌሎች ምክንያቶች የግንባታ ውጤቱ ውስጥ የጠፉ ፋይሎች፣ ትልቅ-ትንሽ ፊደል የሚጠነቀቁ መንገዶች፣ የመጨረሻ ሰረዝ ልዩነቶች፣ የተሳሳተ base path፣ እና ፈጽሞ ያልተሰማሩ API መንገዶች ናቸው።

መጀመሪያ በትክክል የትኛው URL 404 እንደሚሰጥና እንዴት እዚያ እንደደረሱ ያስተውሉ። ንድፉ በቀጥታ ወደ መንስኤው ይጠቁማል።

ደረጃ 1፡ ንድፉን ፈልጉ

ትክክለኛውን የሁኔታ ኮድ ለማየት የገንቢ መሣሪያዎችን ይክፈቱ (ቀኝ-ጠቅ → Inspect)፣ ወደ Network ትር ይሂዱ፣ ያድሱ፣ እና የመጀመሪያው ጥያቄ ሁኔታን ይመልከቱ።

ደረጃ 2፡ የSPA መመለሻውን ጨምሩ

ይህ ክላሲክ ነው። በ React፣ Vue ወይም Svelte ነጠላ-ገጽ መተግበሪያ ውስጥ ሰርቨሩ ጥቂት እውነተኛ ፋይሎች ብቻ አሉት፦ index.html እና አንዳንድ JavaScript እና CSS። እንደ /dashboard ወይም /projects/42 ያሉ መንገዶች በአሳሹ ውስጥ በራውተር ይያዛሉ።

• አገናኝ ጠቅ ማድረግ ይሠራል፦ ራውተሩ URLውን ይቀይራል እና አዲሱን ገጽ ሰርቨሩን ሳይጠይቅ ይስላል።
• ማደስ ወይም አገናኝ በቀጥታ መክፈት ይወድቃል፦ አሳሹ ሰርቨሩን /dashboard ይጠይቃል፣ ሰርቨሩ እንዲህ ያለ ፋይል የለውም፣ እና 404 ይመልሳል።

መፍትሔው ደንብ ነው፦ ጥያቄው ከእውነተኛ ፋይል ጋር ካልተዛመደ index.html በ200 ሁኔታ አቅርቡ፣ ራውተሩ ይረከብ። እንዴት እንደሚጨምሩት በማስተናገጃው ይወሰናል (ዝርዝሮች ስለሚቀየሩ የአሁኑን ሰነድ ያረጋግጡ)፦

ደንቡ እውነተኛ ፋይሎችን እንዳይውጥ ያረጋግጡ፦ /assets/app.js ጥያቄዎች አሁንም የJavaScript ፋይሉን መመለስ አለባቸው። በምትኩ index.html ከመለሱ ባዶ ገጽና «Failed to load module script» ስህተት ያገኛሉ። ባዶ ነጭ ገጽን እንዴት ማስተካከል ይመልከቱ።

እንዲሁም ራውተሩ የካች-ኦል መንገድ እንዲኖረው ያድርጉ፣ ስለዚህ ከማንኛውም ገጽ ጋር የማይዛመዱ URLዎች ባዶ ሳይሆን ወዳጃዊ «ገጹ አልተገኘም» ያሳያሉ።

የሰርቨር ቅንብሮችን መቀየር ካልቻሉ hash ራውቲንግ (እንደ /#/dashboard ያሉ URLዎች) ችግሩን ያስወግዳል፣ ምክንያቱም ከ# በኋላ ያለው ክፍል ወደ ሰርቨሩ በፍጹም አይላክም። ይህ መፍትሔ ሳይሆን መንገድ ነው፦ URLዎቹ አስቸጋሪ ናቸው እና ለፍለጋ ሞተሮች ያነሰ ወዳጃዊ ናቸው።

ገጾችን በሰርቨሩ ላይ ወይም በግንባታ ጊዜ የሚፈጥሩ ፍሬምወርኮች (Next.js፣ Astro እና መሰል) ብዙ ጊዜ ለእያንዳንዱ ገጽ እውነተኛ ፋይሎች ወይም የሰርቨር መንገዶች ስላሏቸው ይህ ችግር እዚያ ብዙም አይገኝም። የእነሱ ተመሳሳይ ነገር በግንባታ ጊዜ ያልተፈጠረ ገጽ ነው።

ደረጃ 3፡ የተሰማራውን ያረጋግጡ

ሁሉም 404 ከሰጠ፣ ሰርቨሩ የገነቡትን መተግበሪያ ላያቀርብ ይችላል።

• ትክክለኛው አቃፊ። ማስተናገጃው የግንባታ ውጤቱን (ለ Vite በተለምዶ dist፣ ለ Create React App build፣ ለ Next.js ስታቲክ ኤክስፖርት out) ማተም አለበት፤ የፕሮጀክት ስርወ-ማህደሩን አይደለም።
• ግንባታው ሠርቷል። የማሰማሪያውን መዝገብ ያንብቡ። ግንባታው ከወደቀ ማስተናገጃው ምንም ያላሰማራ ወይም የቆየ ስሪት ሊሆን ይችላል።
• index.html ከታተመው አቃፊ ከፍተኛ ደረጃ ላይ ነው፣ በንዑስ አቃፊ ውስጥ አይደለም።
• base path ይዛመዳል። መተግበሪያው ከexample.com/app/ የሚቀርብ ከሆነ፣ በዚያ base ተገንብቶ መሆን አለበት (Vite base፣ React Router basename)፣ አለበለዚያ እያንዳንዱ መንገድና ንብረት ይጠፋል።

ደረጃ 4፡ የጠፉ ፋይሎችንና የተሳሳቱ መንገዶችን ማስተካከል

ገጾቹ ሲጫኑ ንብረቶቹ 404 ሲሰጡ፦

• ትልቅ-ትንሽ ፊደል። macOS እና Windows ብዙ ጊዜ Logo.png እና logo.png አንድ ፋይል እንደሆኑ ያያሉ። አብዛኛዎቹ Linux ሰርቨሮች ግን አያዩም። እያንዳንዱ ማጣቀሻ ከእውነተኛው የፋይል ስም ጋር በትክክል እንዲዛመድ ያድርጉ።
• ከግንባታው ውጭ ያሉ ፋይሎች። በ Vite ውስጥ public/ ያሉ ፋይሎች እንዳሉ ይቀዳሉ እና ከስርወ ይጠቀሳሉ (/logo.png)። በኮድ የሚገቡ ፋይሎች ይታሸጋሉ። ፕሮጀክቱ ውስጥ በሌላ ቦታ ያለ ፋይል ፈጽሞ ላይሰማራ ይችላል።
• አንጻራዊ መንገዶች። images/photo.jpg ከአሁኑ URL አንጻር ይፈታል፣ ስለዚህ በ/blog/post-1 ላይ ይሰበራል። /images/photo.jpg ይጠቀሙ።
• ተጠቃሚዎች የሰቀሉት ፋይሎች በአካባቢ ዲስክ ላይ። የተጠቃሚዎች ሰቀላዎች ወደ ሰርቨሩ የራሱ አቃፊ ከተጻፉ አዲስ ስሪት ሲሰማራ ይጠፋሉ። ትክክለኛ የፋይል ማከማቻ ይጠቀሙ።

ደረጃ 5፡ የመጨረሻ ሰረዞችን በወጥነት ያዙ

/about እና /about/ የተለያዩ URLዎች ናቸው። ማስተናገጃዎች ሰረዙን በመጨመርም ሆነ በማስወገድ ይለያያሉ፤ ከአገናኞቻችሁ ወይም ከራውተራችሁ ጋር አለመዛመድ 404 ወይም የማዞሪያ ዑደቶችን ሊፈጥር ይችላል። አንድ ዘይቤ ይምረጡ፣ አገናኞቻችሁ እሱን ይጠቀሙ፣ እና ሌላውን ቅጽ ወደ እሱ እንዲያዞር ማስተናገጃውን ያዋቅሩ። ወጥነት የፍለጋ ሞተሮችም ይረዳል፤ ያለበለዚያ እያንዳንዱ ገጽ ሁለት ቅጂ ያለው ሊመስላቸው ይችላል።

ደረጃ 6፡ 404 የሚሰጡ የAPI መንገዶችን ማስተካከል

ገጹ ይጫናል፣ ግን የNetwork ትሩ /api/... ጥያቄዎች 404 ሲመልሱ፦

• ጀርባው አልተሰማራም። ስታቲክ ማስተናገጃ ፋይሎችን ብቻ ያቀርባል፤ ጀርባ የሆነ ቦታ መሥራት አለበት።
• መንገዱ በምርት ላይ በተለየ ይመራል። በእድገት ጊዜ ፕሮክሲ /apiን ወደ ለየ ሰርቨር አስተላልፎ ይሆናል። በምርት ማስተናገጃው ላይ ተመጣጣኝ rewrite ያስፈልጋል፣ ወይም ፊት-ለፊቱ የኤፒአይውን እውነተኛ አድራሻ መጥራት አለበት።
• የSPA መመለሻው ያዘው። የኤፒአይ ጥያቄ index.html በ200 ሲመልስ መመለሻው በጣም ሰፊ ነው ማለት ነው። /api/*ን ከእሱ አግልሉ።

የታተመው መተግበሪያ ጥያቄዎች ወደ /api/orders 404 ይሰጣሉ፣ ቅድመ-እይታ ላይ ግን ይሠራሉ። /api በቅድመ-እይታ እና በታተመው መተግበሪያ እንዴት እንደሚመራ ያረጋግጡ፣ እና የታተመው ፊት-ለፊት ጀርባውን በተመሳሳይ መንገድ እንዲደርስ ያድርጉ።

ደረጃ 7፡ ያረጁ URLዎችን አዙሩ

ከሌላ ድረ-ገጽ ከተዛወሩ ወይም መዋቅሩን ከቀየሩ፣ ሰዎችና የፍለጋ ሞተሮች አሁንም የሚጠቀሙባቸው ያረጁ URLዎች 404 ይሰጣሉ። ከእያንዳንዱ ያረጀ URL ወደ አዲሱ ቦታ 301 (ቋሚ) ማዘዋወሪያ ያክሉ። ዝርዝር ያዙ እና ከጀመሩ በኋላ ናሙና ይፈትሹ። WordPress ድረ-ገጽን እንዴት ማንቀሳቀስ ያንን ዝርዝር መገንባት ይሸፍናል።

ደረጃ 8፡ ዶሜኑን ያረጋግጡ

መተግበሪያው በማስተናገጃው አድራሻ ቢሠራ ግን በብጁ ዶሜንዎ 404 ቢሰጥ፣ ዶሜኑ የተሳሳተ ፕሮጀክት ላይ ሊጠቁም ይችላል፣ ወይም ማስተናገጃው ዶሜኑን ከጣቢያዎ ገና ላያያዘው ይችላል። የDNS መዝገቦቹንና የማስተናገጃውን የዶሜን ቅንብሮች ያረጋግጡ። ብጁ ዶሜን እንዴት ማገናኘት ይመልከቱ።

እውነተኛ 404 ገጽዎን ጠቃሚ ያድርጉ

አንዳንድ 404ዎች ትክክል ናቸው፦ አንድ ሰው URL ተሳስቶ ጽፎታል። ያንን ገጽ ጠቃሚ ያድርጉት፦

• አጭር መልዕክትና ወደ መነሻ ገጹና ወደ ዋና ክፍሎች አገናኝ
• ጣቢያው ፍለጋ ካለው የፍለጋ ሳጥን
• በተቀረው ጣቢያ ላይ ያው ራስጌና አሰሳ

ማዋቀርዎ በሚፈቅድበት ቦታ፣ ለማይገኙ ገጾች እውነተኛ 404 ሁኔታ ይመልሱ። በ200 ሁኔታ የመጣ «አልተገኘም» መልዕክት የፍለጋ ሞተሮች soft 404 ብለው የሚጠሩት ነው፣ ይህም የመዳሰሻ ጊዜያቸውን ያባክናል እና ኢንዴክሱን ያምታታል።

የተለመዱ ስህተቶች

• በጠቅ ብቻ መፈተን። ሁልጊዜ ጥልቅ URLዎችን በአዲስ ትር ለጥፈው አድሱ።
• ሁሉን የሚውጥ መመለሻ። ንብረቶችና የኤፒአይ መንገዶች index.html ይመልሳሉ፣ ይህም ባዶ ገጾችና ግራ የሚያጋቡ የኤፒአይ ስህተቶች ያመጣል።
• በሰርቨሩ ላይ ብቻ የሚሰበር የፊደል አለመመሳሰል።
• የምንጭ አቃፊውን ማሰማራት ከግንባታው ውጤት ይልቅ።
• URLዎችን ያለ ማዘዋወሪያ ማዋቀር። እያንዳንዱ ያረጀ አገናኝ 404 ይሆናል።

Mythex ላይ 404ዎች

በ Mythex ከስራ ቦታው ታትሞ፣ ስታቲክ የፊት-ለፊት ድረ-ገጾች እንደ ስታቲክ ጣቢያዎች ይሰማራሉ። የታተመ ገጽ 404 ከሰጠ፣ ለወኪሉ ትክክለኛውን URL፣ በማደስ ላይ ወይም በጠቅታ ላይ እንደሚከሰት፣ እና የNetwork ትሩ ምን እንደሚያሳይ ይስጡት፣ እና የመንገዶቹን ማረም ይጠይቁት። ከለውጡ በኋላ እንደገና ያትሙ፣ ምክንያቱም ቀጥታ መተግበሪያው እስከሚያትሙት ድረስ ቅጽበታዊ ቅጂ ነው። ፕሮጀክቱን በቅርብ ጊዜ ከቀየሩ እና ቀጥታው ጣቢያ ያረጀ የሚመስል ከሆነ እንደገና ያትሙና hard-refresh ያድርጉ። ግንባታው ከወደቀ በህትመት ንግግሩ ውስጥ Fix with AIን ይጠቀሙ። በሰነዶቹ እንዴት ማተም እና የህትመት መላ ፍለጋ ይመልከቱ፣ እና የየ AI የተገነባ መተግበሪያን እንዴት ማረም መመሪያችንን ይመልከቱ።

የ404 ማረጋገጫ ዝርዝር

• ትክክል የትኞቹ URLዎች 404 እንደሚሰጡ፣ በጠቅታ፣ በማደስ ወይም በሁለቱም ላይ እንደሆነ ተመዝግቧል
• የSPA መመለሻ ለመተግበሪያ መንገዶች index.html በ200 ሁኔታ ያቀርባል
• መመለሻው እውነተኛ ፋይሎችንና /api/*ን አያካትትም
• ራውተሩ የ«አልተገኘም» ካች-ኦል መንገድ አለው
• የግንባታው ውጤት አቃፊ ነው የሚታተመው፣ ግንባታውም ተሳክቷል
• base path መተግበሪያው ከሚቀርብበት ጋር ይዛመዳል
• የፋይል ስም ትልቅ-ትንሽ ፊደል ከእያንዳንዱ ማጣቀሻ ጋር ይዛመዳል
• የንብረት መንገዶች በ/ ይጀምራሉ
• የመጨረሻ ሰረዝ ዘይቤ ወጥ ነው
• የኤፒአይ መንገዶች በምርት ተሰማርተው ተመርተዋል
• ለያረጁ URLዎች 301 ማዘዋወሪያዎች
• ጥልቅ አገናኞች አዲስ ትር ውስጥ በመለጠፍ ተፈትነዋል

ጥያቄዎች