CICD with AWS Amplify and CloudFront hosting

In the ever-evolving landscape of software development, the integration of Continuous Integration and Continuous Deployment (CI/CD) practices has emerged as a vital force multiplier. Automating the journey from code commits to production deployment holds the promise of heightened efficiency, minimized errors, and more frequent updates for users.

This article is your gateway to the world of CI/CD, where we explore the dynamic capabilities of AWS Amplify and CloudFront hosting. With these powerful tools, you’ll not only learn how to host your web application but also establish a robust and automated deployment pipeline.

Host your web app on AWS Amplify

STEP 1: Create a New app → Host web app

STEP 2: Choose the location of existing code

STEP 3: Choose a git repository

• Make sure you have admin access to the repository and GitHub authorization was successful.
• Choose the branch you want to deploy to Amplify
• If you want to deploy a monorepo, check the monorepo option and choose the folder
• Add the root directory to the website, Eg. packages/web

STEP 4: Add build settings

• If an “amplify.yml” file already exists in the root of your project, Amplify will auto detect it and use it for the build config.
• If not, it has to be manually added.
• Format of the amplify.yml file:

version: 1
applications:
- frontend:
phases:
preBuild:
commands:
- npm install -g yarn
- yarn
build:
commands:
- yarn build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
appRoot: packages/web

• Add any postBuild/preBuild commands if required.
• In advanced settings on the amplify portal, add any environment variables that are required.

STEP 5: Review and host

With the groundwork laid, it’s time to review and deploy your build. Address any encountered build errors with a systematic approach. This step sets the stage for scalability — additional branches can be seamlessly incorporated for the same application.

Now, we will move on to add this code to an S3 bucket and then host it through CloudFront.

Add your code to an amazon S3 bucket

STEP 1: Create an S3 bucket with Static website hosting enabled.

Transitioning from Amplify to CloudFront involves an intermediary step: hosting your code in an Amazon S3 bucket. Enable static website hosting to prepare for the upcoming connection.

STEP 2: Add a template.yml file in the root of your project for the S3 bucket.

A template file acts as your S3 bucket’s blueprint. AWS CloudFormation syntax is employed to define the properties and configurations, setting the stage for successful code storage.

AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Resources:
 BucketName:
   Type: AWS::S3::Bucket
   Properties:
     BucketName: your-bucket-name
     AccessControl: PublicRead
     WebsiteConfiguration:
       IndexDocument: index.html
       ErrorDocument: error.html
     Policy:
       Version: '2012-10-17'
       Statement:
         - Effect: Allow
           Principal: '*'
           Action:
             - s3:GetObject
           Resource:
             - !Sub 'arn:aws:s3:::${BucketName}/*'

STEP 3: Modify post-build commands

In your amplify.yml file, or the build settings in amplify, add these lines to the post-build commands.

build:
         commands:
           - yarn build
       postBuild:
         commands:
           - echo ${S3BUCKET}
           - echo $S3BUCKET
           - aws s3 sync build/ s3://$S3BUCKET/

STEP 4: Modify environment variables

In the environment variables of amplify, add the variable “S3BUCKET” and value should be your-bucket-name.

STEP 5: Redeploy the app

Once successful, The s3 bucket should contain the project files.

Note: Check if an appropriate service role is assigned to amplify under App Settings -> General so that it can access the S3 bucket.

Connect the Amplify URL to CloudFront

STEP 1: Create distribution in Cloudfront portal

• In origin domain select your S3 bucket.
• Click on “use website endpoint”
• Create distribution

STEP 2: Additional settings

• Add SSL certificate in settings : To get SSL certificate, request a certificate from Certificate Manager in AWS.
• Add alternative domain names.
• Add Origin type — “Custom Origin” if required.

STEP 3: Modify post-build commands

Add this line to your post-build commands in the Amplify.yml file, or the build settings in amplify.

       postBuild:
         commands:
           - echo ${S3BUCKET}
           - echo $S3BUCKET
           - aws s3 sync build/ s3://$S3BUCKET/
// Add this next line 
           - aws cloudfront create-invalidation --distribution-id=$CLOUDFRONT --paths '/*'

STEP 4: Add environment variable

In the Amplify project environment variables, add another variable “CLOUDFRONT” with a value containing Cloudfront Distribution ID.

STEP 5: Redeploy your project and it’s done!

With CloudFront in the mix, redeploy your project, and voilà! Your application is now hosted through CloudFront, accessible via its Distribution domain name.

Now you can map this domain name to a custom domain using any of the service providers like Netlify or GoDaddy by providing the CloudFront ARN and Distribution domain name.