There are tons of easy ways to deploy SPA: skotty, surge, GitHub pages. But mostly all of them provide just a little abstraction around IAAS such as AWS. In this article, you will see how is easy to deploy the website on AWS with the help of Terraform.
Our goal is to make your website accessible by a specific domain(in my case it is the website at geekrodion.com).
There are a lot of frameworks to make SPA. I decided to use create-react-app to bootstrap my website. After running npm build I have ready to deploy folder.
When you have your website in place — it is time to buy a domain. It is not so expensive — I bought a nice geekrodion.com domain for 12$ at AWS. You can purchase a domain from other providers, though I suggest using AWS since it domain hosted zone and records will be easier to connect with other AWS services.
Describing infrastructure as a code
Now you can create a directory and put there three files. The first one with variables(vars.tf), the second one with the code(main.tf) and the third one with outputs(outputs.tf).
We need only two variables — the name of your domain on AWS and optional name of the S3 bucket.
File with the code will describe AWS services to create:
- route zone of your domain
- Certificate for your domain so that your site will be accessible with secure https protocol
- S3 bucket for your website files
- CloudFront distribution so that your site will be served on CDN and will be fast to reach around the world
- hosted zone records for CloudFront and validation that you own domain and can obtain the certificate from AWS.
After the creation of infrastructure, we need only one variable to know — distribution_id. This variable will be used in the deployment script.
As you can see, there are no credentials in terraform code. It is because we will specify them in environment variables.
$ export AWS_ACCESS_KEY_ID=<YOUR_AWS_ACCESS_KEY_ID>
$ export AWS_DEFAULT_REGION=<YOUR_AWS_DEFAULT_REGION>
$ export AWS_SECRET_ACCESS_KEY=<YOUR_AWS_SECRET_ACCESS_KEY>
Next, we want to init our terraforms and import hosted zone. Since when you bought your domain hosted zone was created by AWS. Therefore you should go to the AWS page with hosted zones and get hosted_zone_id.
Now, you ready to create infrastructure!
$ terraform init
$ terraform import aws_route53_zone.route_zone <YOUR_ROUTE_ZONE_ID>
$ terraform apply
When the last command executed — you will see in terminal one output variable — distribution_id. This variable will be used when you want to update your website.
Deployment script is simple.
You only need to specify two variables for deployment — the name of the S3 bucket(look at vars.tf) and distribution id(look at terminal output).
In this article, we learn how to deploy SPA to AWS with the help of Terraform. All the code for this example you can find in the repository.
In the next part we will create CodePipeline that will update our website each time we make a commit in the specific branch. Stay tuned!
Check out my in-depth course about this topic on Udemy.
Reach the next level of focus and productivity with increaser.org.