Bootstraping the easy way to deploy Static Sites on S3

This is a reference to scale DevOps Workflows to Designers and Front End Developers to prototyping, validate and deploy landing pages, React, Vue, Angular Apps.

1. Stack

Issue	Technology
Git Manager	Github
Infrastructure Provisioning	Terraform - Hashicorp IaC Multicloud Manager
Pipeline / Build Platform	CodePipeline + CodeBuild from AWS
Hosting System	Amazon S3 - Low Cost Object Storage with Website feature on AWS
Caching / CDN System	Amazon Cloudfront - AWS Global Content Delivery Network

2. Basic Architecture

3. Project Configuration

Edit the config.tf file and input the Github, Project Name, Develop and Production branches e etc.

Example:

variable "app_name" {
  description = "Website project name"
  default     = "raj-personal-site"
}

variable "aws_region" {
  description = "AWS Region for the VPC"
  default     = "us-east-1"
}

variable "git_repository_owner" {
  description = "Github Repository Owner"
  default     = "msfidelis"
}

variable "git_repository_name" {
  description = "Project name on Github"
  default     = "msfidelis.github.io"
}

variable "git_repository_branch" {
  description = "Github Project Branch"
  default     = "master"
}

# Optional
variable "git_repository_dev_branch" {
  description = "Github Project Branch"
  default     = "develop"
}

2. Edit your build specs

You can edit your build specs in modules/website/templates/buildspec.yml

version: 0.2

phases:
  pre_build:
    commands:
      - echo Deploy website
  build:
    commands:
      - echo "add your steps and scripts here"
      - rm -rf .git
      - aws s3 sync --delete . s3://${bucket_name} --cache-control max-age=3600
  post_build:
    commands:
      - echo 'Invalidating distribuition cache'
      - aws cloudfront create-invalidation --distribution-id ${distribuition_id} --paths "/*"

2. Setup Github Access Token

• Create your Github Access Token to Command Line. This link have all information about this.

• Export Github Token as an environment variable.

export GITHUB_TOKEN=YOUR_TOKEN

3. Validate and Deploy

• Initialize Terraform

terraform init

• Plan our modifications

terraform plan

• Apply the changes on AWS

terraform apply

• Go to Codepipeline Dashboard on AWS Console

• Access your S3 Bucket output