Πώς να διορθώσετε σφάλματα 404 μετά το deploy της ιστοσελίδας ή του app σας

Αν η εφαρμογή σας δουλεύει τοπικά αλλά οι σελίδες δίνουν 404 μετά το deploy, η πιο συνηθισμένη αιτία είναι η έλλειψη δρομολόγησης single-page app (SPA): ο server ψάχνει ένα αρχείο /dashboard που δεν υπάρχει, επειδή αυτή η διαδρομή υπάρχει μόνο στην JavaScript. Η λύση είναι ένας κανόνας fallback που σερβίρει το index.html για τις διαδρομές της εφαρμογής. Άλλες αιτίες είναι αρχεία που λείπουν από το αποτέλεσμα του build, διαδρομές με διαφορά πεζών/κεφαλαίων, διαφορές στην κατάληξη /, λάθος base path και API routes που δεν έγιναν deploy.

Ξεκινήστε σημειώνοντας ακριβώς ποιο URL δίνει 404 και πώς φτάσατε εκεί. Το μοτίβο δείχνει κατευθείαν την αιτία.

Βήμα 1: Βρείτε το μοτίβο

Για να δείτε τον πραγματικό κωδικό κατάστασης, ανοίξτε τα εργαλεία προγραμματιστή (δεξί κλικ → Επιθεώρηση), πηγαίνετε στην καρτέλα Network, κάντε ανανέωση και δείτε την κατάσταση του πρώτου αιτήματος.

Βήμα 2: Προσθέστε το SPA fallback

Αυτό είναι το κλασικό. Σε μια single-page εφαρμογή React, Vue ή Svelte, ο server έχει μόνο λίγα πραγματικά αρχεία: το index.html και μερικά αρχεία JavaScript και CSS. Διαδρομές όπως /dashboard ή /projects/42 τις χειρίζεται ένας router στον browser.

• Το κλικ σε σύνδεσμο δουλεύει: ο router αλλάζει το URL και ζωγραφίζει τη νέα σελίδα χωρίς να ρωτήσει τον server.
• Η ανανέωση ή το άνοιγμα ενός συνδέσμου απευθείας αποτυγχάνει: ο browser ζητά το /dashboard από τον server, ο server δεν έχει τέτοιο αρχείο και επιστρέφει 404.

Η λύση είναι ένας κανόνας που λέει: αν το αίτημα δεν ταιριάζει με πραγματικό αρχείο, σερβίρετε το index.html με κωδικό 200 και αφήστε τον router να αναλάβει. Ο τρόπος εξαρτάται από τον host (ελέγξτε την τρέχουσα τεκμηρίωση, γιατί οι λεπτομέρειες αλλάζουν):

Βεβαιωθείτε ότι ο κανόνας δεν καταπίνει τα πραγματικά αρχεία: τα αιτήματα για /assets/app.js πρέπει να επιστρέφουν ακόμα το αρχείο JavaScript. Αν επιστρέφουν index.html, θα δείτε κενή σελίδα με σφάλμα «Failed to load module script». Δείτε πώς να διορθώσετε μια κενή λευκή σελίδα.

Δώστε επίσης στον router ένα catch-all route, ώστε οι διευθύνσεις που δεν αντιστοιχούν σε σελίδα να δείχνουν ένα φιλικό μήνυμα «Η σελίδα δεν βρέθηκε» και όχι κενό.

Αν δεν μπορείτε να αλλάξετε τις ρυθμίσεις του server, η δρομολόγηση με hash (διευθύνσεις όπως /#/dashboard) αποφεύγει το πρόβλημα, γιατί το τμήμα μετά το # δεν στέλνεται ποτέ στον server. Είναι παρακαμπτική λύση, όχι η πρώτη επιλογή: οι διευθύνσεις είναι πιο άσχημες και λιγότερο φιλικές για τις μηχανές αναζήτησης.

Τα frameworks που αποδίδουν σελίδες στον server ή τις παράγουν κατά το build (Next.js, Astro και παρόμοια) συνήθως έχουν πραγματικά αρχεία ή server routes για κάθε σελίδα, οπότε αυτό το πρόβλημα είναι λιγότερο συχνό εκεί. Το αντίστοιχο εκεί είναι μια σελίδα που δεν παράχθηκε κατά το build.

Βήμα 3: Ελέγξτε τι έγινε πραγματικά deploy

Αν όλα δίνουν 404, ο server πιθανότατα δεν σερβίρει την κατασκευασμένη εφαρμογή σας.

• Ο σωστός φάκελος. Ο host πρέπει να δημοσιεύει το αποτέλεσμα του build (συνήθως dist για Vite, build για Create React App, out για στατική εξαγωγή Next.js), όχι τον φάκελο του project.
• Το build έτρεξε. Διαβάστε το log του deploy. Αν το build απέτυχε, ο host μπορεί να μην έκανε deploy τίποτα, ή να έδειχνε παλιά έκδοση.
• Το index.html βρίσκεται στο ανώτατο επίπεδο του δημοσιευμένου φακέλου, όχι σε υποφάκελο.
• Το base path ταιριάζει. Αν η εφαρμογή σερβίρεται από το example.com/app/, πρέπει να έχει χτιστεί με αυτό το base (base στο Vite, basename στο React Router), αλλιώς κάθε διαδρομή και κάθε asset θα χάνεται.

Βήμα 4: Διορθώστε τα αρχεία που λείπουν και τις λάθος διαδρομές

Όταν οι σελίδες φορτώνουν αλλά τα assets δίνουν 404:

• Διαφορά πεζών/κεφαλαίων. Το macOS και τα Windows συνήθως θεωρούν το Logo.png και το logo.png το ίδιο αρχείο. Οι περισσότεροι Linux server όχι. Κάντε κάθε αναφορά να ταιριάζει ακριβώς με το όνομα του αρχείου.
• Αρχεία εκτός του build. Στο Vite, τα αρχεία στο public/ αντιγράφονται αυτούσια και αναφέρονται από τη ρίζα (/logo.png). Τα αρχεία που εισάγονται στον κώδικα ενσωματώνονται στο bundle. Ένα αρχείο κάπου αλλού στο project μπορεί να μην γίνει καθόλου deploy.
• Σχετικές διαδρομές. Το images/photo.jpg επιλύεται σε σχέση με το τρέχον URL, οπότε σπάει στο /blog/post-1. Χρησιμοποιήστε /images/photo.jpg.
• Ανεβασμένα αρχεία αποθηκευμένα στον τοπικό δίσκο. Αν τα αρχεία των χρηστών γράφονταν στον φάκελο του server, χάνονται όταν γίνει deploy νέα έκδοση. Χρησιμοποιήστε κατάλληλη αποθήκευση αρχείων.

Βήμα 5: Χειριστείτε τις καταλήξεις / με συνέπεια

Το /about και το /about/ είναι διαφορετικά URL. Οι host διαφέρουν στο αν προσθέτουν ή αφαιρούν την κάθετο, και μια ασυμφωνία με τους συνδέσμους ή τον router μπορεί να δώσει 404 ή βρόχους ανακατεύθυνσης. Διαλέξτε ένα στυλ, κάντε τους συνδέσμους σας να το χρησιμοποιούν και ρυθμίστε τον host να ανακατευθύνει την άλλη μορφή σε αυτό. Η συνέπεια βοηθά και τις μηχανές αναζήτησης, που αλλιώς μπορεί να βλέπουν δύο αντίγραφα κάθε σελίδας.

Βήμα 6: Διορθώστε τα API routes που δίνουν 404

Αν η σελίδα φορτώνει αλλά στην καρτέλα Network τα αιτήματα /api/... επιστρέφουν 404:

• Το back end δεν έγινε deploy. Ένας στατικός host σερβίρει μόνο αρχεία· ένα back end πρέπει να τρέχει κάπου.
• Η διαδρομή δρομολογείται διαφορετικά στην παραγωγή. Στην ανάπτυξη, ένας proxy μπορεί να προωθούσε το /api σε ξεχωριστό server. Στην παραγωγή, ο host χρειάζεται αντίστοιχο rewrite, ή το front end πρέπει να καλεί την πραγματική διεύθυνση του API.
• Το SPA fallback το έπιασε. Ένα αίτημα API που επιστρέφει index.html με κωδικό 200 σημαίνει ότι ο κανόνας fallback είναι πολύ ευρύς. Εξαιρέστε το /api/* από αυτόν.

Τα αιτήματα της δημοσιευμένης εφαρμογής προς το /api/orders επιστρέφουν 404, ενώ δουλεύουν στην προεπισκόπηση. Ελέγξτε πώς δρομολογείται το /api στην προεπισκόπηση και στη δημοσιευμένη εφαρμογή, και κάντε το δημοσιευμένο front end να φτάνει στο back end με τον ίδιο τρόπο.

Βήμα 7: Ανακατευθύνετε τα παλιά URL

Αν μετακινηθήκατε από άλλο site ή αναδιαρθρώσατε, τα παλιά URL που χρησιμοποιούν ακόμα άνθρωποι και μηχανές αναζήτησης θα δίνουν 404. Προσθέστε μια 301 (μόνιμη) ανακατεύθυνση από κάθε παλιό URL στο νέο του σημείο. Κρατήστε μια λίστα και δοκιμάστε ένα δείγμα μετά την κυκλοφορία. Ο οδηγός μας για μετεγκατάσταση ιστότοπου WordPress καλύπτει το πώς να φτιάξετε αυτή τη λίστα.

Βήμα 8: Ελέγξτε το domain

Αν η εφαρμογή δουλεύει στη διεύθυνση του host αλλά δίνει 404 στο προσαρμοσμένο domain, το domain μπορεί να δείχνει σε λάθος project, ή ο host να μην έχει ακόμα συνδέσει το domain με τον ιστότοπό σας. Ελέγξτε τις εγγραφές DNS και τις ρυθμίσεις domain του host. Δείτε πώς να συνδέσετε προσαρμοσμένο domain.

Κάντε τη σελίδα 404 σας χρήσιμη

Μερικά 404 είναι σωστά: κάποιος έγραψε λάθος μια διεύθυνση. Κάντε τη σελίδα αυτή χρήσιμη:

• Ένα σύντομο μήνυμα και σύνδεσμο προς την αρχική και τις βασικές ενότητες
• Πλαίσιο αναζήτησης, αν ο ιστότοπος έχει αναζήτηση
• Την ίδια κεφαλίδα και πλοήγηση με το υπόλοιπο site

Όπου το επιτρέπει η ρύθμισή σας, επιστρέφετε πραγματικό κωδικό 404 για σελίδες που δεν υπάρχουν. Ένα μήνυμα «δεν βρέθηκε» με κωδικό 200 είναι αυτό που οι μηχανές αναζήτησης ονομάζουν soft 404, και μπορεί να σπαταλά τον χρόνο τους στο crawl και να μπερδεύει την ευρετηρίαση.

Συνηθισμένα λάθη

• Δοκιμάζετε μόνο κάνοντας κλικ. Δοκιμάζετε πάντα επικολλώντας βαθιά URL σε νέα καρτέλα και κάνοντας ανανέωση.
• Ένα fallback που πιάνει τα πάντα. Τα assets και τα API routes επιστρέφουν index.html, που προκαλεί κενές σελίδες και μπερδεμένα σφάλματα API.
• Ασυμφωνία πεζών/κεφαλαίων που χαλάει μόνο στον server.
• Deploy του φακέλου με τον πηγαίο κώδικα αντί για το αποτέλεσμα του build.
• Αναδιάρθρωση URL χωρίς ανακατευθύνσεις. Κάθε παλιός σύνδεσμος γίνεται 404.

404 στο Mythex

Στο Mythex δημοσιεύετε από τον χώρο εργασίας, και τα στατικά front end γίνονται deploy ως στατικοί ιστότοποι. Αν μια δημοσιευμένη σελίδα δίνει 404, δώστε στον πράκτορα το ακριβές URL, αν συμβαίνει στην ανανέωση ή στο κλικ, και τι δείχνει η καρτέλα Network, και ζητήστε να ελέγξει τη δρομολόγηση. Δημοσιεύστε ξανά μετά τη διόρθωση, γιατί η ζωντανή εφαρμογή είναι στιγμιότυπο μέχρι να δημοσιεύσετε ξανά. Αν αλλάξατε πρόσφατα το project και ο ζωντανός ιστότοπος φαίνεται παλιός, δημοσιεύστε ξανά και κάντε σκληρή ανανέωση. Χρησιμοποιήστε Διόρθωση με AI στο παράθυρο δημοσίευσης αν αποτύχει το build. Δείτε Πώς να δημοσιεύσετε και Αντιμετώπιση προβλημάτων δημοσίευσης στην τεκμηρίωση, και τον οδηγό μας για αποσφαλμάτωση εφαρμογής φτιαγμένης με AI.

Λίστα ελέγχου για 404

• Σημειώθηκε ακριβώς ποια URL δίνουν 404 και αν στο κλικ, στην ανανέωση ή και στα δύο
• Το SPA fallback σερβίρει το index.html για τις διαδρομές της εφαρμογής, με κωδικό 200
• Το fallback εξαιρεί τα πραγματικά αρχεία και το /api/*
• Ο router έχει catch-all route «δεν βρέθηκε»
• Ο φάκελος του αποτελέσματος build είναι αυτός που δημοσιεύεται, και το build πέτυχε
• Το base path ταιριάζει με το σημείο όπου σερβίρεται η εφαρμογή
• Τα πεζά/κεφαλαία των ονομάτων αρχείων ταιριάζουν σε κάθε αναφορά
• Οι διαδρομές assets ξεκινούν με /
• Το στυλ της κατάληξης / είναι συνεπές
• Τα API routes έγιναν deploy και δρομολογούνται στην παραγωγή
• Υπάρχουν 301 ανακατευθύνσεις για τα παλιά URL
• Οι βαθιοί σύνδεσμοι δοκιμάστηκαν επικολλώντας τους σε νέα καρτέλα

Ερωτήσεις