Deploy a website with a custom domain and SSL certificate – AWS AMplify Tutorial

AWS Amplify Console

The AWS Amplify console provides the fastest and easiest way to deploy a static website to the cloud. It has an easy-to-follow flow that walks you through each step and comes with the following convenient features: 

  • Source code can come from any of the popular git platforms (Github, Bitbucket, Gitlab, CodeCommit) or can be uploaded directly through the console
  • You can attach a custom domain to your website very easily
  • Free SSL certificates can be added and managed within the Amplify console. 
  • CI/CD  – If you choose to integrate with one of the git platforms, you can easily setup a pipeline so that any future commits to your project get deployed automatically. 
 

Let's get started

Head over to the Amplify console and click on the Get Started under the deploy section. 

Amplify console

Choose how you want to setup your source

You have the option to upload your source code directly or to integrate with a Git provider.  For this demo we will use Github to show how the integration process works. 

 

Github will ask you to authorize AWS Amplify to access your repositories. If you are not logged in to your Github account it will first ask you to do so. 

Github

Once authorization is complete,  select the repository you want to connect as well as the specific branch you want it to use. 

Next, set an App name and configure any build settings. If your project consists of a special file structure, this is where you would indicate this so Amplify knows how to deploy it. For my sample project I was able to leave everything as is. 

 

Deploy and verify

The next page it will show a preview everything thus far. If everything looks good, hit Deploy! It will take you to a dashboard area for the project you just deployed and show you its status. 

Site status dashboard

Eventually each step should change to a green check icon at which point you should have a live website! You can test it out by clicking on the blue https://master….amplifyapp.com link shown. This URL will be unique to your application. 

ADd a custom domain

Once you’ve deployed your first site, the Amplify Console will show you a list of additional actions you can take. Click on the one that says “Add a custom domain with a free SSL certificate.” 

Additional steps

You will be directed to a domain management area. Click on Add Domain. 

Enter the domain you want to map your website to. The settings shown below apply for cases where you would be mapping a root domain to your website. If you want to map a subdomain rather than the root domain you would exclude the root and uncheck the redirect option. 

Add domain

VERIFY DOMAIN AND setup SSL certificate

Once you add a domain/subdomain, you will be asked to add the CNAME record provided to verify domain ownership. If your domain is managed in AWS Route53, Amplify will automatically create and verify any necessary records for you. If you are managing your DNS using an external provider such as GoDaddy or Google domains, you will need to manually create a DNS record for verifying ownership, as well as a record for pointing your domain to your Amplify site. Click here for additional instructions on configuring DNS.

Domain status

The verification can take a while depending on how your DNS is setup but should eventually change to the view shown below. 

Final page

At this point you should be able to go to your domain and see a live site! (The sample website shown uses a template from startbootstrap.com

Update your CODE & ENJOY THE CONVENIENCE OF CI/CD

If you integrated your project with a Git provider, you can simply make a commit to the branch you specified earlier and your changes will automatically get deployed! If you instead uploaded your source directly, simply upload your updated source to overwrite the old version and it will also get deployed.

CONCLUSION

AWS Amplify makes it incredibly easy not only to setup and deploy a website but also to setup a custom domain and attach an SSL certificate. The integration with Git allows you to quickly create a small CI/CD pipeline so that you can update and deploy your website with very little effort in the future. 

Leave a Reply

Your email address will not be published. Required fields are marked *