Skip to content

Add a site

Last reviewed: 2 months ago

In this tutorial, you will follow step-by-step instructions to bring an existing site to Cloudflare using Pulumi infrastructure as code (IaC) to familiarize yourself with the resource management lifecycle. In particular, you will create a Zone and a DNS record to resolve your newly added site. This tutorial adopts the IaC principle to complete the steps listed in the Add site tutorial.

Before you begin

Ensure you have:

  • A Cloudflare account and API Token with permission to edit the resources in this tutorial. If you need to, sign up for a Cloudflare account ↗ before continuing. Your token must have:
    • Zone-Zone-Edit permission
    • Zone-DNS-Edit permission
    • include-All zones from an account-<your account> zone resource
  • A Pulumi Cloud account. You can sign up for an always-free individual tier ↗.
  • The Pulumi CLI is installed on your machine.
  • A Pulumi-supported programming language ↗ is configured. (TypeScript, JavaScript, Python, Go, .NET, Java, or use YAML)
  • A domain name. You may use example.com to complete the tutorial.

1. Initialize your project

A Pulumi project is a collection of files in a dedicated folder that describes the infrastructure you want to create. The Pulumi project folder is identified by the required Pulumi.yaml file. You will use the Pulumi CLI to create and configure a new project.

a. Create a directory

Use a new and empty directory for this tutorial.

Terminal window
mkdir addsite-cloudflare
cd addsite-cloudflare

b. Login to Pulumi Cloud

Pulumi Cloud ↗ is a hosted service that provides a secure and scalable platform for managing your infrastructure as code. You will use it to store your Pulumi backend configurations.

At the prompt, press Enter to log into your Pulumi Cloud account via the browser. Alternatively, you may provide a Pulumi Cloud access token ↗.

Terminal window
pulumi login

c. Create a new program

A Pulumi program is code written in a supported programming language ↗ that defines infrastructure resources.

To create a program, select your language of choice and run the pulumi command:

Terminal window
pulumi new javascript --name addsite-cloudflare --yes
# wait a few seconds while the project is initialized

d. Create a stack

A Pulumi stack ↗ is an instance of a Pulumi program. Stacks are independently configurable and may represent different environments (development, staging, production) or feature branches. For this tutorial, you'll use the dev stack.

To instantiate your dev stack, run:

Terminal window
pulumi up --yes
# wait a few seconds for the stack to be instantiated.

You have not defined any resources at this point, so you'll have an empty stack.

e. Save your settings

In this step, you will store your settings in a Pulumi ESC Environment ↗, a YAML file containing configurations and secrets. These can be accessed in several ways, including a Pulumi program. All ESC Environments securely reside in your Pulumi Cloud account and can be fully managed via the Pulumi CLI. For this tutorial, you will store the following values:

  • Your Cloudflare account ID.
  • A valid Cloudflare API token.
  • A domain. For instance, example.com.
Terminal window
# Define an ESC Environment name
E=clouflare/my-dev-env
# Create a new Pulumi ESC Environment
pulumi config env init --env $E --yes
Creating environment clouflare/my-dev-env for stack dev...
Terminal window
# Replace abc123 with your Cloudflare Account ID
pulumi env set $E --plaintext pulumiConfig.accountId abc123
# Replace API_TOKEN with your Cloudflare API Token
pulumi env set $E --secret pulumiConfig.cloudflare:apiToken API_TOKEN
# Replace example.com with your registered domain, or leave as is
pulumi env set $E --plaintext pulumiConfig.domain example.com

f. Install the Cloudflare package

You need to install the Cloudflare package for your language of choice in order to define Cloudflare resources in your Pulumi program.

Install the Cloudflare package by running the following command:

Terminal window
npm install @pulumi/cloudflare
added 1 package ...

2. Define Cloudflare resources in code

With the Cloudflare package installed, you can now define any supported Cloudflare resource ↗ in your Pulumi program. You'll define a Zone, and a DNS Record next.

a. Add a Zone

A domain, or site, is known as a Zone in Cloudflare. In Pulumi, the Zone resource ↗ represents a Cloudflare Zone.

Replace the contents of your entrypoint file with the following:

Filename: index.js

"use strict";
const pulumi = require("@pulumi/pulumi");
const cloudflare = require("@pulumi/cloudflare");
const config = new pulumi.Config();
const accountId = config.require("accountId");
const domain = config.require("domain");
// Create a Cloudflare resource (Zone)
const zone = new cloudflare.Zone("my-zone", {
zone: domain,
accountId: accountId,
plan: "free",
jumpStart: true,
});
exports.zoneId = zone.id;
exports.nameservers = zone.nameServers;
exports.status = zone.status;

Notice that the code also outputs several properties from the Zone resource, such as the zoneId, nameservers, and status, so that they can easily be accessed in subsequent steps.

b. Add a DNS Record

You will now add a DNS Record resource ↗ to test previously configured Zone.

Add the following code snippet to your entrypoint file after the Zone resource definition:

Filename: index.js

const record = new cloudflare.Record("my-record", {
zoneId: zone.id,
name: domain,
content: "192.0.2.1",
type: "A",
proxied: true,
});

3. Deploy your changes

Now that you have defined your resources, you can deploy the changes using the Pulumi CLI so that they are reflected in your Cloudflare account.

To deploy the changes, run:

Terminal window
pulumi up --yes
wait for the dev stack to become ready

4. Configure your DNS provider

a. Obtain your nameservers

Once you have added a domain to Cloudflare, that domain will receive two assigned authoritative nameservers.

To retrieve the assigned nameservers, run:

Terminal window
pulumi stack output

b. Update your registrar

Update the nameservers at your registrar to activate Cloudflare services for your domain. The instructions are registrar-specific. You may be able to find guidance under this consolidated list of common registrars.

c. Check your domain status

Once successfully registered, your domain status will change to active.

Terminal window
pulumi stack output

5. Test your site

You will run two nslookup commands against the Cloudflare-assigned nameservers.

To test your site, run:

Terminal window
DOMAIN=$(pulumi config get domain)
NS1=$(pulumi stack output nameservers | jq '.[0]' -r)
NS2=$(pulumi stack output nameservers | jq '.[1]' -r)
nslookup $DOMAIN $NS1
nslookup $DOMAIN $NS2

For .NET, use Nameservers as the Output.

Confirm your response returns the IP address(es) for your site.

6. Clean up

In this last step, you will remove the resources and stack used throughout the tutorial.

a. Delete the resources

Terminal window
pulumi destroy --yes

b. Remove the stack

Terminal window
pulumi stack rm dev

Next steps

You have incrementally defined Cloudflare resources needed to add a site to Cloudflare. You declare the resources in your programming language of choice and let Pulumi handle the rest.

To deploy a serverless app with Pulumi, follow the Deploy a Worker tutorial.