Đang học cách How to deploy an Angular App to AWS S3

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.

>> Kết hợp Angular 12 và Firebase qua một ví dụ 11 easy steps

>> Cấu trúc Angular Apps các thành phần Angular trong năm 2021

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

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:

Would you like to add Angular routing? Yes/No
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.

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

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

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

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

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

Setting up your AWS Account

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

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

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.

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.

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.

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.

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

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

After you are done click on save changes.

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

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.

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.

Here

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPermission",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "S3:GetObject",
            "Resource": "arn:aws:s3:::tommy-thuy/*"
        }
    ]
}

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.

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.