使用 Terraform 部署 AWS Amplify React 项目_AI阅读总结 — 包阅AI

Recently, I received a question from a software engineer that I was determined to help solve:

I would like to deploy my AWS Amplify React project using Terraform so that I can automate my workflow and eliminate any manual intervention during deployment.

AWS Amplify can help you build and deploy full-stack applications with ease, while Terraform allows you to define your infrastructure configurations in code using a declarative configuration language.

Terraform enables you to automate the provision and management of your AWS Amplify resources. Once you’ve defined your changes in the declarative configuration language, Terraform will apply the changes automatically, reducing any manual or human intervention.

I will walk through the process I used to achieve this task using Terraform. I will assume that you already have an understanding of using Terraform and AWS.

If you are new to Terraform, Amplify and AWS, there are many valuable resources to get you up to speed including Terraform: Beyond the Basics with AWS and Fullstack TypeScript: Reintroducing AWS Amplify.

Step 1

Set up your environment for running Terraform. You can use any CI/CD tool you’re comfortable running Terraform projects with, such as Jenkins, GitHub Actions, Spinnaker, CircleCI, GitLab or Makefile.

Step 2

Start the AWS command-line interface (CLI) running on your workstation so that you can authenticate with AWS.

Step 3

For this tutorial, create a React.js app using the command below. This is the code that will be deployed on AWS Amplify.

You can find the code for this tutorial on GitHub.

Step 4

Create the AWS Amplify app, the branch to deploy from and the domain on AWS with the script below. You will have to define the values for the variables in separate files called variables.tf and values.tfvars. Since enable_branch_auto_build is set to true, this script will automatically deploy the Amplify app once it detects that new code has been added to the React.js project. This means that once you push a new line of code to the main branch, it will automatically redeploy your Amplify app.

Step 5

Define the values for the variables in the variables.tf file. The file should include the following code:

Step 6

The output will be defined in the outputs.tf file and look similar to this:

These outputs, generated from the outputs.tf file, will provide you with all the necessary information on how to access your AWS Amplify app.

Step 7

Run the following command to apply your changes:

Step 8

After the terraform apply command applies your configuration changes, you can verify that your Amplify resource has been created successfully by visiting the AWS Management Console.

Check the app by looking at the URL highlighted in the screenshot above (in this example, https://main.helpfiner.click).

The screenshot below shows the AWS Amplify React.js app.

Conclusion

I hope you find this process of deploying React on AWS Amplify using Terraform useful. Check out the complete code on GitHub.

Discover more about the cloud tools and services that can help you navigate the complexities of cloud migration in Andela’s How DevOps Skills Are Evolving to Deploy Kubernetes in the Cloud.