Επίλυση σφάλματος Cloudflare Workers 404 μετά από επιτυχή ανάπτυξη

Αντιμετώπιση προβλημάτων σταδίου περιβαλλοντικών ζητημάτων με Cloudflare Workers

Ένα ουσιαστικό στάδιο της διαδικασίας ανάπτυξης είναι η δημιουργία ενός περιβάλλοντος σταδίου, έτσι ώστε οι ενημερώσεις να μπορούν να δοκιμαστούν σωστά πριν βγουν ζωντανά. Σε αυτήν την περίπτωση, οι Εργαζόμενοι στο Cloudflare διατηρούσαν τον κύριο ιστότοπο υπό ανάπτυξη λειτουργώντας καλά.

Μετά την κλωνοποίηση του υπάρχοντος αποθετηρίου Git και τη σύνδεσή του με το περιβάλλον σκηνής μέσω του Cloudflare Workers & Pages, όλα φάνηκαν να λειτουργούν καλά. Τα αρχεία καταγραφής έδειχναν ότι η ανάπτυξη ήταν επιτυχής, κάτι που συνήθως σηματοδοτούσε τη δημιουργία μιας ζωντανής παρουσίας.

Αλλά όταν ο προγραμματιστής προσπάθησε να αποκτήσει πρόσβαση στη δεδομένη διεύθυνση Cloudflare, εμφανίστηκε ένα μήνυμα σφάλματος 404, αφήνοντάς τον αβέβαιο για το τι πήγε στραβά. Μπορεί να είναι ενοχλητικό να αντιμετωπίζετε ζητήματα αυτής της φύσης, ιδιαίτερα όταν υπάρχει η πεποίθηση ότι ο διακομιστής πρέπει να ενεργοποιηθεί αμέσως μετά την ανάπτυξη.

Δεν είναι σαφές εάν χρειάζεται ένας δεύτερος διακομιστής ή εάν πρέπει να γίνει κάτι άλλο προκειμένου να ενεργοποιηθεί πλήρως το νέο αποθετήριο. Θα εξετάσουμε τις αιτίες αυτού του προβλήματος 404 και πώς να ρυθμίσετε σωστά τον διακομιστή Cloudflare Workers για το περιβάλλον σταδίου σε αυτό το άρθρο.

Πώς χειρίζονται τα σφάλματα 404 οι εργαζόμενοι και τα σενάρια του Cloudflare

Το πρώτο σενάριο στο συγκεκριμένο παράδειγμα δείχνει πώς να το χρησιμοποιήσετε JavaScript για να χειριστείτε ένα σφάλμα 404 στο μπροστινό μέρος. Το σενάριο χρησιμοποιεί το window.onload συμβάν αναμονής για την πλήρη φόρτωση της σελίδας. Η σελίδα κάνει ένα φέρω ζητήστε να δείτε εάν ο πόρος είναι διαθέσιμος μετά τη φόρτωσή του. Ο χρήστης αποστέλλεται σε μια προσαρμοσμένη σελίδα σφάλματος εάν ο πόρος επιστρέψει ένα σφάλμα 404. Χωρίς την ανάγκη συμμετοχής του backend, αυτή η τεχνική είναι ιδιαίτερα χρήσιμη για τη διαχείριση αστοχιών απευθείας στο πρόγραμμα περιήγησης του χρήστη και την παροχή εναλλακτικής για τυχόν σελίδες ή πόρους που λείπουν.

Στο δεύτερο παράδειγμα, το σενάριο διαχειρίζεται αιτήματα χρησιμοποιώντας a Cloudflare Worker καθώς μετακινείται στο backend. Ο εργαζόμενος χρησιμοποιεί το addEventListener μέθοδος ακρόασης συμβάντων και υποκλοπών ανάκτησης αιτημάτων όταν γίνονται. Σε περίπτωση που παρουσιαστεί σφάλμα 404 λόγω μη ύπαρξης της ζητούμενης σελίδας, ο εργαζόμενος θα παρέχει δυναμικά μια προσαρμοσμένη σελίδα σφάλματος. Αυτή η στρατηγική λειτουργεί καλά για τη διαχείριση των απαντήσεων του διακομιστή και προσφέρει έναν πιο προσαρμόσιμο και ασφαλή τρόπο χειρισμού σφαλμάτων, ιδιαίτερα όταν εργάζεστε με διάφορα περιβάλλοντα, όπως η παραγωγή και η εγκατάσταση ή το δυναμικό περιεχόμενο.

Προκειμένου να διασφαλιστεί ότι τα σενάρια frontend και backend αναπτύσσονται και λειτουργούν σωστά, η δοκιμή μονάδας εισάγεται στο τρίτο παράδειγμα. Κάνει αυτοματοποιημένες δοκιμές για να δει εάν η ανάπτυξη Σελίδων Cloudflare επιστρέφει τους σωστούς κωδικούς κατάστασης HTTP χρησιμοποιώντας Node.js και ένα πλαίσιο δοκιμών όπως το Mocha. Οι δοκιμές για την κύρια σελίδα (που προϋποθέτουν κατάσταση 200) και οι δοκιμές για μια ανύπαρκτη σελίδα (που αναμένουν κατάσταση 404) περιλαμβάνονται και οι δύο στη δοκιμαστική σουίτα. Αυτές οι δοκιμές διασφαλίζουν ότι τα πάντα αναπτύσσονται σύμφωνα με το σχέδιο και ότι τυχόν κατεστραμμένες σελίδες ή σύνδεσμοι έχουν ως αποτέλεσμα την κατάλληλη απόκριση.

Επιπλέον, η χρήση των δοκιμών του διεκδικώ Οι εντολές εγγυώνται ότι τυχόν διαφορές στους κωδικούς κατάστασης απόκρισης εντοπίζονται αμέσως. Σε αγωγούς συνεχούς ολοκλήρωσης και ανάπτυξης (CI/CD), όπου η διασφάλιση της συμπεριφοράς ανάπτυξης είναι ζωτικής σημασίας για την αποφυγή διακοπής λειτουργίας ή διακοπής συνδέσεων, οι δοκιμές είναι απαραίτητες. Λαμβάνοντας υπόψη όλα τα πράγματα, η συγχώνευση της ανακατεύθυνσης frontend, του χειρισμού σφαλμάτων υποστήριξης και της δοκιμής μονάδας προσφέρει μια διεξοδική προσέγγιση για την εξασφάλιση της απρόσκοπτης λειτουργίας της ανάπτυξης του Cloudflare Workers—ακόμα και αν υπάρχουν πόροι που λείπουν ή προσαρμοσμένες συνθήκες, όπως ένας διακομιστής σταδίου.

// Frontend JavaScript for handling redirection
// This script checks if a resource is available on the Cloudflare page
// If not, it redirects to a fallback page
window.onload = function () {
  fetch(window.location.href)
    .then(response => {
      if (response.status === 404) {
        window.location.href = '/404.html';  // Redirect to custom 404 page
      }
    })
    .catch(error => {
      console.error('Error fetching the page:', error);
      window.location.href = '/error.html';  // Redirect to error page
    });
};

// Cloudflare Worker script for managing 404 errors
// The script checks if the requested path exists, and if not, returns a custom 404 page
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
  try {
    const response = await fetch(request);
    if (response.status === 404) {
      return new Response('Custom 404 Page', { status: 404 });
    }
    return response;
  } catch (error) {
    return new Response('Error occurred: ' + error.message, { status: 500 });
  }
}

// Example unit test for deployment verification
// Using JavaScript to ensure that Cloudflare Pages return the correct response
const assert = require('assert');
const fetch = require('node-fetch');
describe('Cloudflare Deployment Test', function() {
  it('should return 200 for the main page', async function() {
    const response = await fetch('https://your-domain.pages.dev');
    assert.equal(response.status, 200);
  });
  it('should return 404 for non-existent page', async function() {
    const response = await fetch('https://your-domain.pages.dev/unknown');
    assert.equal(response.status, 404);
  });
});

Κατανόηση του περιβάλλοντος σκηνής των εργαζομένων στο Cloudflare

Για σκοπούς ανάπτυξης, η εγκατάσταση ενός περιβάλλοντος σταδίου μπορεί να είναι ζωτικής σημασίας όταν εργάζεστε με Cloudflare Workers. Οι προγραμματιστές μπορούν να δοκιμάσουν τις εφαρμογές τους σε ένα περιβάλλον σταδίου πριν τις αναπτύξουν στον διακομιστή παραγωγής. Για την αποφυγή προβλημάτων όπως το υποδεικνυόμενο σφάλμα 404, αυτό το περιβάλλον πρέπει να ρυθμιστεί σωστά κατά την πρώτη ρύθμιση. Οι προγραμματιστές πιστεύουν συχνά ότι το μόνο που χρειάζεται για να ξεκινήσει ένας ζωντανός διακομιστής είναι να κλωνοποιήσει ένα αποθετήριο GitHub και να το συνδέσει με τις Σελίδες Cloudflare. Αν και το Cloudflare αναπτύσσει αυτόματα στατικές τοποθεσίες, εάν η διαμόρφωση δρομολόγησης του εργαζόμενου δεν έχει ρυθμιστεί σωστά, ενδέχεται να προκύψουν προβλήματα.

Ένα σφάλμα 404 σημαίνει συχνά ότι το αίτημα δεν παρεμποδίζεται σωστά από το Εργάτης. Οι προσαρμοσμένοι κανόνες δρομολόγησης είναι απαραίτητοι για τους Cloudflare Workers να εγγυώνται ότι τα αιτήματα αποστέλλονται στο σωστό μέρος. Ακόμη και μετά την εκκίνηση του ιστότοπου, τα αιτήματα για ορισμένες σελίδες ενδέχεται να εμφανίσουν σφάλμα 404 εάν αυτές οι διαδρομές δεν έχουν ρυθμιστεί. Η διασφάλιση της σύνδεσης του σεναρίου Worker με τον τομέα σταδιοποίησης είναι επίσης ζωτικής σημασίας. Αυτά τα λάθη μπορούν να μειωθούν κατά την ανάπτυξη χρησιμοποιώντας έναν καλά οργανωμένο Εργάτη και επικυρώνοντας τις διαδρομές.

Επιβεβαίωση ότι ο Εργαζόμενος εξακολουθεί να είναι συνδεδεμένος με το δικό σας τομέας σταδιοποίησης είναι άλλο ένα κρίσιμο βήμα. Ο Εργαζόμενος μπορεί περιστασιακά να αποτύχει να συνδεθεί αυτόματα με το νέο περιβάλλον κατά την ανάπτυξη, ιδιαίτερα όταν υπάρχουν πολλά περιβάλλοντα (όπως η παραγωγή και η εγκατάσταση). Για να συνδέσετε μη αυτόματα το Worker με το συγκεκριμένο περιβάλλον και να βεβαιωθείτε ότι επεξεργάζεται κατάλληλα αιτήματα, οι προγραμματιστές μπορούν να χρησιμοποιήσουν τον πίνακα εργαλείων του Cloudflare. Για να λειτουργούν ομαλά και χωρίς σφάλματα τα περιβάλλοντα σταδιοποίησης και παραγωγής, αυτό το βήμα είναι απαραίτητο.