Introduction

This blog will go into the art of AWS-smooth Angular application deployment. We’ll demonstrate the potential of automation by using AWS CodeBuild to build the app and AWS S3 to host it. Not only that but we’ll up your deployment game by distributing your software over AWS CloudFront. With this configuration, developers may concentrate entirely on code while the infrastructure handles deployment seamlessly. Let’s get started on this quest to make Angular app deployment on AWS easier.

Configuration steps: –

1. Setup a GitHub repository for your angular application with all the necessary files

2. Now create a S3 bucket on which the artifacts of the code will be stored after being built by the AWS Codebuild and then further get distributed via the Cloudfront URL.
3. Open Your AWS Management Console after logging into your Amazon Web Services account with your IAM user.

2. Go to the search bar and type S3. If you click on it you’ll be redirected to the S3 dashboard.

3. Click on Create bucket button. And in the general configuration, give an a unique name to your bucket and select the AWS region for your bucket which in our case will be ap-south-1 (Mumbai).

4. In the next steps keep the rest options for ACL, Block Public access as default and only enable the Bucket versioning for your bucket.

5. Keep the encryption of the object same as the bucket encryption. By default the bucket is encrypted with Amazon SSE-S3 encryption. 

6. Click on the Create bucket icon.

7. Once the bucket is created we need to enable the static web hosting. For that go to the properties of your bucket , enable the static website hosting and, add the index.html at the start and error pages.

3. Now create a Codebuild project to setup connection between our GitHub repository and Amazon S3 bucket for storing the artifacts.
4. Go to the search box of your Amazon console, type Codebuild and click on it.

2. Once clicked it will redirect you to the Codebuild dashboard. And click on Create build project. 

3. In the Project Configuration block add a name and description to your project.

4. In the Source block, select provider and authenticate, and then choose your repository in which your angular application and necessary files are present.

5. In the Primary source webhook events block, check the Rebuild everytime a code is pushed in to the repository option. Select Build type as Single Build  and Webhook event type as PUSH

6. In the Environment block, we will be defining the variables and values that our code will require and the image or OS it will use to build the application. A Codebuild service role will be created at this block in order to configure the IAM access for these operations.

7. Next is the buildspec block. In this block you have to mention a buildspec.yml file that should be created in your root repository.

8. Here is an example of the buildspec.yml file for an angular application 

version: 0.2

phases:

  install:

    runtime-versions:

      nodejs: 16

    commands:

      – echo Installing source NPM dependencies…

      – npm install -g @angular/cli@15.2.5

      – npm install

  build:

    commands:

      – echo Build started for $BUILD_ENV on `date`

      – npm run build

      – echo Build completed…

  post build:

    commands:

      – echo Pre-Build started on `date`

      – aws s3 sync ./dist s3://$BUCKET_NAME

      – echo Pre-Build completed on `date`

artifacts:

  files:

    – dist/**/*

  discard-paths: yes

9. Now in the Artifacts block, select the location and bucket where you want to store the artifacts once they are built using the Codebuild.

10. Click on Create build project.

11. Once the build project is created click on start build and observe the workings of the build process through logs and phase details.

The above image shows that the build was successful, and now the artifacts are copied to your S3 bucket.

4. Creating a Cloudfront distribution for my S3 bucket.

1. Go to the Search box on your AWS management console, type Cloudfront, and click on it it will redirect you to Cloudfront console.

2. Now click on Create a Cloudfront distribution.

3. Now in the Origin block, enter the AWS origin, which in our case will be our S3 bucket

4. Now in the Default cache behavior, select path pattern as default, compress objects as Yes, viewer protocol policy as Redirect Http to Https, allowed head for HTTP as GET HEAD, restrict viewer access as No and Cache policy as CacheOptimized

5. In the Web application firewall click on do not enable security options for now.

6. In the Settings block, select the use all edge locations option for price class for best performances, and add CNAME if an alternate domain and SSL certificate are available. HTTP/2 and HTTP/3 can both be used and now click on Create distribution.

7. It will generate an IAM policy for the bucket which can be copied to the policies.

8. Now hit the Cloudfront URL and you’ll be able to see your angular application.