Build Code Pipeline For A Static Website — Beginner Level

In this blog, we are going to build a code pipeline for a static website.

This blog is useful for developers who face issues while making changes to the website code which forces them to update on the S3 bucket and update CDN without any downtime.

To resolve the issue of downtime, we will use AWS CodePipeline which is a fully managed continuous delivery service that helps you automate your release pipelines for fast and infrastructure updates to keep consistency on the website so the customer will not face any downtime on their website and

Before starting the CodePipeline we will look into Buildspec file need to push into the CodeCommit repository

version: 0.2
phases:
  install:
    runtime-versions:
        python: 3.7
  pre_build:
    commands:
      - "echo Taking backup staging bucket"
      - "echo Bucket Name $SOURCE_BUCKET_NAME"
      - "echo Distination Bucket Name $DISTINATION_BUCKET_NAME"
      - aws s3 sync s3://$SOURCE_BUCKET_NAME s3://$DISTINATION_BUCKET_NAME/code_backup$(date +"%d-%m-%y-%T")/
  build:
    commands:
      - "echo Copying repo content to s3 bucket"
      - aws s3 sync . s3://$SOURCE_BUCKET_NAME --exclude buildspec.yaml --exclude .git/ --exclude .gitignore
  post_build:
    commands:
      - "echo Creating Invalidation"
      - "echo Invalidation Name $INVALIDATION"
      - aws cloudfront create-invalidation --distribution-id $INVALIDATION --paths "/*"

In this Buildspec file, we will take a backup of the source bucket. Then it will copy a file from the repository to the source bucket and at last, it will also update the invalidation in CloudFront

We will create a repository in AWS CodeCommit

Creating repository

Click on ‘Create’ and now you can clone this repo to your system and push the code file into the repository.

Then click Create to create Project on CodeBuild

Click on ‘Create a project’

Give a project name as ‘test-project

Create a Build Project

Select AWS CodeCommit in source provider and repo name ‘test-repo’

Add source provider

Select the o Environment on which you want to run CodeBuild

Add Environment

Click on Additional Configuration

Add these Environmental variables and pass the values in this.

SOURCE_BUCKET_NAME

DISTINATION_BUCKET_NAME

INVALIDATION

Add Environment Variables

Now we will Create CodePipeline

Goto CodePipeline give Codepipeline Name ‘static website

In service, role Select the existing role and give name ‘s3-static-website’

Create Codepipeline

Click Next Select Source Provider here we will use AWS CodeCommit

Then select repository and branch

Add Source Stage

Now select Build provider and region

Select the project which is created on Code build steps

Add Build Stage

Skip for the deploy stage and Create Codepipeline

Finally, you will get the output code pipeline is successfully created

Output