A Description of the Challenge

Build and deploy a simple static website on Netlify using Terraform while managing your Terraform state securely in Terraform Cloud. The project should be small, creative, reproducible and well-documented.

Integrating Netlify with Hashicorp Cloud Platform Terraform

I created an account on HCP and created an organisation on my account to create projects and workspaces. I installed the Terraform CLI and logged into my HCP account through it to enable me to run Terraform commands to make changes in my HCP account.

I already have a Netlify account and a GitHub account which are necessary for this exercise. I generated a Netlify personal access token and a GitHub developer token for the repository on GitHub for the configuration of the Terraform providers I used in this exercise. These tokens were stored in my workspace environment on HCP.

Setting Up the Project

The Static Website

I created a folder for the project and in a subfolder called app, I created the website locally using Vite. I created two environment variables in a git-ignored .env file in app - VITE_CONTENT and VITE_TITLE; both are strings. Both variables are to be configured via the Terraform setup when deployed and they will be used to display randomised content on the deployed website.

terraform.tf

In the root folder of the project, I created a terraform.tf file in which I set up the Terraform cloud block with my HCP account details (organisation, workspace and project names). I also set up the required providers for the project in it. I used a combination of four Terraform providers:

• hashicorp/random v3.5

• AegirHealth/netlify v0.6.12

• integrations/github v6.0

• netlify/netlify v0.2.3

I used the hashicorp/random provider to generate random strings for the Netlify project name’s suffix and the values of the environment variables.

The official Terraform Netlify provider - netlify/netlify, does not support creating projects on Netlify accounts from GitHub repositories using Terraform. To overcome the hurdle, I used AegirHealth/netlify and integrations/github together to create the project on my Netlify account via HCP Terraform, hence it is essential that the project must be hosted on GitHub first before the terraform apply command is used. AegirHealth/netlify requires the hosted repository details in one of its resource configurations.

I used netlify/netlify to set the VITE_CONTENT and VITE_TITLE environment variables on Netlify for the website.

outputs.tf

I wanted to make sure that the deployed name of the site on Netlify is what is displayed on the terminal, not the one generated from the infrastructure configuration. To achieve that, I used netlify/netlify’s data "netlify_site" block to fetch the name of the deployed site to be used in outputs.tf.

providers.tf and variables.tf

In providers.tf, I provided the necessary configuration tokens via variables from variables.tf to configure the providers. The values of these variables are stored in my HCP account workspace environment variables (remotely) and the terraform.tfvars locally.

main.tf

main.tf contains configurations for

• Generating random strings using the hashicorp/random provider

• Setting the environment variables on Netlify using netlify/netlify

• Defining or creating the site using AegirHealth/netlify and integrations/github

Deployment

Before running the Terraform CLI commands, I pushed the repository to GitHub for access by AegirHealth/netlify.

I ran the following commands in order:

• terraform init - to initialise the project and install provider dependencies

• terraform validate - to validate the configuration. I corrected errors wherever they were found

• terraform plan - to preview the changes that will be made when the infrastructure is deployed

• terraform apply - to deploy the infrastructure configuration

The Result

The screenshot below is an image of the terminal on a successful run of the terraform apply command.

You can find the GitHub repository for my solution at orimdominic/terraform-netlify-iac and the deployed website at https://ibadan-hug-nlfy-tf-vezhpa.netlify.app/

What Makes my Approach Unique?

My approach ensures that with the Terraform infrastructure configuration, you only need to

• Set your environment variables

• Push the repository to GitHub.

• Run the Terraform commands

to have your project deployed.You don’t need to create a project on Netlify first.

My approach also provides a way to configure environment variables for the project on Netlify from the Terraform infrastructure configuration. These environment variables are different and randomised for each deployment. I also display the values of the environment variables on the website.

Conclusion

You can deploy static websites to Netlify using HUG Terraform without the need of use UIs. The infrastructure is also configurable.

Give Ibadan Hashicorp User Group a follow on LinkedIn if you can, the organisers have been supportive. Also give orimdominic/terraform-netlify-iac a star if you find it useful.

You can reach out to me on LinkedIn if you have any questions or found this article useful. I’m delighted to chat with you.