AWS/Azure/OpenShift/Kubernetes

How to deploy an Angular App to AWS S3

Angular-1

In this article, we are going to learn how easy it is to deploy an Angular web app to AWS S3 as quickly as possible. We shall be using VS Code as our IDE for our Angular source code. This deployment is very seamless when you put the right things in place and you do the right thing. AWS (Amazon Web Services) is a complete public cloud computing platform provided by Amazon which has a mixture of infrastructure as a service (IaaS), Platform as a Service (PaaS), and Software as a Service (SaaS). This cloud solution provides you with computing, storage, networking capacity, and many other computing services you can think about.

Take a look at what we shall be covering in this article:
- We shall create a simple Angular App
- We shall configure an S3 bucket for static web hosting
- We will be deploying to AWS Cloud

The below are the Prerequisites for this short project:

  • Create an AWS Account
  • Install Angular CLI and all dependencies
  • Setup your Angular App

Creating an Angular application

It is now time to create your simple Angular project. You need to first install the latest version of Angular CLI by running this command npm install -g @angular/CLI

Angular-CLI-1
npm installation

Then run the CLI command ng new and supply the name you want to use for the app.

ng new techdirectarchive

During the creation of the Angular App you will be prompted to answer these questions:

1) Would you like to add Angular routing? Yes/No
2) Which stylesheet format would you like to use?

For this project, we are adding Angular routing and CSS format for the style sheet. The Angular CLI will install all the npm packages needed to create the Angular App.

npm2-1
Angular App Installation

After the App is created then change the directory to the app folder and run the server in the app directory.

cd techdirectarchive

ng serve
npm3-1
Angular App Installation

It is now time to serve the application on the http://localhost:4200/

image-53
Angular App Successfully setup

Now we can build the application and generate the output folder “dist\techdirectarchive” that will be needed for the deployment to AWS. The below command will generate build files and also generate the output folder that is specified inside the angular.json.

ng build –prod
image-54
Building your App

You can see the path configured under the angular.json file

Angular
Successful build of your App

After successfully building the application, dist/techdirectarchive will output the files as we have it below:

Angular1
Successful build of your App

Setting up your AWS Account

Create an account via https://portal.aws.amazon.com/billing/signup

signup
AWS Account Setup

Log in to the AWS management console: https://signin.aws.amazon.com/

login
AWS Account Setup

After you have successfully created an AWS account and logged in, then navigate to S3 under the services→storage option. The next step is to create an S3 Bucket name.

S3
S3 Account Configuration

Please note that the bucket name must be unique across all AWS account and must not contain spaces or uppercase letters.  You must enter a unique name for your bucket name and which is always displayed like this:

[BUCKET NAME HERE].s3-website.[BUCKET ZONE HERE].amazonaws.com

You may be wondering what exactly a bucket is? Buckets are containers for data stored in S3.

After you enter your desired bucket name, you then select your desired region, it is recommended that you select a region that is closer to the application user which will in effect increase the application performance.

Check the below configuration setting for our project bucket. The main setting is the bucket name and the region, you can decide to leave others on default.

image-55
Creating a Bucket

Now click on Create button to finally create our project S3 bucket. Once the bucket is successfully created, you will find the overview page like the one below.

image-56
Bucket Overview Page

Now click on your new S3 bucket and then click on the properties tab. You will see a list of properties you can work with.

But what we need right now is the “Static website hosting” property. Please go ahead and click on Edit.

image-57
Static Web Hosting

Next select Enable and define the entry page and error page for your application.

image-58
Static Web Hosting

There are two hosting type options but select the Use the bucket endpoint as the web addressoption. On this page, you will define the index and error document as index.html.

After you are done click on save changes.

image-59
Setting up your App URL

After saving the changes you will see the endpoint URL which will launch the application in the browser.

image-60
Setting up your App URL

Now click on the given endpoint URL. You will notice that the page with 403 forbidden errors will open. The singular reason for this is because all S3 bucket policies by default are private which will make the application not accessible to all the users.

image-61
403 Forbidden – AccessDenied

But what you can do is to manage the bucket policy which is under the “Bucket Policy” tab and grant public access to all the users.

First, let’s go to the Permissions tab and click on the Edit button. Here, you will see the Block public access (bucket settings) all set to ON make sure they are all set to OFF by unchecking them.

What you need to do next is to apply a policy that will grant anonymous users access to your data. You can make use of the following policy and add it under the manage bucket policy section. But make sure you change the bucket name to yours.

image-62
Setting Bucket Policy
image-63
Setting Bucket Policy
policy2
Setting Bucket Policy

Time to the Angular Project to AWS S3

You can now copy the angular build on your local system Angular App dist/techdirectarchive path and upload it in S3.

image-65
Angular Files Upload
image-66
Angular Files Upload
image-67
Angular files Uploading Status
image-68
Files Uploaded
image-69
Bucket Objects Overview

Once all the files have been uploaded successfully you can then navigate to the S3 endpoint URL to confirm if the application will display on the browser via the AWS platform to show it up and running.

image-70
Finally, your App is on AWS S3!!!

Congratulations your Angular App has been deployed successfully to AWS S3.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x