Cloudflare の設定

The following screenshots illustrate how to configure Cloudflare to deliver content. Essential settings are marked with a red circle.

This setup can be completely done in the browser by using the Cloudflare Dashboard only. If you are already familiar with Cloudflare Workers, Wrangler & GitHub and not afraid of entering commands in a terminal window you might want to follow the instructions here instead.

Create a Cloudflare site

If you already have a cloudflare site and DNS setup you can skip forward to the Setup push invalidation section.

Enter the domain:

Select a plan:

Note that surgical push invalidations are only supported on the Enterprise plan. On all other plans the entire cache of the site will be purged every time an author publishes a content change.

For this walk-through we’ll use the Free plan.

Setup push invalidation

Push invalidation automatically purges content on the customer’s production CDN (e.g. www.yourdomain.com), whenever an author publishes content changes.

Content is purged by url and by cache tag/key.

Push invalidation is enabled by adding specific properties to the project’s configuration (an Excel workbook named .helix/config.xlsx in Sharepoint or a Google Sheet named .helix/config in Google Drive).

Configuration properties:

key
value
comment
cdn.prod.host
<Production Host>
Host name of production site, e.g. www.yourdomain.com
cdn.prod.type
cloudflare
cdn.prod.plan
e.g. free

values: free, pro, business, enterprise

default: free

only enterprise plan supports purge-by-tag

cdn.prod.zoneId
<Cloudflare Zone ID>
ID of production zone
cdn.prod.apiToken
<Cloudflare API Token>

To create an API Token,

  • go to API Tokens
  • click on “Create Token”,
  • go to “Create Custom Token” at the bottom and click on “Get started”
  • enter a token name (e.g. "Production Site Purge Token"),
  • Permissions: “Zone”, “Cache Purge”, “Purge”
  • Zone Resources: “Include”, “Specific zone”, “<your production zone>”
  • click on “Continue to summary”
  • click on “Create Token”,
  • copy the generated token value.

Note that only sites on the enterprise plan will be surgically purged by url and cache key. A Purge All will be performed instead on non-enterprise sites every time an author publishes a content change.

You can validate the credentials with this tool.

DNS Setup

For a new site, we’ll start with a simple DNS setup.

  1. Create a new CNAME record. If your zone is example.com and you want to serve traffic on www.example.com, then the name should be www
  2. If you want to serve traffic on example.com (without a www) then the name should be @
  3. And if you want to serve traffic on all subdomains, then the name should be * as in the screenshot below
  4. As we are using workers to serve the content, the value of the Content field does not matter. It’s easiest to use your ref--repo--owner.hlx.live host name here. This is a hostname, not a URL, so leave out the leading https://

Make sure the CNAME record is Proxied:

SSL/TLS Setup

Select SSL/TLS from the left pane and Edge Certificates in the dropdown list:

On the right side, scroll down to Always Use HTTPS and enable it:

Configure Caching

Create Page Rule

Copy
url
URL (required)

Create Worker

Choose Workers in the left pane and click on “Manage Workers”:

Click on “Create a Service”:

Enter a name for the worker (e.g. “helix-worker”) and click on “Create Service”:

Copy
worker
Service name

Click on “Quick edit”:

Edit worker code

  1. If you have successfully configured push invalidation copy the content of this file, otherwise copy the content of this file.
  2. In the left pane, replace the existing content with the copied content.
  3. Click on “Save and Deploy”:

Click on Settings and “Add variable”:


Copy
variable
Variable name
value
Value

Add a variable ORIGIN_HOSTNAME and set the value to the hostname of your origin (e.g. main--mysite--hlxsites.hlx.live):

Click on Triggers an select “Add route”:



Enter your domain route (e.g. www.mydomain.com/*), select your zone and click on “Add route”:

Depending on the setup chosen in DNS Setup, you would select routes www.mydomain.com/*, mydomain.com/*, or *.mydomain.com/*

After completing all steps you should be all set.

Copy
url
Route

Expanding the AEM footprint on your website

In case you start with having only a portion of the website being routed to your .live origin and have routed a specific folder (eg. /blog/*) you can subsequently add more routes whenever you are ready to expose new sections of the site by simply adding more routes and repeat the last “add route” steps as needed, without changing your worker configuration.

Watch out for duplicate content

Search engines often penalize sites for duplicate content, so it’s important to make sure your content is not available on the web elsewhere. Cloudflare, unfortunately, has a default setting that will expose your site on additional network ports. In paid Cloudflare plans you can block traffic on these additional ports. This is a recommended setting for production sites.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab