How to deploy a custom domain with the Amplify Console

Add a custom domain to an Amplify Console deployment in just a couple of minutes — let’s take a look at how this works!

What is the Amplify Console?

The Amplify console offers hosting for full stack serverless web apps with continuous Git-based deployment. You connect your Github repo, click deploy, and the application is deployed to a live URL.

Built-in atomic deployments eliminate maintenance windows by ensuring that the web app is only updated when the entire deployment has finished.

If you are launching a project with an Amplify backend, the console will also give you the option of deploying and maintaining the Amplify project.

Adding a custom domain

After you’ve deployed an application, the next step is deploying your app to a custom domain purchased through domain registrars such as GoDaddy or Google Domains.

When you initially deploy your web app with the Amplify Console, it is hosted at a location similar to this:

https://branch-name.d1m7bkiki6tdw1.amplifyapp.com

When you use a custom domain, users will be able to easily access your app that is hosted from a vanity URL, such as the following:

https://www.myawesomedomain.com

Let’s learn how to do this!

Launching the app in the Amplify Console

If you already have an application launched in the Amplify Console, you can skip this step and go directly the next step — adding the custom domain.

There is also a ready-made Gatsby Blog to get started quickly. Just click here and then jump ahead to the next step to adding the custom domain.

To deploy an app already in your GitHub account, let’s launch a new application in the Amplify Console. The first step is to direct your browser to https://console.aws.amazon.com/amplify and click GET STARTED under the Deploy section.

Next, connect the Git repository you’d like to launch and select the branch, then click Next. Accept the default build settings, then click Save and deploy.

Now your application is launched and we can move on to setting it up in a custom domain.

Adding the custom domain

In the AWS dashboard, go to Route53 & click on Hosted Zones. Choose Create Hosted Zone. From there, enter your domain name & click Create.

ProTip: Be sure to enter your domain name as is, without www. E.g. myawesomedomain.com

Now in Route53 dashboard you should be given 4 nameservers.

In your hosting account (GoDaddy, Google Domains, etc..), set these custom nameservers in your DNS setting for the domain you’re using.

These nameservers should look something like ns-1355.awsdns-41.org, ns-1625.awsdns-11.co.uk, etc…

Next, in the Amplify Console, click Domain Management in the left menu. Next, click the Add Domain button.

Here, the dropdown menu should show you the domain you have in Route53. Choose this domain & click Configure domain.

This should deploy the app to your domain (this will take between 5–20 minutes). The last thing is to set up redirects. Click on Rewrites & redirects.

Make sure the redirect for the domain looks like this (i.e. redirect the https://websitename to https://www.websitename):

That’s it! Once the DNS propagates, you should see your domain live at the URL that you have set up in the above steps.

My Name is Nader Dabit. I am a Developer Advocate at Amazon Web Services working with projects like AWS AppSync and AWS Amplify. I specialize in cross-platform & cloud-enabled application development.


How to deploy a custom domain with the Amplify Console was originally published in A Cloud Guru on Medium, where people are continuing the conversation by highlighting and responding to this story.