haven't seen it you can find it here. Going a Step further we can do some clever things with this rather cheap concept. For example, why don't we upgrade this setup to add some more complex logic and turn it into a Web Application?
To accomplish this, let's look at some Javascript frameworks. We sadly need to use Javascript as S3 has no server side processing capabilities, in the future we will look at how we can accomplish tasks that require this but for now, let's built a WebApp with Angular, (not to be confused with AngularJS which uses much older concepts and beyond he scope of this post).
Deploying an Angular application to Amazon Web Services (AWS) can be a great way to scale and distribute your app to a global audience. In this blog post, we'll walk through the process of deploying an Angular application to AWS S3 with CloudFront and Route53 using Terraform.
Things we will need!
Before getting started, it's important to make sure that you have the following prerequisites:
- An AWS account
- A running Angular application (or you can use ng new <APP NAME> to get you started)
- Terraform installed on your local machine
- AWS CLI installed on your local machine
- AWS Access and Secret key
- Basic knowledge of Angular and AWS services
Create a CloudFront Distribution
You should have already created the S3 bucket in the previous post so, the next step is to create a CloudFront distribution to handle the distribution of your app's files to users. CloudFront is a content delivery network (CDN) that can be used to distribute your app's files to a global audience.
resource "aws_cloudfront_distribution" "distribution_name" {
origin {
domain_name = aws_s3_bucket.bucket_name.bucket
origin_id = "S3-${aws_s3_bucket.bucket_name.bucket}"
}
enabled = true
default_cache_behavior {
allowed_methods = ["GET", "HEAD"]
cached_methods = ["GET", "HEAD"]
target_origin_id = "S3-${aws_s3_bucket.bucket_name.bucket}"
forwarded_values {
query_string = false
}
}
}
Adding a DNS with Route53
The next step in deploying your Angular application to AWS is to create a Route53 record to handle the routing of traffic to your app. Route53 is a scalable and highly available Domain Name System (DNS) service that can be used to route traffic to your app.
resource "aws_route53_record" "route53_record" {
zone_id = "your-route53-zone-id"
name = "your-domain-name"
type = "A"
alias {
name = aws_cloudfront_distribution.distribution_name.domain_name
zone_id = aws_cloudfront_distribution.distribution_name.hosted_zone_id
evaluate_target_health = true
}
}
Build and Deploy the Application
Now that all the necessary resources are created for our Angular application, we can build and deploy the application on the S3 bucket.
To build the application you can use the command:
npm run build --prod
Then you can use the AWS CLI command to sync the built files into your S3 Bucket:
aws s3 sync build/ s3://your-bucket-name/
Deploy the Terraform Configuration
Once the application is built, you can deploy the Terraform configuration to create and configure the necessary resources for your Angular application on AWS.
$ terraform init$ terraform apply
The terraform init command is used to initialise the Terraform configuration, while the terraform apply command is used to create and configure the resources defined in the configuration.
Verify the Deployment
To verify that your Angular application has been deployed correctly, you can visit the URL of your application in a web browser. This URL can be found in the AWS S3 console or in the Route53 record created earlier.
You can also check the CloudFront distribution status by visiting the CloudFront Management Console, ensuring the status is "Deployed".
Maintenance and Updating
In order to update the Angular application, you will have to rebuild the application and sync the new build with the S3 bucket. Then, you will have to run the terraform apply command to update the Cloudfront distribution.
It's also important to keep an eye on the costs associated with your AWS resources. You can use the AWS Cost Explorer to view and manage your AWS costs.
Wrap Up!
As you can see, deploying an Angular application to AWS S3 with CloudFront and Route53 can be a great way to scale and distribute your app to a global audience. By using Terraform, you can automate the process of creating and configuring the necessary resources, making the deployment process faster and more efficient. Remember to keep an eye on costs and always verify the application is deployed correctly.