Introduction:

In today’s fast-paced development world, automation plays a crucial role in streamlining workflows and ensuring efficient deployment processes. When it comes to frontend development, automating the deployment process can save time and effort while reducing the chances of errors. AWS CodePipeline, a fully managed continuous delivery service, provides a seamless way to automate frontend deployment processes. In this blog post, we will explore how to automate frontend deployment using AWS CodePipeline.

Now that you have created your frontend deployment it’s time to showcase it to the entire world using AWS Cloud Service Provider along with Pipeline to automate the deployment process.

This blog is divided into 2 sections.

1. Static Frontend Web Hosting
2. Automate Application Deployment

Prerequisites:

1. Angular Application
2. An Active AWS Account

Architecture:

Services used:

1. Amazon S3
2. CloudFront
3. IAM
4. CodeCommit
5. CodePipeline
6. CodeDeploy

Static Frontend Web Hosting:

To begin with this section, we wil first need to build our Fronend Application to compile our application and create build files to host them on AWS S3.

npm run build

Now that you have your build files ready, let’s create a S3 bucket.

Go to AWS management console search for s3 and click create bucket. Enter unique name for your bucket within your required region.

Under the Block Public Access settings for this bucket, uncheck the checkbox for block all public access as we will be hosting our frontend files which will be accessible by public.

Leave all the options as default and click create. Once the bucket is created we now have to update the bucket policy, enable static web hosting and upload buiild files.

Click on the created bucket, navigate to properties section and Scroll down to the static website hosting. You can notice that static website hosting is currently disabled.

Click on edit and enable the static website hosting. For hosting type select “Host a static website” , set index document type “index.html” and click Save Changes.

Next navigate to the permissions section and edit the bucket policy to serve the content.

{
    "Version": "2012-10-17",
    "Id": "Policy1688990777797",
    "Statement": [
        {
            "Sid": "Stmt1688990776020",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "YOUR_BUCKET_ARN/*"
        }
    ]
}

Now you made changes in your bucket policy you should see “Publicly accessible” option next to you bucket name.

We have done all the things and it’s time to upload our build files to S3 bucket. Navigate to objects, click upload and Upload files.

Once files are uploaded, check everything is working fine by getting the Bucket website endpoint from properties section.

In case you are facing any error verify all the steps mentioned above are performed correctly or not.

Next we will use cloudfront to create distribution for caching and serving the content globally.

Go to cloudfront and create new distribution with the given values.

1. Origin domain: Select your S3 bucket
2. Origin Access
3. Cache Policy: Caching Optimized
4. Web Application Firewall: Do not enable security protections

Leave rest of the options as default and click create.

This might take 5–10 minutes to setup cloudfront distribution for you. Once the status shows “Enabled” get the domain name of your distribution and check your application.

Congratulations 🎉you have successfully hosted your static web application on AWS Cloud using S3 bucket and Cloudfront Content Delivery Network.

Automate Application Deployment

Now that we have deployed our application successfully it’s time to automate the deployment and reflect the changes in real time as and when any new code is pushed into our code repository.

Here I will be using AWS CodeCommit which is a fully managed source control service provided by AWS. You can use any github or any other source control service.

In AWS Management Console, search for CodePipeline and Click “Create Pipeline”. Give name to your pipeline, select “New service role” and click next.

Next we have to mention our source code provider along with the repository name and the branch from which we need to deploy our code.

After setting up the source stage we will now setup build stage.

Select Codebuild for build provider with your specified region. Next we have to create new project for our build so click on “Create Project” and will open new tab. Create build project with the given options

1. Project name: Give name for your project
2. Environment Image: Managed Image
3. Operating System: Amazon Linux 2
4. Runtime: Standard
5. Image: aws/codebuild/amazonlinux2-aarch64-standard:2.0
6. Service Role: Create new service role
7. Logs: Check the cloudwatch logs

Under buildspec select “insert build commands” and switch to editor mode to paste the following lines. Codebuild will be using this buildspec file to build our project.

version: 0.2
env:
  variables:
    APP_NAME: "hello-world"
phases:
  install:
    runtime-versions:
        nodejs: 16
    commands:
      - echo install process started
      - ls
      - npm install && npm install -g @angular/cli
  build:
    commands:
      - echo build process started now
      - ng build
      - ls
  post_build:
    commands:
      - echo build process finished, we should uplload to S3 now
      - cd dist/$APP_NAME
      - ls -la
      - aws s3 sync . s3://YOUR_BUCKET NAME --delete

In this file we have set the version, environment variables and different phases for our build stage. I have mentioned the APP_NAME in environment variables 3 stages in phases. During install phase, we will set the runtime version for nodejs and during build and post_build we are performing commands to build and upload the content to S3 bucket.

After setting up everything click on “Continue to CodePipeline” and you can now see your project in build stage.

Click on next and we will skip the deploy stage as it is already deployed during post_build phase using aws s3 sync command. Review the pipeline and click Create.

Now our pipeline is ready but still Codebuild role does not have permission to upload build files to S3 so head over to IAM Roles and search for your Codebuild role and add policy for S3 bucket.

Congratulations 🎊 our pipeline is now completely setup. Go ahead and push some changes in your code repository to verify your Pipeline is workng fine or not.

Now our pipeline is working fine but stil you will notice our CDN domain is not updated because of cache so navigate to your created cloudfont distribution > Invalidatons > Create Invalidation. Enter “/*” and click create.

Okay so now chcck again your CDN domain and it should reflect the changes.

Conclusion:

I hope you are now familiar with how to perform static frontend web hosting on AWS Cloud and automating the deployment process using AWS CodePipeline.