તમારી વેબસાઇટ કે એપ ડિપ્લોય કર્યા પછી 404 ભૂલો કેવી રીતે ઠીક કરવી

જો તમારી એપ લોકલ પર ચાલે પણ ડિપ્લોય પછી પેજ 404 આપે, તો સૌથી સામાન્ય કારણ સિંગલ-પેજ એપ (SPA) રાઉટિંગનો અભાવ છે: સર્વર /dashboard નામની ફાઇલ શોધે છે જે અસ્તિત્વમાં નથી, કારણ કે તે રૂટ માત્ર JavaScriptમાં છે. ઉકેલ એક ફૉલબૅક નિયમ છે જે ઍપના રૂટ માટે index.html પીરસે છે. બીજા કારણો: બિલ્ડ આઉટપુટમાં ગુમ ફાઇલો, કેસ-સેન્સિટિવ પાથ, ટ્રેલિંગ-સ્લૅશનો તફાવત, ખોટો બેઝ પાથ, અને 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 કોઈ પેજ સાથે મેળ ન ખાય તે કશું નહીં બતાવવાને બદલે મૈત્રીપૂર્ણ “Page not found” બતાવે.

જો તમે સર્વર સેટિંગ બદલી ન શકો, તો હૅશ રાઉટિંગ (/#/dashboard જેવા URL) સમસ્યા ટાળે છે, કારણ કે # પછીનો ભાગ ક્યારેય સર્વરને મોકલાતો નથી. તે પહેલી પસંદગી નહીં, ઉપાય છે: URL ઓછા સુંદર છે અને સર્ચ એન્જિન માટે ઓછા અનુકૂળ છે.

જે ફ્રેમવર્ક સર્વર પર પેજ રેન્ડર કરે અથવા બિલ્ડ વખતે બનાવે (Next.js, Astro, અને સમાન), તેમની પાસે સામાન્ય રીતે દરેક પેજ માટે વાસ્તવિક ફાઇલો કે સર્વર રૂટ હોય છે, એટલે ત્યાં આ ખાસ સમસ્યા ઓછી જોવા મળે છે. તેમની સમકક્ષ સમસ્યા એ પેજ છે જે બિલ્ડ વખતે ક્યારેય જનરેટ થયું નહોતું.

પગલું 3: ખરેખર શું ડિપ્લોય થયું તે તપાસો

જો બધું 404 આપે, તો સર્વર કદાચ તમારી બિલ્ટ એપ પીરસતું નથી.

• સાચું ફોલ્ડર. હોસ્ટે બિલ્ડ આઉટપુટ (સામાન્ય રીતે Vite માટે dist, Create React App માટે build, સ્ટેટિક Next.js એક્સપોર્ટ માટે out) પ્રકાશિત કરવું જોઈએ, પ્રોજેક્ટનું મૂળ ફોલ્ડર નહીં.
• બિલ્ડ ચાલ્યું. ડિપ્લોય લૉગ વાંચો. જો બિલ્ડ નિષ્ફળ ગયું, તો હોસ્ટે કદાચ કશું ડિપ્લોય ન કર્યું હોય, અથવા જૂનું વર્ઝન.
• index.html ટોચના સ્તરે પ્રકાશિત ફોલ્ડરમાં છે, કોઈ પેટા-ફોલ્ડરમાં નહીં.
• બેઝ પાથ મેળ ખાય છે. જો એપ example.com/app/ પર પીરસાય છે, તો તે એ બેઝ સાથે બિલ્ડ થવી જોઈએ (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 જોઈએ, અથવા ફ્રન્ટએન્ડે API નું વાસ્તવિક સરનામું કૉલ કરવું જોઈએ.
• SPA ફૉલબૅકે તેને પકડી લીધું. index.html 200 સ્ટેટસ સાથે આપતી API વિનંતી એટલે ફૉલબૅક નિયમ ખૂબ વ્યાપક છે. તેમાંથી /api/* બાકાત રાખો.

પ્રકાશિત એપની /api/orders પરની વિનંતીઓ 404 આપે છે, પણ પ્રિવ્યૂમાં ચાલે છે. પ્રિવ્યૂ અને પ્રકાશિત એપમાં /api કેવી રીતે રૂટ થાય છે તે તપાસો, અને પ્રકાશિત ફ્રન્ટએન્ડ બૅકએન્ડ સુધી એ જ રીતે પહોંચે તેમ બનાવો.

પગલું 7: જૂના URL રીડાયરેક્ટ કરો

જો તમે બીજી સાઇટમાંથી ખસ્યા હો અથવા માળખું બદલ્યું હોય, તો લોકો અને સર્ચ એન્જિન હજી વાપરે તે જૂના URL 404 આપશે. દરેક જૂના URL માંથી તેના નવા સ્થાન પર 301 (કાયમી) રીડાયરેક્ટ ઉમેરો. યાદી રાખો અને લોન્ચ પછી નમૂનો ચકાસો. તે યાદી બનાવવા વિશે અમારી WordPress સાઇટ ખસેડવા માર્ગદર્શિકા આવરી લે છે.

પગલું 8: ડોમેન તપાસો

જો એપ હોસ્ટના સરનામે ચાલે પણ તમારા કસ્ટમ ડોમેન પર 404 આપે, તો ડોમેન કદાચ ખોટા પ્રોજેક્ટ તરફ નિર્દેશ કરે છે, અથવા હોસ્ટે હજી ડોમેન તમારી સાઇટ સાથે જોડ્યું નથી. DNS રેકોર્ડ અને હોસ્ટની ડોમેન સેટિંગ તપાસો. જુઓ કસ્ટમ ડોમેન કેવી રીતે જોડવું.

તમારું વાસ્તવિક 404 પેજ ઉપયોગી બનાવો

કેટલાક 404 સાચા છે: કોઈએ URL ખોટો ટાઇપ કર્યો. તે પેજને મદદરૂપ બનાવો:

• ટૂંકો સંદેશ અને હોમ પેજ તથા મુખ્ય વિભાગોની લિંક
• જો સાઇટમાં સર્ચ હોય તો સર્ચ બૉક્સ
• બાકીની સાઇટ જેવું જ હેડર અને નેવિગેશન

જ્યાં તમારું સેટઅપ મંજૂરી આપે, ત્યાં જે પેજ અસ્તિત્વમાં નથી તેના માટે વાસ્તવિક 404 સ્ટેટસ પાછું આપો. 200 સ્ટેટસ સાથે આવેલો “not found” સંદેશ એ છે જેને સર્ચ એન્જિન સૉફ્ટ 404 કહે છે, અને તે તેમનો ક્રોલ સમય વેડફી શકે છે અને ઇન્ડેક્સિંગને ગૂંચવી શકે છે.

સામાન્ય ભૂલો

• ફક્ત ક્લિક કરીને ટેસ્ટ કરવું. હંમેશાં નવા ટૅબમાં ઊંડા URL પેસ્ટ કરીને અને રિફ્રેશ કરીને ટેસ્ટ કરો.
• બધું પકડી લેતો ફૉલબૅક. એસેટ અને API રૂટ index.html આપે છે, જેનાથી ખાલી પેજ અને ગૂંચવણભરી API ભૂલો થાય છે.
• અસંગત કેસ (મોટા-નાના અક્ષર) જે ફક્ત સર્વર પર તૂટે.
• બિલ્ડ આઉટપુટને બદલે સોર્સ ફોલ્ડર ડિપ્લોય કરવું.
• રીડાયરેક્ટ વિના URL માળખું બદલવું. દરેક જૂની લિંક 404 બની જાય.

Mythex માં 404 ભૂલો

Mythex માં તમે વર્કસ્પેસમાંથી પ્રકાશિત કરો છો, અને સ્ટેટિક ફ્રન્ટ એન્ડ સ્ટેટિક સાઇટ તરીકે ડિપ્લોય થાય છે. જો પ્રકાશિત પેજ 404 આપે, તો એજન્ટને ચોક્કસ URL આપો, કહો કે તે રિફ્રેશ પર થાય છે કે ક્લિક પર, અને Network ટૅબ શું બતાવે છે, અને રાઉટિંગ તપાસવા કહો. ફિક્સ પછી ફરી પ્રકાશિત કરો, કારણ કે તમે ફરી પ્રકાશિત ન કરો ત્યાં સુધી લાઇવ એપ એક સ્નેપશોટ છે. જો તમે તાજેતરમાં પ્રોજેક્ટ બદલ્યો હોય અને લાઇવ સાઇટ જૂની લાગે, તો ફરી પ્રકાશિત કરો અને હાર્ડ-રીફ્રેશ કરો. બિલ્ડ નિષ્ફળ જાય તો પબ્લિશ ડાયલૉગમાં Fix with AI વાપરો. ડૉક્સમાં How to publish અને Publish troubleshooting જુઓ, અને અમારી AI વડે બનેલી એપ ડિબગ કરવી માર્ગદર્શિકા પણ.

404 ચેકલિસ્ટ

• કયા URL 404 આપે છે તે બરાબર નોંધ્યું, અને ક્લિક પર, રિફ્રેશ પર કે બંને પર
• SPA ફૉલબૅક ઍપના રૂટ માટે 200 સ્ટેટસ સાથે index.html પીરસે છે
• ફૉલબૅકમાંથી વાસ્તવિક ફાઇલો અને /api/* બાકાત
• રાઉટરમાં કૅચ-ઑલ “not found” રૂટ છે
• પ્રકાશિત થતું ફોલ્ડર બિલ્ડ આઉટપુટ છે, અને બિલ્ડ સફળ થયું
• બેઝ પાથ એ જગ્યા સાથે મેળ ખાય છે જ્યાં એપ પીરસાય છે
• ફાઇલ નામના કેસ દરેક સંદર્ભ સાથે મેળ ખાય છે
• એસેટ પાથ / થી શરૂ થાય છે
• ટ્રેલિંગ-સ્લૅશ શૈલી સતત
• API રૂટ પ્રોડક્શનમાં ડિપ્લોય અને રૂટ થયેલા
• જૂના URL માટે 301 રીડાયરેક્ટ
• ઊંડી લિંક નવા ટૅબમાં પેસ્ટ કરીને ચકાસી

પ્રશ્નો