Connect an Architect App to a Cloudflare Domain

Architect(arc.codes) and Begin.com(a service built on top of Architect) are awesome. They take much of the pain out of deploying web apps to AWS. But neither currently support multiple domain on a single app. Setting this up manually is painful. There is a (somewhat outdated) checklist on the Architect site that I used as a starting point. Here are the steps that worked for me.

Before starting this process you need to:

• Register your domain with Cloudflare nameservers.
• Deploy your arc app to AWS.

Now to begin

1. Create a new Origin certificate for your domain on Cloudflare.

   • Go to Cloudflare dashboard and select the settings for your domain.
   • Choose the "SSL/TLS" tab across the top.
   • Set the "encryption mode" to "Full".
   • At the top, just below the row of primary tabs, choose the "Origin Server" in the secondary tabs
   • Click the "Create Certificate" button.
   • Let Cloudflare generate a "private key and CSR" with RSA as the key type.
   • Make sure the "List Hostnames" includes any hostnames you need (root and wildcard should cover all possibilities).
   • Set "PEM" as the key format.

2. Add that Cloudflare Origin certificate to the AWS certificate manager.

   • In a new browser tab go to the AWS console. Make sure us-east-1 is set in the region. In the services search for "Certificate Manager".
   • Click the "Import Certificate" button.
   • Copy the cloudflare "Origin Certificate" into the AWS "Certificate body" field.
   • Copy the cloudflare "Private Key" into the AWS "Certificate Private Key" field.
   • In the AWS "Certificate Chain" field enter the RSA version of the Cloudflare Origin root certificate that can be found here.

3. Create a custom domain in the AWS API gateway with that certificate.

   • Go back to the AWS console and find the "API Gateway" service.
   • In the left navigation select "Custom Domain Names" and then click the "Create" button.
   • Enter the domain name that is registered on Cloudflare (i.e. example.com or staging.example.com).
   • In the endpoint configuration section under the "ACM certificate" field chose the certificate you created. Then click the "Create domain name" button at the bottom of the page.

4. Map that AWS custom domain to your specific AWS API gateway endpoint.

   • Still in the AWS "API Gateway" with "Custom Domain names" selected on the left.
   • In the lower section of the screen chose the "API mappings" tab. Then click the "Configure API mappings" button.
   • Under the API dropdown select the endpoint (i.e. {arc-proj}Production... or {arc-proj}Staging...).
   • Pick "\$default" from the "Stage" dropdown menu. Click the save button at the bottom of the page.

5. Point your Cloudflare DNS to the API Gateway domain for the custom domain you created.

   • On the Cloudflare dashboard choose the "DNS" tab at the top of the page.
   • In the middle of the page click to "Add record".
   • Add a CName record and under the "Name" filed enter "@" for a root domain or enter the desired subdomain (i.e. staging for staging.example.com).
   • On the AWS console custom domain name page copy the "API Gateway domain name" from the "Endpoint configuration" box (i.e. xxxxxxx.execute-api.us-east-1.amazonaws.com).
   • Paste that domain name into the "target" filed of the form on the Cloudflare CName record page.

That is it. It may take a few minutes for the DNS to resolve.

Special cases

1. Subdomains to different endpoints

   • Setting up example.com and staging.example.com to point to respective endpoints of your arc app.
   • This requires two aws custom domain names connected to two CName Cloudflare records, but they can share the same certificate.

2. Multiple Domains on the same arc endpoint

   • You can map multiple Cloudflare domains to the same AWS endpoint.

3. Upgrade Requests to HTTPS

   • While setting this up I also recommend changing your Cloudflare settings to upgrade any request to the http for your domain to be https as well.
   • This setting is under the SSL/TLS primary tab and under the "edge certificates" secondary tab.
   • Set the "Always Use HTTPS" to on.