Deploy a Hello World web application using Cloudflare Workers and Pulumi
In this tutorial, you will go through step-by-step instructions to deploy a Hello World web application using Cloudflare Workers and Pulumi so that you can become familiar with the resource management lifecycle. In particular, you will create a worker, add a route, and add a DNS record to access the application before cleaning up all the resources.
Before you begin
Before you start, make sure you have:
- A Cloudflare account and API Token with permissions to edit the resources in this tutorial. If you need to, sign up for a Cloudflare account before continuing.
- A Pulumi Cloud account. You can sign up for an always-free, individual tier.
- npm and the Pulumi CLI installed on your machine.
Initialize Pulumi
a. Create a directory
You’ll use a new and empty directory for this tutorial.
b. Login
At the prompt, press Enter to log into your Pulumi Cloud account via the browser. Alternatively, you may provide a Pulumi Cloud access token.
c. Create a project
Complete the prompts with defaults where possible and provide all the Cloudflare details. You will need your account and zone id, a domain, and your API token.
d. Create a stack
At the prompt, Select yes with the arrow keys and press the Enter key
After the above command completes, review the value of myFirstOutput for correctness.
e. (Optional) Review the stack
From the output above, follow your View in Browser link to get familiar with the Pulumi stack.
Example:
Deploy a ‘Hello World’ script
You will now add a Cloudflare Worker to the Pulumi stack, dev.
a. Add Cloudflare Worker to index.ts
index.tsimport * as pulumi from "@pulumi/pulumi";
import * as cloudflare from "@pulumi/cloudflare";
import * as fs from "fs";
const config = new pulumi.Config();
const accountId = config.require("accountId");
// A Worker script to invoke
export const script = new cloudflare.WorkerScript("hello-world-script", { accountId: accountId, name: "hello-world", // Read the content of the worker from a file content: fs.readFileSync("./app/worker.ts", "utf8"),
});
b. Install the Pulumi Cloudflare provider
c. Apply the changes
At the prompt, Select yes with the arrow keys and press the Enter key
d. (Optional) View the Cloudflare Worker in the dashboard
You can view your Cloudflare resource directly in the Cloudflare Dashboard to validate its existence.
- Log into the Cloudflare dashboard.
- Select your account.
- Go to Workers & Pages.
- Open the “hello-world” application. Example:
Add a Worker route
You will now add a Worker Route to the Pulumi stack, dev so the script can have an endpoint.
a. Add Worker Route to index.ts
index.tsimport * as pulumi from "@pulumi/pulumi";
import * as cloudflare from "@pulumi/cloudflare";
import * as fs from "fs";
const config = new pulumi.Config();
const accountId = config.require("accountId");
const zoneId = config.require("zoneId");
const domain = config.require("domain")
// A Worker script to invoke
export const script = new cloudflare.WorkerScript("hello-world-script", { accountId: accountId, name: "hello-world", // Read the content of the worker from a file content: fs.readFileSync("./app/worker.ts", "utf8"),
});
// A Worker route to serve requests and the Worker script
export const route = new cloudflare.WorkerRoute("hello-world-route", { zoneId: zoneId, pattern: "hello-world." + domain, scriptName: script.name,
});
b. Apply changes
At the prompt, Select yes with the arrow keys and press the Enter key
c. (Optional) View the Cloudflare Worker route in the dashboard
In the Cloudflare Dashboard, you’ll notice the Worker application now contains the previously defined Worker Route.
- Log into the Cloudflare dashboard.
- Select your account.
- Go to Workers & Pages.
- Select your application.
- For Routes, select View to verify the Worker Route details match your definition.
Cloudflare Dashboard - Worker Route
Add a DNS record
You will now add a DNS record to your domain so the previously configured route can be accessed via a URL.
a. Add DNS record to index.ts
index.tsimport * as pulumi from "@pulumi/pulumi";
import * as cloudflare from "@pulumi/cloudflare";
import * as fs from "fs";
const config = new pulumi.Config();
const accountId = config.require("accountId");
const zoneId = config.require("zoneId");
const domain = config.require("domain")
// A Worker script to invoke
export const script = new cloudflare.WorkerScript("hello-world-script", { accountId: accountId, name: "hello-world", // Read the content of the worker from a file content: fs.readFileSync("./app/worker.ts", "utf8"),
});
// A Worker route to serve requests and the Worker script
export const route = new cloudflare.WorkerRoute("hello-world-route", { zoneId: zoneId, pattern: "hello-world." + domain, scriptName: script.name,
});
// A DNS record to access the route from the domain
export const record = new cloudflare.Record("hello-world-record", { zoneId: zoneId, name: script.name, value: "192.0.2.1", type: "A", proxied: true
});
export const url = route.pattern b. Apply the changes
At the prompt, Select yes with the arrow keys and press the Enter key
c. (Optional) View all the resources in Pulumi Cloud
- In your browser, open your Pulumi Cloud
- Navigate to your stack,
serverless-cloudflare/dev. - Confirm all the defined resources are created and healthy. Example:
Test the app
At this point you have incrementally added all the Cloudflare resources needed to run and access your Hello World application. This was done by defining the resources in TypeScript and letting Pulumi handle the rest.
You can test your application via the terminal or browser.
- In the terminal
- In your browser, open
hello-world.YOUR_DOMAIN.com
Example:
Clean up
In this last step, you will run a couple of commands to clean up the resources and stack you used throughout the tutorial.
a. Delete the Cloudflare resources
b. Remove the Pulumi stack