1. Implementing Custom 404 Not Found Pages with Cloudflare

    TypeScript

    To implement a custom 404 Not Found page using Cloudflare, you would typically leverage Cloudflare Workers. A Cloudflare Worker allows you to run serverless JavaScript functions on Cloudflare's edge network. This means your function will execute in a location close to the user requesting your site, minimizing latency.

    Let's go through the required steps to set up a Cloudflare Worker that responds with a custom 404 page:

    1. Set up a new Worker script.
    2. Write the Worker script logic to check the response status code.
    3. If a request results in a 404 status, generate a custom response.
    4. Deploy the Worker script to your Cloudflare domain.
    5. Configure route pattern to match all requests so the Worker script can intercept them.

    Below is the Pulumi program in TypeScript language which outlines these steps. This program assumes you have Cloudflare set up and have your Cloudflare accountId available. It also assumes you have a custom HTML response that you would like to serve as your 404 page.

    import * as cloudflare from "@pulumi/cloudflare"; // Replace with your actual Cloudflare account ID and HTML content for the 404 page. const accountId = "your-cloudflare-account-id"; const custom404HtmlContent = ` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page Not Found</title> </head> <body> <h1>404 - Page Not Found</h1> <p>We're sorry, the page you were looking for isn't here.</p> </body> </html> `; // Define the Worker script logic. const workerScript = ` addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)); }); async function handleRequest(request) { const response = await fetch(request); // If the origin response is a 404, respond with the custom HTML. if(response.status === 404) { return new Response('${custom404HtmlContent.replace(/\n/g, '').trim()}', { headers: { 'content-type': 'text/html;charset=UTF-8' }, status: 404, }); } return response; } `; // Create the Worker script using the cloudflare.WorkerScript resource. const notFoundWorker = new cloudflare.WorkerScript("notFoundWorker", { accountId, name: "custom-404-page-worker", content: workerScript, }, { dependsOn: [] }); // Output the name of the Worker script which is useful when configuring the Worker route. export const workerScriptName = notFoundWorker.name;

    The program above creates a Cloudflare Worker script using the Pulumi Cloudflare provider. The script listens for fetch events, and when a request results in a 404 status code from your origin server, it responds with the custom HTML content defined earlier.

    Please note that you need to have a Cloudflare account and a zone set up for the domain you're managing. Additionally, the accountId should be replaced with your actual Cloudflare account identifier.

    Remember that to apply this configuration, you should have Pulumi installed and configured for use with Cloudflare. Run the program using pulumi up command in your terminal after setting it up in a new Pulumi project. This will create the necessary Cloudflare Worker and bind it to the specified Cloudflare account.

    What to Expect After Deployment

    After deploying the above Pulumi program:

    • Requests to your domain that result in a 404 status code from your origin server will now display the custom HTML content defined in the custom404HtmlContent variable.
    • The custom Worker script will run on Cloudflare's edge network, inspecting incoming requests and modifying them before they reach your origin server.
    • You can update the content or logic of your Worker script by modifying the Pulumi code and redeploying.

    For further customization or additional Cloudflare features, you can refer to the Cloudflare Pulumi Provider Documentation.


GPT4o|Modeexplainbalancedcode