Host a website on AWS in 10 mins - AWS Amplify Tutorial
Until not too long ago, the way to setup a static website on AWS was to configure an S3 bucket for static website hosting, setup cloudfront and Route53/DNS. Now, with the AWS Amplify console, everything can be setup in one place, making it by far the best way to setup a static site on AWS.
Using the AWS Amplify console, I deployed a test website, attached a custom domain, added an SSL certificate, and hooked it up to a CI/CD pipeline all in under 10 minutes! In this tutorial, I will show you step by step how you can do the same.
Some of the highlights of things you can do with the AWS Amplify Console:
- Integrate with a Git platform (Github, Bitbucket, etc) or simply upload your code to the console
- Attach a custom domain to your website
- Make your site HTTPS by adding a free SSL certificate managed right 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
Sign in to AWS then head over to the Amplify console . Click on the Get Started button under the Deploy section.
(Shortcut: Click here to go straight to the next screen)
Choose how you want to setup your source
You have the option to upload a zip of your source code directly or to integrate with a Git provider. For this demo I will use Github to show how the integration process works.
Github will ask you to allow AWS Amplify to access your repositories. If you are not logged in to your Github account you will be asked to do so.
Once authorization is complete, select the repository you want to connect as well as the specific branch you want it to use.
Configure Build Settings
Next, give your app a 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 shows a preview of everything so far. If all looks good, click Deploy. You will be directed to a dashboard area where you can see the status of the project you just deployed.
Eventually each step should turn green. You can check out your site by clicking on the link displayed on the left (e.g https:/….amplifyapp.com). This URL will be unique to your application and can be used to view your site until you attach a custom domain.
This is a screenshot of the test site, accessed using the unique link provided by the Amplify console. (My test site shown above uses a template from startbootstrap.com)
Add a custom domain
Once you’ve deployed your first site, the Amplify Console will display a list of additional actions you can take. Click on the one that says “Add a custom domain with a free SSL certificate.”
You will be directed to a domain management area. Click on Add Domain.
Enter the domain name 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.
VERIFY DOMAIN AND setup SSL certificate
Once you add a domain/subdomain, you will be asked to add the CNAME record provided to verify that you own the domain you entered. 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.
Depending on how your DNS is setup, verification may take a while but should eventually update and take you to the view shown below.
At this point you should be able to type in your domain name in the browser and see your site live! One of the benefits of using AWS Amplify to setup your website is that it uses Cloudfront under the hood (Amazon’s Content Delivery Network) which ensures that your website is globally available.
Update your code & enjoy automatic deployment
AWS Amplify provides a simple CI/CD workflow that makes future updates a breeze! 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 AWS Amplify will also deploy it for you.
Conclusion
AWS Amplify makes it incredibly easy not only to deploy and host a website but also to setup a custom domain and attach an SSL certificate right from one central place. The integration with Git allows you to quickly setup a simple CI/CD pipeline so that you can update and automatically deploy your website with very little effort in the future.