మీ వెబ్‌సైట్ లేదా యాప్ డిప్లాయ్ చేసిన తర్వాత 404 ఎర్రర్‌లను ఎలా సరిచేయాలి
మీ యాప్ లోకల్‌గా పనిచేసినా డిప్లాయ్ తర్వాత పేజీలు 404 ఇస్తే, అత్యంత సాధారణ కారణం సింగిల్-పేజీ యాప్ (SPA) రూటింగ్ లేకపోవడం: సర్వర్ /dashboard అనే ఫైల్ కోసం చూస్తుంది, అది ఉనికిలో ఉండదు, ఎందుకంటే ఆ route JavaScript లో మాత్రమే ఉంటుంది. పరిష్కారం యాప్ routes కోసం index.html ఇచ్చే fallback నియమం. ఇతర కారణాలు: build అవుట్‌పుట్‌లో తప్పిపోయిన ఫైళ్లు, case-sensitive paths, trailing-slash తేడాలు, తప్పు base path, మరియు ఎప్పుడూ డిప్లాయ్ కాని API routes.
ఏ URL 404 అవుతోందో, మరియు మీరు అక్కడికి ఎలా చేరారో ముందుగా గమనించండి. ఆ నమూనానే కారణాన్ని నేరుగా సూచిస్తుంది.
దశ 1: నమూనాను కనుగొనండి
| మీరు ఏమి చూస్తున్నారు | అత్యంత సంభావ్య కారణం | ఎక్కడికి వెళ్లాలి |
|---|---|---|
| హోమ్ పేజీ పనిచేస్తుంది; లింక్‌లపై క్లిక్ చేయడం పనిచేస్తుంది; కానీ రిఫ్రెష్ చేస్తే లేదా డీప్ లింక్ తెరిస్తే 404 | SPA fallback లేదు | దశ 2 |
| ప్రతి పేజీ 404 అవుతుంది, హోమ్ పేజీతో సహా | తప్పు ఫోల్డర్ ప్రచురించబడింది, లేదా build డిప్లాయ్ కాలేదు | దశ 3 |
| పేజీలు లోడ్ అవుతాయి, కానీ చిత్రాలు, fonts లేదా scripts 404 | Build లో ఫైళ్లు లేవు, లేదా పాత్‌లు తప్పు | దశ 4 |
/about/ తో పనిచేస్తుంది, /about తో విఫలం (లేదా వ్యతిరేకంగా) | Trailing-slash నిర్వహణ | దశ 5 |
/About విఫలం కానీ /about పనిచేస్తుంది | Case-sensitive సర్వర్ | దశ 4 |
పేజీ లోడ్ అవుతుంది, కానీ /api/... డేటా కాల్స్ 404 | API డిప్లాయ్ కాలేదు లేదా రూట్ కాలేదు | దశ 6 |
| పాత సైట్ నుండి పాత URLs 404 | Redirects లేవు | దశ 7 |
| కేవలం కస్టమ్ డొమైన్‌పై | DNS లేదా డొమైన్ సెటప్ | దశ 8 |
నిజమైన status code చూడటానికి, డెవలపర్ టూల్స్ తెరవండి (రైట్-క్లిక్ → Inspect), Network ట్యాబ్‌కు వెళ్లి, రిఫ్రెష్ చేసి, మొదటి request యొక్క status చూడండి.
దశ 2: SPA fallback జోడించండి
ఇది క్లాసిక్ కేసు. React, Vue లేదా Svelte సింగిల్-పేజీ యాప్‌లో, సర్వర్‌కు కొన్ని నిజమైన ఫైళ్లు మాత్రమే ఉంటాయి: index.html మరియు కొన్ని JavaScript మరియు CSS. /dashboard లేదా /projects/42 వంటి routes బ్రౌజర్‌లోని router నిర్వహిస్తుంది.
- లింక్‌పై క్లిక్ చేయడం పనిచేస్తుంది: router URL మారుస్తుంది మరియు సర్వర్‌ను అడగకుండా కొత్త పేజీని చూపిస్తుంది.
- రిఫ్రెష్ చేయడం లేదా లింక్‌ను నేరుగా తెరవడం విఫలమవుతుంది: బ్రౌజర్ సర్వర్‌ను
/dashboardకోసం అడుగుతుంది, సర్వర్‌కు అలాంటి ఫైల్ లేదు, మరియు అది 404 ఇస్తుంది.
పరిష్కారం ఒక నియమం: అభ్యర్థన నిజమైన ఫైల్‌తో సరిపోకపోతే, 200 స్టేటస్‌తో index.html ఇవ్వండి, మరియు router బాధ్యత తీసుకోనివ్వండి. దీన్ని ఎలా జోడించాలో హోస్ట్‌ను బట్టి ఉంటుంది (వివరాలు మారతాయి కాబట్టి మీ హోస్ట్ ప్రస్తుత డాక్స్ తనిఖీ చేయండి):
| హోస్ట్ | సాధారణ fallback నియమం |
|---|---|
| Netlify | ప్రచురించిన ఫోల్డర్‌లో /* /index.html 200 ఉన్న _redirects ఫైల్ |
| Vercel | అన్ని paths ను /index.html కు పంపే vercel.json లో rewrite (framework presets తరచూ దీనిని నిర్వహిస్తాయి) |
| Cloudflare Pages | టాప్-లెవల్ 404.html లేకపోతే డిఫాల్ట్‌గా SPA-శైలి fallback ఇస్తుంది |
| Nginx | location / బ్లాక్‌లో try_files $uri $uri/ /index.html; |
| Apache | ఫైల్ కాని అభ్యర్థనలను index.html కు పంపే .htaccess లో rewrite నియమం |
| GitHub Pages | సర్వర్-వైపు rewrites లేవు; సాధారణ ప్రత్యామ్నాయాలు hash routing లేదా దారి మళ్లించే 404.html |
నియమం నిజమైన ఫైళ్లను మింగకుండా చూసుకోండి: /assets/app.js అభ్యర్థనలు ఇంకా JavaScript ఫైల్ ఇవ్వాలి. అవి బదులుగా index.html ఇస్తే, "Failed to load module script" ఎర్రర్‌తో ఖాళీ పేజీ వస్తుంది. ఖాళీ తెల్లని పేజీని ఎలా సరిచేయాలి చూడండి.
ఏ URL సరిపోకపోయినా స్నేహపూర్వక "Page not found" చూపేందుకు router కు catch-all route కూడా ఇవ్వండి, ఖాళీ స్క్రీన్ కాకుండా.
సర్వర్ సెట్టింగ్‌లు మార్చలేకపోతే, hash routing (/#/dashboard వంటి URLs) సమస్యను నివారిస్తుంది, ఎందుకంటే # తర్వాతి భాగం ఎప్పుడూ సర్వర్‌కు పంపబడదు. ఇది మొదటి ఎంపిక కాదు, ఒక ప్రత్యామ్నాయం మాత్రమే: URLs అందంగా ఉండవు మరియు సెర్చ్ ఇంజిన్లకు తక్కువ స్నేహపూర్వకం.
సర్వర్‌పై పేజీలను రెండర్ చేసే లేదా build సమయంలో రూపొందించే ఫ్రేమ్‌వర్క్‌లు (Next.js, Astro మరియు సమానమైనవి) సాధారణంగా ప్రతి పేజీకి నిజమైన ఫైళ్లు లేదా సర్వర్ routes కలిగి ఉంటాయి, కాబట్టి అక్కడ ఈ సమస్య తక్కువ సాధారణం. వారికి సమానమైన సమస్య build సమయంలో రూపొందించబడని పేజీ.
దశ 3: నిజంగా ఏమి డిప్లాయ్ అయ్యిందో తనిఖీ చేయండి
అన్నీ 404 అయితే, సర్వర్ బహుశా మీ build చేసిన యాప్‌ను అందించడం లేదు.
- సరైన ఫోల్డర్. హోస్ట్ build అవుట్‌పుట్‌ను (Vite కోసం సాధారణంగా
dist, Create React App కోసంbuild, స్టాటిక్ Next.js ఎగుమతి కోసంout) ప్రచురించాలి, ప్రాజెక్ట్ రూట్ కాదు. - Build నడిచింది. డిప్లాయ్ లాగ్ చదవండి. Build విఫలమైతే, హోస్ట్ ఏమీ లేదా పాత వెర్షన్ డిప్లాయ్ చేసి ఉండవచ్చు.
index.htmlప్రచురించిన ఫోల్డర్ టాప్ లెవల్‌లో ఉండాలి, సబ్-ఫోల్డర్‌లో కాదు.- Base path సరిపోతుంది. యాప్
example.com/app/వద్ద అందిస్తే, ఆ base తో build చేయాలి (Vite యొక్కbase, React Router యొక్కbasename), లేకపోతే ప్రతి route మరియు asset మిస్ అవుతుంది.
దశ 4: తప్పిపోయిన ఫైళ్లు మరియు తప్పు పాత్‌లను సరిచేయండి
పేజీలు లోడ్ అవుతాయి కానీ assets 404 ఇస్తే:
- Case sensitivity. macOS మరియు Windows సాధారణంగా
Logo.pngమరియుlogo.pngను ఒకే ఫైల్‌గా భావిస్తాయి. చాలా Linux సర్వర్లు అలా చేయవు. ప్రతి సూచన నిజమైన ఫైల్ పేరుతో ఖచ్చితంగా సరిపోవాలి. - Build వెలుపల ఫైళ్లు. Vite లో,
public/లోని ఫైళ్లు యథాతథంగా కాపీ అయి రూట్ నుండి సూచించబడతాయి (/logo.png). కోడ్‌లో import చేసిన ఫైళ్లు bundle అవుతాయి. ప్రాజెక్ట్‌లో వేరేచోట ఉన్న ఫైల్ అసలు డిప్లాయ్ కాకపోవచ్చు. - సంబంధిత (relative) పాత్‌లు.
images/photo.jpgప్రస్తుత URL ఆధారంగా పరిష్కరించబడుతుంది, కాబట్టి/blog/post-1పై అది విరిగిపోతుంది./images/photo.jpgఉపయోగించండి. - సర్వర్ డిస్క్‌లో సేవ్ చేసిన అప్‌లోడ్ ఫైళ్లు. వినియోగదారుల అప్‌లోడ్‌లు సర్వర్ స్వంత ఫోల్డర్‌లో రాస్తే, కొత్త వెర్షన్ డిప్లాయ్ అయినప్పుడు అవి మాయమవుతాయి. సరైన ఫైల్ storage వాడండి.
దశ 5: trailing slashes ను స్థిరంగా నిర్వహించండి
/about మరియు /about/ వేర్వేరు URLs. హోస్ట్‌లు స్లాష్‌ను జోడిస్తాయా లేదా తీసివేస్తాయా అనేది భిన్నంగా ఉంటుంది, మరియు మీ లింక్‌లు లేదా router తో సరిపోకపోతే 404 లేదా redirect లూప్‌లు రావచ్చు. ఒక శైలిని ఎంచుకోండి, మీ లింక్‌లు దానినే వాడేలా చేయండి, మరియు మరొక రూపాన్ని దానికి redirect చేసేలా హోస్ట్‌ను కాన్ఫిగర్ చేయండి. సెర్చ్ ఇంజిన్లు ప్రతి పేజీకి రెండు కాపీలు చూడకుండా ఇది సహాయపడుతుంది.
దశ 6: 404 అవుతున్న API routes ను సరిచేయండి
పేజీ లోడ్ అవుతుంది కానీ Network ట్యాబ్‌లో /api/... అభ్యర్థనలు 404 ఇస్తే:
- Backend డిప్లాయ్ కాలేదు. స్టాటిక్ హోస్ట్ ఫైళ్లు మాత్రమే అందిస్తుంది; backend ఎక్కడో నడవాలి.
- ఉత్పత్తిలో మార్గం వేరుగా రూట్ అవుతుంది. అభివృద్ధిలో, proxy
/apiను వేరే సర్వర్‌కు ఫార్వర్డ్ చేసి ఉండవచ్చు. ఉత్పత్తిలో హోస్ట్‌కు సమానమైన rewrite అవసరం, లేదా ఫ్రంటెండ్ API యొక్క నిజమైన చిరునామాను పిలవాలి. - SPA fallback దానిని పట్టుకుంది.
index.htmlను 200 స్టేటస్‌తో ఇచ్చే API అభ్యర్థన అంటే fallback నియమం చాలా విశాలంగా ఉంది. దాని నుండి/api/*ను మినహాయించండి.
ప్రచురించిన యాప్ యొక్క /api/orders అభ్యర్థనలు 404 ఇస్తున్నాయి, కానీ preview లో పనిచేస్తాయి. preview మరియు ప్రచురించిన యాప్‌లో /api ఎలా రూట్ అవుతోందో తనిఖీ చేయండి, మరియు ప్రచురించిన ఫ్రంటెండ్ backend ను అదే విధంగా చేరేలా చేయండి.
దశ 7: పాత URLs ను redirect చేయండి
మీరు వేరే సైట్ నుండి మారినా లేదా నిర్మాణం మార్చినా, ప్రజలు మరియు సెర్చ్ ఇంజిన్లు ఇంకా వాడే పాత URLs 404 అవుతాయి. ప్రతి పాత URL నుండి దాని కొత్త స్థానానికి 301 (శాశ్వత) redirect జోడించండి. జాబితా ఉంచి, లాంచ్ తర్వాత నమూనాను పరీక్షించండి. WordPress సైట్‌ను మైగ్రేట్ చేయడం గైడ్ ఆ జాబితాను ఎలా నిర్మించాలో వివరిస్తుంది.
దశ 8: డొమైన్ తనిఖీ చేయండి
యాప్ హోస్ట్ చిరునామాలో పనిచేసి, మీ కస్టమ్ డొమైన్‌పై 404 ఇస్తే, డొమైన్ తప్పు ప్రాజెక్ట్‌ను సూచిస్తూ ఉండవచ్చు, లేదా హోస్ట్ ఇంకా ఆ డొమైన్‌ను మీ సైట్‌కు జత చేయలేదు. DNS రికార్డ్‌లు మరియు హోస్ట్ డొమైన్ సెట్టింగ్‌లు తనిఖీ చేయండి. కస్టమ్ డొమైన్‌ను ఎలా కనెక్ట్ చేయాలి చూడండి.
మీ నిజమైన 404 పేజీని ఉపయోగకరంగా చేయండి
కొన్ని 404లు సరైనవే: ఎవరో URL తప్పుగా టైప్ చేశారు. ఆ పేజీని సహాయకరంగా చేయండి:
- ఒక చిన్న మెసేజ్ మరియు హోమ్ పేజీకి, ముఖ్య విభాగాలకు లింక్‌లు
- సైట్‌లో సెర్చ్ ఉంటే సెర్చ్ బాక్స్
- మిగిలిన సైట్‌తో ఒకే header మరియు navigation
మీ సెటప్ అనుమతించిన చోట, ఉనికిలో లేని పేజీలకు నిజమైన 404 స్టేటస్ ఇవ్వండి. 200 స్టేటస్‌తో వచ్చిన "not found" మెసేజ్‌ను సెర్చ్ ఇంజిన్లు soft 404 అంటాయి, ఇది వాటి క్రాల్ సమయాన్ని వృథా చేసి ఇండెక్సింగ్‌ను గందరగోళపరచవచ్చు.
సాధారణ తప్పులు
- క్లిక్ చేయడం ద్వారా మాత్రమే పరీక్షించడం. ఎల్లప్పుడూ డీప్ URLs ను కొత్త ట్యాబ్‌లో అతికించి రిఫ్రెష్ చేసి పరీక్షించండి.
- అన్నింటినీ పట్టుకునే fallback. ఆస్తులు మరియు API routes
index.htmlఇస్తే ఖాళీ పేజీలు మరియు గందరగోళ API ఎర్రర్‌లు వస్తాయి. - సర్వర్‌లో మాత్రమే విరిగే పెద్ద/చిన్న అక్షరాల తేడాలు.
- Build అవుట్‌పుట్ కాకుండా సోర్స్ ఫోల్డర్ డిప్లాయ్ చేయడం.
- redirects లేకుండా URLs నిర్మాణం మార్చడం. ప్రతి పాత లింక్ 404 అవుతుంది.
Mythex లో 404లు
Mythex లో మీరు workspace నుండి ప్రచురిస్తారు, మరియు స్టాటిక్ ఫ్రంట్ ఎండ్‌లు స్టాటిక్ సైట్‌లుగా డిప్లాయ్ అవుతాయి. ప్రచురించిన పేజీ 404 ఇస్తే, agent కు ఖచ్చితమైన URL ఇవ్వండి, అది రిఫ్రెష్‌లో జరుగుతుందా లేదా క్లిక్‌లో జరుగుతుందా చెప్పండి, మరియు Network ట్యాబ్ ఏమి చూపుతుందో చెప్పి, routing తనిఖీ చేయమని అడగండి. సరిదిద్దిన తర్వాత మళ్లీ ప్రచురించండి, ఎందుకంటే మీరు మళ్లీ ప్రచురించే వరకు ప్రత్యక్ష యాప్ ఒక స్నాప్‌షాట్ మాత్రమే. ఇటీవల ప్రాజెక్ట్ మార్చి, ప్రత్యక్ష సైట్ పాతదిగా కనిపిస్తే, మళ్లీ ప్రచురించి hard-refresh చేయండి. Build విఫలమైతే ప్రచురణ డైలాగ్‌లో Fix with AI ఉపయోగించండి. డాక్స్‌లో How to publish మరియు Publish troubleshooting చూడండి, మరియు మా గైడ్ AI-నిర్మిత యాప్‌ను debug చేయడం కూడా చూడండి.
404 చెక్‌లిస్ట్
- ఏ URLs 404 అవుతున్నాయో ఖచ్చితంగా గుర్తించాను, క్లిక్‌లోనా, రిఫ్రెష్‌లోనా, లేక రెండింటిలోనా
- యాప్ routes కోసం SPA fallback 200 స్టేటస్‌తో
index.htmlఇస్తుంది - Fallback నిజమైన ఫైళ్లను మరియు
/api/*ను మినహాయిస్తుంది - Router కు catch-all "not found" route ఉంది
- ప్రచురించేది build అవుట్‌పుట్ ఫోల్డర్, మరియు build విజయవంతమైంది
- Base path యాప్ అందించే స్థానానికి సరిపోతుంది
- ప్రతి సూచనతో ఫైల్ పేరు పెద్ద/చిన్న అక్షరాలు సరిపోతాయి
- Asset పాత్‌లు
/తో మొదలవుతాయి - Trailing-slash శైలి స్థిరంగా ఉంది
- API routes ఉత్పత్తిలో డిప్లాయ్ మరియు రూట్ అయ్యాయి
- పాత URLs కోసం 301 redirects ఉన్నాయి
- డీప్ లింక్‌లు కొత్త ట్యాబ్‌లో అతికించి పరీక్షించాను
ప్రశ్నలు
నా React యాప్‌లో పేజీని రిఫ్రెష్ చేసినప్పుడు 404 ఎందుకు వస్తుంది?
సింగిల్-పేజీ యాప్‌లో /dashboard వంటి routes JavaScript లోనే ఉంటాయి. లింక్‌పై క్లిక్ చేస్తే బ్రౌజర్‌లోని router దానిని నిర్వహిస్తుంది కాబట్టి పని చేస్తుంది, కానీ రిఫ్రెష్ చేస్తే సర్వర్ /dashboard ఫైల్ అడుగుతుంది, అది ఉండదు. పరిష్కారం యాప్ routes కోసం index.html ఇచ్చే fallback నియమం.
Netlify, Vercel లేదా Nginx పై SPA fallback ఎలా జోడించాలి?
Netlify లో, /* /index.html 200 ఉన్న _redirects ఫైల్ జోడించండి. Vercel లో, అన్ని paths ను /index.html కు పంపే rewrite ను vercel.json లో జోడించండి. Nginx లో, location బ్లాక్‌లో try_files $uri $uri/ /index.html; ఉపయోగించండి. నియమాలు మారతాయి కాబట్టి మీ హోస్ట్ డాక్స్ తనిఖీ చేయండి.
డిప్లాయ్ చేసిన తర్వాత నా చిత్రాలు లేదా ఫైళ్లు ఎందుకు 404 ఇస్తాయి?
సాధారణంగా ఫైల్ build అవుట్‌పుట్‌లో ఉండదు, లేదా పాత్ అక్షరాల పెద్ద/చిన్న అక్షరాలు సరిపోలవు (మీ ల్యాప్‌టాప్‌లో ఉండని case-sensitivity సర్వర్లలో తరచూ ఉంటుంది), లేదా పాత్ స్లాష్‌తో మొదలవ్వాల్సి ఉండగా సంబంధిత (relative) గా ఉంటుంది.
తప్పిపోయిన పేజీ నిజమైన 404 స్టేటస్ ఇవ్వాలా?
అవును. సహాయకరమైన not-found పేజీ చూపించండి, మీ సెటప్ అనుమతించిన చోట 404 స్టేటస్‌తో. 'not found' మెసేజ్‌ను 200 స్టేటస్‌తో పంపితే సెర్చ్ ఇంజిన్లు దానిని soft 404 గా భావిస్తాయి, ఇది క్రాల్ సమయాన్ని వృథా చేసి ఇండెక్సింగ్‌ను గందరగోళపరచవచ్చు.