Deploying Angular App to AWS S3 with CloudFront using AWS CLI

aws -10

Deploy angular website on aws using aws CLI

Introduction 🤩

In this blog, we will see how to deploy the angular app on AWS fastest way using the AWS CLI tool. As you came here. so I assume that you are aware of AWS and Angular. so without wasting time on theory let's get into action.

Let’s plan before the real action

• Create an S3 bucket
• Create and update permission of bucket and make it public
• Start static website hosting service of S3
• Create CloudFront distribution for S3 bucket
• Create an Angular project
• Upload your code and assets to S3
• Invalidate the CloudFront
• Get CloudFront URL

Its simple isn’t it? yes… let's start then

Assumption

I am assuming that you have read this blog and configure aws CLI.

[What is AWS CLI? How to use AWS CLI?
Launch EC2 instance, create EBS and attach EBS volume to EC2 instance using aws CLI.medium.com](https://medium.com/@developer.shubham.rasal/what-is-aws-cli-how-to-use-aws-cli-6f1bdedabd2b "https://medium.com/@developer.shubham.rasal/what-is-aws-cli-how-to-use-aws-cli-6f1bdedabd2b")

Action Mode 🔥

What is S3? I mean what google says...
Amazon S3 or Amazon Simple Storage Service is a service offered by Amazon Web Services that provides object storage through a web service interface.

Create an S3 bucket

bucket name should be unique in your region so try to be a little creative and give the region you want to create a bucket.

Create and update permission of bucket and make it public

• Create a policy

Create a new file and give the name s3_bucket_policy.txt and paste the below code. Don’t forget to change the bucket name in the “Resource” attribute

• Update bucket policy

Now that we have created the policy we want to update the s3 bucket policy.

Check that the file exists in the current folder otherwise provide the full path.

Start static website hosting service of S3

• Create one new file with the below code and save it with the name ‘website_configuration.txt’. Using this we want to enable and configure some setting of the S3 bucket

Update the error document and index document which you want to set..
In my case, I set index.html for both. but you may have your error page.

• Enable Static website hosting

Create CloudFront distribution for S3 bucket 🤯

Here comes the interesting part.

What is CloudFront? This is what google says…

Amazon CloudFront is a content delivery network offered by Amazon Web Services. Content delivery networks provide a globally-distributed network of proxy servers that cache content, such as web videos or other bulky media, more locally to consumers, thus improving access speed for downloading the content.

• Create a new file containing the below code and name it cf_config.json

If you want more customization aws CLI to provide skeleton you can use that.

The above will create a new file cf_config.json file with the empty skeleton. You can add the details and you are ready…
I also used this approach.

I have used the S3 bucket name in DomainName.
Custom error page if forbidden and bad request. you can add more according to your need.
To know in detail what I did aws has very well described documentation.

$ aws cloudfront create-distribution help

• Create CloudFront distribution

after successful, it will give you details about the CloudFront.

Note: If you create a file using the above command it has the “DistributionConfig” attribute and extra braces remove it and make it as the above code.
Error looks like

if you come here… you deserve a pat on the back 👏

Create an Angular project.

I assume that you have an angular project but if not let's create.

$ ng new

Create a build for deploy

$ ng build --prod

It will create build its output path. In my case dist folder in the root folder.

Upload your code and assets to S3

Time to upload code to s3 bucket. for that, we will use the s3 subcommand of AWS.
Update your folder name and bucket name in the below command.

the above command will copy all the files excluding ‘.svg’ images.
Now copy the .svg files to our S3 bucket.

You may wonder why two different commands to copy the files from the same folder .. why not use one command and copy all the files in one go... right?
If we copy all the files in one command then the .svg files do not load appears on the website. for that, we have to add a content type flag while copying SVG files.

Invalidate the CloudFront

As you know that what is CloudFront. It saves cache at edge locations. so if you are uploading files in again and again in the S3 like through CICD. you need to invalidate the CloudFront.
By Invalidating the files from edge caches. The next time a viewer requests the file, CloudFront returns to the origin to fetch the latest version of the file.

Get CloudFront URL

There are multiple ways to parse and get the output. I like to keep it simple.
for more details, you can check this article.

[Controlling command output from the AWS CLI
This topic describes the different ways to control the output from the AWS Command Line Interface (AWS CLI). The AWS…docs.aws.amazon.com](https://docs.aws.amazon.com/cli/latest/userguide/cli-usage-output.html "https://docs.aws.amazon.com/cli/latest/userguide/cli-usage-output.html")

Copy the CloudFront URL and paste it into the browser tab. let's hope for the best…..

Congratulations...😻 It is working superbly. Now you deserve a break... go and grab a cup of coffee ☕️

Next steps

• Routing traffic to an Amazon CloudFront web distribution by using your domain name.
• Implement CICD for an angular project for multiple environments.
• Update CloudFront and S3 using AWS CLI

Wrapping Up 🥳

We have successfully deployed our angular app on aws S3 with Cloudfront.
You may think that we have invested lots of time in finding the attributes and values for our needs. we can do all this in 15 mins using the management console so why use aws CLI? It is a one-time investment and it will save a lot of time when you won't do all the steps for different projects or for different configurations like dev, stag,e, and prod. Few changes can save you many minutes and avoid the human errors that we tend to do.

I would like to hear your opinion and here about how you deploy apps using aws. ️😊 If you like this blog share it with your friends and colleagues. Thank you... keep working…