Can We Deploy Angular 5 App In Aws S3

Angular App Deployment With AWS S3

With a plethora of deployment options, it is always hard for every web developer to choose the best environment to host the application on the server. Moreover, this decision is a core parameter for the performance of the code which took hours of dedication. Well, to address such concerns, an admired solution is to use a Cloud-Based approach.

Companies like Google, Microsoft, and Amaz o n have already launched their products in the market, which facilitate developers and organizations to use a Cloud environment with the use of Services. In this solution, we will focus on Amazon Web Services (AWS) to deploy an Angular application with a very easy approach. So let's dive into the process together and get our hands on the deployment.

We will follow the below steps to accomplish our final goal :

Create an Angular Prod Build
Configure the AWS S3
Deploy the Angular Build to AWS
Automation of Deployment

Block Diagram: Angular-AWS Deployment process

Create an Angular Prod Build

To begin with, we need to have a running and production-ready Angular project in our development machine, so that we can create a production build from it. To make this tutorial a bit easy we will create a new Angular CLI Project which will have its basic boiler-plate code and it's easy to make a production build of it.

So let us create the one with ng new <Your-app-name> with Angular CLI.

So above is the screenshot of the final project structure of an Angular project with basic boiler-plate code. Now we need to run the second command to build this project :

Execute the following command in the root folder of your project:

ng build — prod — aot

With this command, you will get a new dist folder under your project directory. This folder will be having all the bundled files which we will upload to our AWS S3 bucket. Now let us move further and create our AWS S3 Bucket.

Create and configure the AWS S3 Bucket

Firstly, we need to have an AWS account. If you do not have the one, you can create it from —
https://aws.amazon.com/ .
For the first year, there are some offers as well. You can check the same from https://aws.amazon.com/free/ .

For S3 specific we are having the following things for free :
1) 5 GB of Standard Storage
2) 20,000 Get Requests
3) 2,000 Put Requests.

Now after successful Sign-In, we will go to the S3 console to create a bucket. You can also use the link https://s3.console.aws.amazon.com/s3 to directly jump to the console interface.

In the above dashboard page, we will create a new S3 bucket. This bucket will serve as a folder where we will upload our dist folder's bundled files. Now click on the Create Bucket button to create a new bucket for our project.

A new window will be popped-up which will prompt you to configure your bucket.

In the above screen, you need to provide a unique name to the bucket. This would be considered as your domain name. If you want to have a custom domain, you can refer to the docs here: (AWS docs ).
Next, you need to provide a region to target the audience who is going to access the website. You can use any region, but choosing the nearest region will give easy and faster access to the users of the website.

Your domain name will be configured with the following pattern :
[BUCKET-NAME].s3-website.[BUCKET-ZONE].amazonaws.com

After filling the details, click on the Create button given in the bottom left of the page. As a result, you will be redirected to the console dashboard again, where your first bucket name will be showing up in the list.

Now, as your new bucket is listed, you need to configure it further to bind to your local bundled files of the project from the dist folder. To achieve this, click on the bucket name and a new window will be prompted:

Choosing Website hosting to configure our bucket

As you can see from the above screenshot, you need to click on the Properties Tab and then choose the "Static website hosting" option from the grid. The following window will be prompted for the website details:

Firstly, choose the "Use this bucket to host a website" option. Then, you need to provide the main index file name which will be served as the entry point. Also, you need to provide the error HTML file name. If you do not have the one, you can simply mention the same index file name.

Moving further, there are other options available to handle the redirect request configuration. For this article, we are not covering this. So let us save this configuration and go to the next tab for setting up the permissions :

In the above screenshot, as you see, we need to configure "Block public access" to make our website accessible publicly.

Currently, all the options are set to On. We have to change them to Off, otherwise, it will block us to apply the so-called "public" policies.

So let's select this option and then click the Edit button.

Let's uncheck all the options and save it. You will be then prompted to confirm your changes. Just type confirm in the text box and click on the confirm button.

The public setting changed confirmation box

Now, we need to provide a new bucket policy that will be used by AWS for our Website to grant permission for public access. For this, we need to click the Bucket Policy option under the Permissions Tab.

Here, we can apply the policy that will allow anonymous to access our data or in AWS language "GetObject". All the policies are in JSON format, we will use the following example provided by AWS here

          {
            "Version":"2012-10-17",
            "Statement":[
            {
            "Sid":"AddPerm",
            "Effect":"Allow",
            "Principal": "*",
            "Action":["s3:GetObject"],
            "Resource":["arn:aws:s3:::YOUR-BUCKET/*"]
            }
            ]
}

You will have to change YOUR-BUCKET to your bucket name. Paste it to the bucket policy editor and click "Save".

It's important to allow only GetObject to the users, not PUT, DELETE, etc. and it could cause security problems.

Well, we are done with the S3 setup, now we can upload the build from the previous step.

Deploy the Angular Build to AWS

To deploy the angular build we need to go to the overview tab and then click to the Upload button:

Upload bundled files from the dist folder

Browse to your Angular project directory and open the dist folder. Here you need to select all the files and as a result following window will be prompted.

You need to click on the Upload button and then you need to click the Next button to manage the public permissions to files.

Choose the "Grant public read access to this object" option and click the Next button.

Here you need to select a storage class. As we are just doing it for demonstration choose the standard option only. Now click the Next button again.

Here you will see the whole list of files we have uploaded to our S3 bucket.

Kudos!!!! We are done with the deployment of our Angular Application to AWS S3.

You can view the deployed version of your app with the following pattern:

YOUR-BUCKET-NAME.s3-website-YOUR-BUCKET-ZONE.amazonaws.com

The deployed version of Angular Application on AWS

Automation of Deployment

There are obvious changes that a developer would not want to upload the new files/changes again manually through the AWS S3 console as covered above.

To address this issue AWS has a feature of automation of deployment, every time you create a new production build. We can accomplish this task using a shell script. First of all, we need to have the AWS CLI installed in our development machine. Check this guide by Amazon for detailed information on how to do this.

To automate the deployment, we can create a simple shell script.

Create a deploy.sh file in the root project directory and add the following content:

          #!/bin/bash          ng build --prod --aot            
aws s3 cp ./dist s3://YOUR-BUCKET-NAME --recursive

It's a simple script that will build the project and then deploy the bundle from the dist folder to the S3. As I already said, you have to properly install and configure AWS CLI and of course, change the YOUR-BUCKET-NAME to your bucket name.

From now on, every time you want to deploy your app the only thing you have to do is run this script.

I hope the above tutorial will help you to deploy and host your applications easily with the AWS platform. Further, I will upload a new approach soon using the CI/CD Pipeline for Github, AWS, and Angular which would be more durable and have its benefits. Thank you :) #HappyCoding