Configure Heroku App with Google Domains and SSL

  • Wayne Lambert
  • Published: Fri 02-Aug-19 (5 years, 2 months ago) | Updated: Thu 02-Jul-20 (4 years, 3 months ago)
  • Categories: Infrastructure
  • 603 words | 9 min read

Setting up your Heroku app to play nicely with your Google Domains is no trivial task. There are several settings that need to be just so in order for this to work properly. This guide will walk you through the entire process.

Pre-requisites

  • A domain name that is being managed by the Google Domains service.
  • The lowest entry level paid subscription for a Heroku dyno (currently the 'hobby' dyno priced at $7/month as a publish date). This is required for the SSL certificate.
  • Your app will need to be successfully deployed. This means that your 'Activity Feed' section should display as 'Deployed' and have a commit ID. If you're using Docker, it is possible for the build to succeed and for your app to be available at https://<your-app-name>.herokuapp.com but the deployment actually failed. This can be a bit confusing at first as it seems as though everything is OK.

 

First up, let's take the steps required within Heroku.

Within the 'settings' tab of your Heroku app's dashboard area (found at: https://dashboard.heroku.com/apps/<your-app-name>/settings), go down to the 'Domains and certificates' section.

Click on the 'Configure SSL' button and choose 'Automatically'.

Now, let's set up the domains...

Click on 'Add domain'.

Enter your first top level domain. For example, <your-domain-name>.com.

Click on 'Add domain' again.

This time, enter another record but preceded with www.   For example, www.<your-domain-name>.com.

Entering each of these will generate a DNS Target and and ACM Status. The ACM Status will resolve as 'OK' with a green tick once the SSL certificate is successfully resolved.

Copy the entire text string for the DNS target for the www record that you created. For now, put it in your notes app.

Now, let's head over to your Google Domains account and log in.

Click on 'DNS' on the left-hand side.

Ensure that the 'Name servers' section is selected as 'Use the Google Domains name servers'

For the 'DNSSEC' section, click on 'ENABLE DNSSEC' if you are using a domain that requires DNSSEC. For example .dev domains (like mine) require this.

Add a record under 'Synthetic records' section for subdomain forwarding using the following settings.

  • Subdomain forward
  • Subdomain: @
  • Destination URL: https://www.<your-domain-name>.com
  • Permanent redirect (301)
  • Forward path
  • Enable SSL

 

The next step is to add a CNAME record within the 'Custom resource records' section.

  • Name: www
  • Type: CNAME
  • TTL: 600 (This will resolve itself as 10m when you save the record
  • Data: This is the DNS Target URL that you copied onto your notes app in a previous step. This also includes a dot (period) after the .com. This is expected and should be included within the entry for the CNAME record. It will look something like stuffed-turkey-hfy4jlvrfxmdk6yfzlmny39h.herokudns.com

 

Once all of these steps have been completed, you will need to wait about 15 minutes for everything to propagate. Once everything is working, you should be able to try each of the combinations within your browser's address bar or using the curl command (MacOS and Linux) and you will be redirected to the https://www.<your-domain-name>.com variant of your site.

$ curl <your-domain-name>.com
$ curl http://<your-domain-name>.com

should return...

<HTML>
  <HEAD>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <TITLE>301 Moved</TITLE>
  </HEAD>
  <BODY>
    <H1>301 Moved</H1>
    The document has moved
    <A HREF="https://<your-domain-name>/">here</A>.
  </BODY>
</HTML>

The above snippet shows that the 301 permanent redirect you entered as a synthetic record in your Google Domains account is working.

$ curl https://www.<your-domain-name>.com

 Curling the above url should return the HTML content for your site's home page.

That's it! You should now have your Heroku app set up with your custom domain name.