Deploy Frontend App on AWS S3 Bucket with CloudFront Distribution using CloudFormation: A Step-by-Step Guide

Welcome to the ultimate guide on deploying your frontend application (like angular, React, HTML ) on AWS S3 Bucket with CloudFront Distribution using CloudFormation. In today’s fast-paced digital world, it’s crucial to ensure your front end is hosted on a reliable and high-performance infrastructure. Amazon Web Services (AWS) offers a powerful combination of services to accomplish this, including Amazon S3 for storage, CloudFront for content delivery, and CloudFormation for infrastructure as code (IaC) deployment.

In this guide, we will take you through every step of the process, from preparing your frontend application to implementing CloudFormation templates and optimizing your setup. By the end of this guide, you’ll have a fully functional and scalable frontend app running on AWS, ready to serve your users efficiently and effectively.

Deploy Frontend App on AWS S3 Bucket with CloudFront Distribution using CloudFormation

Pre-requisites

• AWS account.
• Domain name with route 53 hosted zone.

Step 1 | Create SSL Certificate using AWS Certificate Manager (ACM)

Once you’re logged in, search for “Certificate Manager” in the AWS Management Console’s search bar and click on the “Certificate Manager” service.

In the AWS Certificate Manager dashboard, click on the Request a Certificate button to start the certificate creation process.

Select the public certificate and then add a Fully qualified domain name as your domain name. In this example, it’s resumepick.in.

Now, click on add another name to this certificate and add your domain name with www. attach to it for eg. www.resumepick.in and click on request certificate.

The certificate is created but we need to validate it. For email validation, ACM will send an email to the domain owner’s email address with instructions to approve the request. For DNS validation, you’ll need to add specific DNS records to your domain’s DNS settings.

in this demo we are going with domain validation so, click on Create records in Route 53 and it will add DNS records into your hosted zone.

Once the validation is successful, ACM will issue the certificate for the specified domain. You can now use the certificate for your AWS CloudFront.

Step 2 | Create S3 Bucket to Deploy the frontend app

Log in to the AWS Management Console, navigate to Amazon S3, and create a new S3 bucket.

2.1 Create the Root Bucket:

• Log in to the AWS Management Console and navigate to the Amazon S3 service.
• Click on the Create Bucket button to start creating a new bucket.
• Enter a unique name for your root bucket. The name should be globally unique across all AWS S3 buckets.
• Choose the appropriate region for your bucket. This region will determine the geographical location of your bucket’s data.
• Leave the other settings as default or configure them based on your requirements.
• Click “Create bucket” to create the root bucket.

2.2 Configure the Root Bucket for Website Hosting:

• After creating the root bucket, select it from the list of buckets in the S3 dashboard.
• Open the Properties tab and Select Static website hosting.
• Choose the Use this bucket to host a website option.
• For the Index document, enter the filename of your main HTML file (e.g., “index.html”).
• Optionally, you can specify an Error document for handling 404 errors.
• Click Save Changes to enable website hosting for the root bucket.

2.3 Create the www Bucket:

• Repeat the process of creating a new bucket as you did for the root bucket.
• This time, name the bucket with www.yourdomain.com (eg. www.resumepick.in ).
• Choose the same region as the root bucket for consistency.

2.4 Configure the www Bucket for Website Redirection:

• After creating the www bucket, select it from the list of buckets in the S3 dashboard.
• Open the Properties tab and Select Static website hosting.
• Choose the Redirect requests option.
• In the Target bucket or domain field, enter the endpoint URL of your root bucket’s static website hosting.
• Click Save Changes to enable website redirection for the www bucket.

Step 3 | Create Cloudfront Distribution

Let’s break down the key components of the template:

• Aliases: Specifies the domain names associated with the CloudFront distribution. In this case, “resumepick.in” and “www.resumepick.in” are the aliases.
• Comment: A descriptive comment for the CloudFront distribution.
• Enabled: Indicates whether the CloudFront distribution is enabled (true) or disabled (false).
• HttpVersion: Specifies the supported HTTP versions for the distribution. “http2and3” enables support for HTTP/2 and HTTP/3.
• DefaultRootObject: The default object that CloudFront returns when the user requests the root URL (“/”) of the distribution. In this case, “index.html” is set as the default root object.
• Origins: Specifies the origin for the distribution, which is an S3 bucket in this case. The !GetAtt RootBucket.DomainName references the domain name of the S3 bucket.
• DefaultCacheBehavior: Configures the default cache behavior for the distribution. It specifies how CloudFront handles caching, query strings, and cookies.
• ViewerProtocolPolicy: Specifies the security policy for user connections. “redirect-to-https” ensures that users are redirected to use HTTPS.
• ViewerCertificate: Configures the SSL/TLS certificate for secure connections. The AcmCertificateArn references the ARN (Amazon Resource Name) of the ACM certificate, and SslSupportMethod sets the SSL support method to “sni-only”.
• CustomErrorResponses: Allows custom error responses to be defined for specific HTTP error codes. In this template, when a 403 (Forbidden) error occurs, CloudFront will respond with a 200 (OK) response and serve the “index.html” page.

Step 1 | Understanding the AWS CloudFormation

AWSTemplateFormatVersion: "2010-09-09"
Description: |
  - Create CloudFront Distribution
  - S3 Bucket for www.
  - Create Root S3 Bucket
  - Create Bucket Policy
Parameters:
  CertificateArn:
    Type: String
  WwwBucketName:
    Type: String
  RootBucketName:
    Type: String
  
Resources:
  RootBucketPolicy:
    # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-s3-bucket.html
    Type: AWS::S3::BucketPolicy
    Properties:
      Bucket: !Ref RootBucket
      PolicyDocument:
        Statement:
          - Action:
              - 's3:GetObject'
            Effect: Allow
            Resource: !Sub 'arn:aws:s3:::${RootBucket}/*'
            Principal: '*'
  WWWBucket:
    # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-s3-bucket.html
    Type: AWS::S3::Bucket
    Properties:
      BucketName: !Ref WwwBucketName
      WebsiteConfiguration:
        RedirectAllRequestsTo:
          HostName: !Ref RootBucketName
  RootBucket:
    # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-s3-bucket.html
    Type: AWS::S3::Bucket
    #DeletionPolicy: Retain
    Properties:
      BucketName: !Ref RootBucketName
      PublicAccessBlockConfiguration:
        BlockPublicPolicy: false
      WebsiteConfiguration:
        IndexDocument: index.html
        ErrorDocument: error.html
  RootBucketDomain:
    # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-route53-recordset.html
    Type: AWS::Route53::RecordSet
    Properties:
      HostedZoneName: !Sub ${RootBucketName}.
      Name: !Sub ${RootBucketName}.
      Type: A
      AliasTarget:
        # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-route53-aliastarget.html#cfn-route53-aliastarget-hostedzoneid
        # Specify Z2FDTNDATAQYW2. This is always the hosted zone ID when you create an alias record that routes traffic to a CloudFront distribution.
        DNSName: !GetAtt Distribution.DomainName
        HostedZoneId: Z2FDTNDATAQYW2
  WwwBucketDomain:
    # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-route53-recordset.html
    Type: AWS::Route53::RecordSet
    Properties:
      HostedZoneName: !Sub ${RootBucketName}.
      Name: !Sub ${WwwBucketName}.
      Type: A
      AliasTarget:
        DNSName: !GetAtt Distribution.DomainName
        # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-route53-aliastarget.html#cfn-route53-aliastarget-hostedzoneid
        # Specify Z2FDTNDATAQYW2. This is always the hosted zone ID when you create an alias record that routes traffic to a CloudFront distribution.
        HostedZoneId: Z2FDTNDATAQYW2
  Distribution:
    # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-resource-cloudfront-distribution.html
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Aliases:
          - resumepick.in
          - www.resumepick.in
        Comment: Frontend Angular app
        Enabled: true
        HttpVersion: http2and3 
        DefaultRootObject: index.html
        Origins:
          - DomainName: !GetAtt RootBucket.DomainName
            Id: RootBucketOrigin
            S3OriginConfig: {}
        DefaultCacheBehavior:
          TargetOriginId: RootBucketOrigin
          ForwardedValues:
            QueryString: false
            Cookies:
              Forward: none
          ViewerProtocolPolicy: redirect-to-https
        ViewerCertificate:
          AcmCertificateArn: !Ref CertificateArn
          SslSupportMethod: sni-only
        CustomErrorResponses:
          - ErrorCode: 403
            ResponseCode: 200
            ResponsePagePath: /index.html