The third challenge involves integrating a React frontend with the backend of challenge2, employing AWS services, Terraform for infrastructure management, and GitHub Actions for automated deployment. To solve it, new terraform files are added and two new pipelines are created (react-frontend-code-deploy pipeline and frontend-aws-deploy pipeline)
-
Clone the repo of challenge 3
-
Create an S3 bucket for the terraform remote backend and update the name of the bucket in "backend-terraform-config.tf" and "frontend-terraform-config.tf"
-
Create a versioned S3 bucket for uploading zipped Lambda file
-
Update the bucket name and object key in "lambda.tf" and aws-bucket in the step "Upload to S3" in "lambda-code-upload.yaml" by the bucket created in step 3
-
Set your AWS credentials (access key and secret access key) as environment secrets in your github repo with the names "AWS_ACCESS_KEY_ID" and "AWS_SECRET_ACCESS_KEY"
-
Run "lambda-code-upload pipeline" - verify that you have a zipped file in the bucket that you created in step 3
-
After a successful run of the "lambda-code-upload pipeline", the "backend-AWS-deploy pipeline" TTS will be triggered automatically to deploy the TTS Converter App backend Infra. However, the deployment of resources requires manual triggering by selecting the "Apply" input option in the TTS Converter App backend Infra pipeline.
-
Verify that the backend is running correctly in AWS. You can ensure it by running a curl query using the invokeURL of the API Gateway stage, which you can obtain from the output of the Terraform code or directly from the AWS Management Console (you can use the example in this link)
-
Set your domain name, S3 frontend bucket name and api gateway invoke URL created in step 7 as secrets in your github repo with the names "DOMAIN_NAME", "S3_FRONTEND_BUCKET" and "API_GATEWAY_INVOKE_URL"
-
Trigger "frontend-AWS-deploy pipeline" to create the TTS converter frontend AWS resources.
-
Set your cloudfront distribution id created in step 10 (output) as secrets in your github repo with the name CLOUDFRONT_DISTRIBUTION_ID
-
Trigger "react-frontend-code-deploy" pipeline
-
Open your web browser and navigate to your domain using HTTPS like https://yourdomain.com. If everything is fine, you will receive a result like this:
You can find more details here
Note: After completing testing, remember to select the "Destroy" option in the TTS Converter App Infra pipelines to tear down the resources and prevent unexpected charges from AWS at the end of the month 😉