Khắc phục sự cố môi trường dàn dựng với Cloudflare Workers
Một giai đoạn thiết yếu trong quá trình phát triển là thiết lập môi trường chạy thử để các bản cập nhật có thể được kiểm tra chính xác trước khi đi vào hoạt động. Trong trường hợp này, Cloudflare Workers đang duy trì hoạt động tốt cho trang web chính đang được phát triển.
Sau khi sao chép kho lưu trữ Git hiện có và kết nối nó với môi trường chạy thử thông qua Cloudflare Workers & Pages, mọi thứ dường như hoạt động tốt. Nhật ký cho biết quá trình triển khai đã thành công, điều này thường báo hiệu việc tạo một phiên bản trực tiếp.
Nhưng khi nhà phát triển cố gắng truy cập vào địa chỉ Cloudflare đã cho, thông báo lỗi 404 xuất hiện, khiến anh không chắc chắn đã xảy ra sự cố gì. Việc xử lý các vấn đề thuộc loại này có thể gây khó chịu, đặc biệt khi người ta tin rằng máy chủ sẽ hoạt động ngay sau khi triển khai.
Không rõ liệu có cần máy chủ thứ hai hay không hoặc có cần phải làm gì khác để kích hoạt hoàn toàn kho lưu trữ mới hay không. Chúng ta sẽ xem xét nguyên nhân của sự cố 404 này và cách thiết lập máy chủ Cloudflare Workers chính xác cho môi trường chạy thử trong bài viết này.
| Yêu cầu | Ví dụ về sử dụng |
|---|---|
| window.onload | Sự kiện JavaScript này được kích hoạt sau khi tất cả nội dung của trang, bao gồm biểu định kiểu, hình ảnh và tài nguyên bên ngoài, đã được tải hoàn toàn. Nó đảm bảo rằng chỉ khi trang được chuẩn bị thì quá trình kiểm tra chuyển hướng mới bắt đầu. |
| fetch() | API dành cho các trình duyệt hiện tại được sử dụng để yêu cầu mạng. Trong trường hợp này, nó sử dụng Cloudflare để xác minh xem URL hoặc tài nguyên có sẵn hay không. Trong trường hợp yêu cầu không thành công hoặc trả về lỗi 404, các bước khác có thể được bắt đầu. |
| response.status | Mã trạng thái HTTP mà yêu cầu tìm nạp trả về có thể được kiểm tra bằng thuộc tính này. Trong ví dụ của chúng tôi, nó xác định xem câu trả lời có phải là 404 (không tìm thấy tài nguyên) hay không và nếu có thì bắt đầu chuyển hướng được cá nhân hóa. |
| addEventListener('fetch') | Mỗi khi nhân viên phản hồi yêu cầu mạng, phương pháp này sẽ theo dõi các sự kiện tìm nạp. Chúng tôi có thể sử dụng nó để quản lý các sự cố trong Cloudflare Workers hoặc chặn các yêu cầu này và trả lại câu trả lời được cá nhân hóa. |
| new Response() | Tạo đối tượng phản hồi HTTP mới chứa tiêu đề, nội dung tùy chỉnh và mã trạng thái tùy chỉnh. Khi không thể định vị được tài nguyên, tài nguyên đó sẽ được sử dụng để cung cấp phản hồi động, chẳng hạn như gửi trang 404 được cá nhân hóa. |
| assert.equal() | Phương thức này từ mô-đun khẳng định Node.js so sánh hai giá trị về sự bằng nhau. Để đảm bảo rằng mã trạng thái dự định (200, 404) khớp với câu trả lời thực sự từ Trang Cloudflare, nó thường được sử dụng trong các bài kiểm tra đơn vị. |
| describe() | Phương thức này từ mô-đun khẳng định Node.js so sánh hai giá trị về sự bằng nhau. Để đảm bảo rằng mã trạng thái dự định (200, 404) khớp với câu trả lời thực sự từ Trang Cloudflare, nó thường được sử dụng trong các bài kiểm tra đơn vị. |
| event.respondWith() | Được sử dụng trong Cloudflare Workers để thay thế câu trả lời tùy chỉnh cho việc xử lý tìm nạp mặc định. Nó cho phép bạn sửa đổi cách xử lý các yêu cầu, điều này rất hữu ích để nắm bắt các vấn đề 404 và cung cấp thông tin được cá nhân hóa. |
| async function | Bằng cách xác định hàm không đồng bộ, từ khóa này cho phép xử lý các lời hứa đang chờ. Trong trường hợp này, nó đảm bảo rằng tập lệnh sẽ không thực hiện bất kỳ logic bổ sung nào cho đến khi yêu cầu mạng được giải quyết. |
Cách nhân viên và tập lệnh của Cloudflare xử lý lỗi 404
Tập lệnh đầu tiên trong ví dụ đã cho cho thấy cách sử dụng JavaScript để xử lý lỗi 404 ở giao diện người dùng. Kịch bản sử dụng window.onload sự kiện để chờ trang tải đầy đủ. Trang này tạo ra một tìm về yêu cầu xem tài nguyên có sẵn khi nó được tải hay không. Người dùng sẽ được đưa đến trang lỗi tùy chỉnh nếu tài nguyên trả về lỗi 404. Không cần sự tham gia của chương trình phụ trợ, kỹ thuật này đặc biệt hữu ích để quản lý lỗi ngay trong trình duyệt của người dùng và cung cấp phương án dự phòng cho bất kỳ trang hoặc tài nguyên nào bị thiếu.
Trong ví dụ thứ hai, tập lệnh quản lý các yêu cầu bằng cách sử dụng Công nhân đám mây khi nó di chuyển đến phần phụ trợ. Người công nhân sử dụng addEventListener phương pháp lắng nghe các sự kiện và chặn các yêu cầu tìm nạp khi chúng được thực hiện. Trong trường hợp xảy ra lỗi 404 do trang được yêu cầu không tồn tại, nhân viên sẽ tự động cung cấp trang lỗi tùy chỉnh. Chiến lược này hoạt động tốt trong việc quản lý các câu trả lời của máy chủ và cung cấp cách xử lý lỗi an toàn và thích ứng hơn, đặc biệt khi làm việc với nhiều bối cảnh khác nhau như sản xuất và dàn dựng hoặc nội dung động.
Để đảm bảo rằng các tập lệnh frontend và backend được triển khai và hoạt động chính xác, thử nghiệm đơn vị được giới thiệu trong ví dụ thứ ba. Nó thực hiện các kiểm tra tự động để xem liệu việc triển khai Trang Cloudflare có trả về mã trạng thái HTTP chính xác hay không bằng cách sử dụng Node.js và một khung thử nghiệm như Mocha. Các thử nghiệm cho trang chính (giả định trạng thái 200) và thử nghiệm cho một trang không tồn tại (dự kiến trạng thái 404) đều được bao gồm trong bộ thử nghiệm. Những thử nghiệm này đảm bảo rằng mọi thứ đều được triển khai theo kế hoạch và mọi trang hoặc liên kết bị hỏng đều dẫn đến phản hồi thích hợp.
Hơn nữa, việc sử dụng các thử nghiệm của khẳng định các lệnh đảm bảo rằng mọi khác biệt trong mã trạng thái phản hồi sẽ được phát hiện ngay lập tức. Trong quy trình tích hợp và triển khai liên tục (CI/CD), trong đó việc đảm bảo hành vi triển khai là rất quan trọng để ngăn chặn thời gian ngừng hoạt động hoặc kết nối bị hỏng, thì việc kiểm thử là không thể thiếu. Sau tất cả những điều được xem xét, sự kết hợp giữa chuyển hướng giao diện người dùng, xử lý lỗi phụ trợ và kiểm tra đơn vị mang đến một cách tiếp cận toàn diện để đảm bảo hoạt động liền mạch trong quá trình triển khai Cloudflare Workers của bạn — ngay cả khi không có tài nguyên hoặc các điều kiện tùy chỉnh như máy chủ dàn dựng.
Giải pháp 1: Giải quyết lỗi Cloudflare 404 bằng cách sử dụng Chuyển hướng JavaScript Frontend
Bằng cách gửi khách truy cập đến trang dự phòng trong trường hợp không thể truy xuất tài nguyên được yêu cầu, phương pháp này sử dụng JavaScript để xử lý chuyển hướng và tránh lỗi 404.
// Frontend JavaScript for handling redirection// This script checks if a resource is available on the Cloudflare page// If not, it redirects to a fallback pagewindow.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});};
Giải pháp 2: Công nhân Cloudflare phụ trợ để xử lý lỗi 404
Trong giải pháp này, lỗi 404 được chuyển đến trang dự phòng tùy chỉnh và các yêu cầu được Cloudflare Workers xử lý. Để xử lý phần phụ trợ động của Cloudflare, tập lệnh này là hoàn hảo.
// Cloudflare Worker script for managing 404 errors// The script checks if the requested path exists, and if not, returns a custom 404 pageaddEventListener('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 });}}
Giải pháp 3: Kiểm tra triển khai và kiểm tra đơn vị cho các trang Cloudflare
Phương pháp này bao gồm các thử nghiệm đơn vị để xác minh hoạt động của cả tập lệnh giao diện người dùng và phụ trợ, đồng thời xác minh xem việc triển khai Trang Cloudflare có đang hoạt động hay không.
// Example unit test for deployment verification// Using JavaScript to ensure that Cloudflare Pages return the correct responseconst 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);});});
Tìm hiểu môi trường dàn dựng công nhân của Cloudflare
Vì mục đích phát triển, việc cài đặt môi trường dàn dựng có thể rất quan trọng khi làm việc với Công nhân đám mây. Các nhà phát triển có thể kiểm tra ứng dụng của họ trong môi trường chạy thử trước khi triển khai chúng lên máy chủ sản xuất. Để ngăn chặn các sự cố như lỗi 404 được chỉ ra, môi trường này phải được cấu hình đúng cách khi thiết lập lần đầu. Các nhà phát triển thường tin rằng tất cả những gì cần thiết để khởi chạy một máy chủ trực tiếp là sao chép kho lưu trữ GitHub và kết nối nó với Trang Cloudflare. Mặc dù Cloudflare tự động triển khai các trang web tĩnh nhưng nếu cấu hình định tuyến của nhân viên không được thiết lập chính xác thì có thể xảy ra sự cố.
Lỗi 404 thường có nghĩa là yêu cầu không được chặn đúng cách bởi Công nhân. Quy tắc định tuyến tùy chỉnh là cần thiết cho Cloudflare Workers để đảm bảo rằng các yêu cầu được gửi đến đúng nơi. Ngay cả sau khi trang web đã được khởi chạy, các yêu cầu đối với một số trang có thể trả về lỗi 404 nếu các tuyến này không được thiết lập. Việc đảm bảo tập lệnh Worker được kết nối với miền chạy thử cũng rất quan trọng. Những lỗi này có thể được giảm thiểu trong quá trình phát triển bằng cách sử dụng một Worker được tổ chức tốt và xác thực các tuyến đường.
Đảm bảo rằng Worker vẫn được kết nối với bạn miền dàn dựng là một bước quan trọng khác. Worker đôi khi có thể không tự động liên kết với môi trường mới trong quá trình triển khai, đặc biệt khi có một số môi trường (chẳng hạn như môi trường sản xuất và chạy thử). Để liên kết Worker với môi trường cụ thể theo cách thủ công và đảm bảo nó xử lý các yêu cầu một cách thích hợp, nhà phát triển có thể sử dụng bảng điều khiển của Cloudflare. Để môi trường dàn dựng và sản xuất chạy trơn tru và không có lỗi, bước này là cần thiết.
Các câu hỏi thường gặp về Cloudflare Workers và lỗi 404
- Điều gì gây ra lỗi 404 sau khi triển khai Cloudflare Worker?
- Quy tắc định tuyến không được định cấu hình hoặc đính kèm không chính xác Worker vào miền là những nguyên nhân thông thường của việc này.
- Page.dev có yêu cầu máy chủ hoạt động không?
- Không, máy chủ là không cần thiết. Mặc dù việc triển khai các trang tĩnh được Cloudflare xử lý tự động pages.dev, hãy đảm bảo Worker được liên kết chính xác.
- Làm cách nào tôi có thể giải quyết lỗi 404 của miền dàn dựng?
- Đảm bảo rằng tập lệnh Worker có các tuyến cần thiết được định cấu hình và Worker được liên kết với tên miền.
- Có thể sử dụng đồng thời một kho lưu trữ GitHub để sản xuất và dàn dựng không?
- Có, nhưng để tránh xung đột, bạn cần xây dựng các nhánh và thiết lập riêng biệt Workers cho từng môi trường một cách độc lập.
- Công nhân có cách tiếp cận giai đoạn và sản xuất khác nhau không?
- Không, nhưng để tránh các vấn đề khi triển khai, hãy đảm bảo mọi environment Worker của nó đã được cấu hình đúng.
Những điểm chính để định cấu hình nhân viên Cloudflare
Cần có tệp đính kèm phù hợp với miền và cài đặt quy tắc định tuyến cẩn thận để đảm bảo Cloudflare Workers hoạt động đúng cách. Để ngăn chặn lỗi 404, những hành động này rất cần thiết cho cả cài đặt sản xuất và dàn dựng.
Để đảm bảo quá trình dàn dựng thành công, hãy luôn xác nhận rằng Worker được kết nối chính xác với môi trường thích hợp và kiểm tra cài đặt triển khai của bạn. Bằng cách giải quyết những vấn đề này, thời gian ngừng hoạt động sẽ giảm xuống và đảm bảo quá trình triển khai liền mạch.
Nguồn và tài liệu tham khảo cho cấu hình Cloudflare Workers
- Xây dựng cách sử dụng Cloudflare Workers để triển khai ứng dụng serverless và các bước khắc phục sự cố phổ biến đối với lỗi 404. Lấy từ Tài liệu dành cho nhân viên Cloudflare .
- Cung cấp thông tin chi tiết về môi trường dàn dựng và cách quản lý việc triển khai thông qua Trang Cloudflare. Thêm chi tiết có sẵn tại Tổng quan về trang Cloudflare .
- Thảo luận về việc kết nối kho lưu trữ GitHub với Cloudflare Workers và tác động đến định tuyến động. Tài liệu tham khảo được lấy từ GitHub - Kho lưu trữ Cloudflare .