Deploy Static Website to Amazon S3 from Github Repository

  • Github Repository
  • Github Webhook
  • AWS S3 Bucket
  • AWS CloudFront
  • AWS CodeBuild
  • (optional) Custom Domain

Step 01: Setup Project Repository

git clone https://github.com/aashari/webpack-starter-basic.git
npm install
npm start
npm run build

Step 02: Setup S3 Bucket

  • Bucket name: mq-my-static-bucket
  • Region: Asia Pacific (Singapore)
my@machine:~/webpack-starter-basic$ aws s3 sync dist s3://mq-my-static-bucket --delete

Step 03: Setup CloudFront

  • Go to the CloudFront service console
  • Click Create Distribution
  • Click Get Started on the Web section
  • Origin Domain Name: select our bucket generated public domain, in this case (mq-my-static-bucket.s3.amazonaws.com)
  • Origin Path: leave this blank
  • Origin ID: by default, this field will be auto-generated by CloudFront, you can custom it as you want
  • Restrict Bucket Access: yes
  • Origin Access Identity: Create a New Identity
  • Comment: mq-my-static-bucket-cloudfront
  • Grant Read Permissions on Bucket: Yes, Update Bucket Policy
  • Default Root Object: index.html
  • Leave the rest filled default value
  • Click Create Distribution

Step 04: Setup CodeBuild and Webhook

  • Go to CodeBuild console panel
  • Click Create build project
  • Project name: mq-static-website-builder
  • Source provider: Github
  • Select Connect using OAuth
  • Click Connect to Github
  • Click Repository in my Github account
  • Select your project (in my case: aashari/webpack-starter-basic)
  • Click Additional configuration
  • Click Rebuild every time a code change is pushed to this repository
  • Branch filter: master (we only want to deploy master branch)
  • Environment image: Managed image
  • Operating system: Ubuntu
  • Runtime: Node.JS
  • Runtime version: select latest node js version
  • Image version: Always use the latest image for this runtime version
  • Service role: New service role
  • Role name: codebuild-mq-static-website-builder-service-role
  • Leave all rest field filled by a default value
  • Click Create build project
  • Create a new file inside the root directory of your project named buildspect.yml
version: 0.1phases:
install:
commands:
- npm install
- npm run build
- aws s3 sync dist s3://mq-my-static-bucket --delete
  • Whenever you git add buildspect.yml and push it into the master branch, CodeBuild will start building the project
  • You will get this error when building the project
[Container] 2019/01/13 16:44:49 Running command aws s3 sync dist s3://mq-my-static-bucket --deletefatal error: An error occurred (AccessDenied) when calling the ListObjectsV2 operation: Access Denied[Container] 2019/01/13 16:44:54 Command did not exit successfully aws s3 sync dist s3://mq-my-static-bucket --delete exit status 1[Container] 2019/01/13 16:44:54 Phase complete: INSTALL Success: false[Container] 2019/01/13 16:44:54 Phase context status code: COMMAND_EXECUTION_ERROR Message: Error while executing command: aws s3 sync dist s3://mq-my-static-bucket --delete. Reason: exit status 1
  • That is because CodeBuild does not have S3 permission
  • Add S3 full access permission to role codebuild-mq-static-website-builder-service-role by accessing IAM Console panel
  • On the left bar, select Roles
  • Select role name (in my case: codebuild-mq-static-website-builder-service-role)
  • Click Attach policies
  • Click AmazonS3FullAccess
  • Click Attach policy
  • Back to CodeBuild Console Panel
  • Click Retry build to start rebuilding the project
  • Wait until build finished successfully
  • Your latest dist file generated from your latest code on Github are successfully uploaded into your S3 Bucket at this moment.
  • You can now update your code and deploy it automatically into your S3 Bucket just by push your code into your master branch project.

Step 05: Setup Custom Domain to CloudFront

  • Go to CloudFront Console Panel
  • Click on ID link of your Distribution
  • On General tab, select Edit
  • Alternate Domain Names (CNAMEs)
aashari.id
www.aashari.id
  • You need to point your root domain and www domain to your CloudFront Domain Name using CNAME
aashari.id       CNAME   djzq966zxhswx.cloudfront.net
www.aashari.id CNAME djzq966zxhswx.cloudfront.net
CloudFront redirect www to non-www
CloudFront static website force www

If this post was helpful, please click the clap 👏 button below a few times to show your support for the author! ⬇

I am a Software and Cloud Infrastructure Engineer living in Jakarta. I spend a lot of my time with code, paper works, movies, and coffee.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Makers Week Five: Javascript, We Meet Again!

Articulation points in a graph

Undirected graph

Infrastructure as code in DevOps life

Starshell Testnet Guide

A Scrum team journey (at the countryside)

Blockchain implemented in Javascript tested using Postman and Jest Testing Framework

Algoscan — an Algorand Blockchain Explorer

Algoscan Banner

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andi Ashari

Andi Ashari

I am a Software and Cloud Infrastructure Engineer living in Jakarta. I spend a lot of my time with code, paper works, movies, and coffee.

More from Medium

Github Actions + Slack : Automated Slack Notifications using Github Actions

How to setup self hosted ⚡ Supabase on AWS EC2?

How to create your own Google Translate API ?

How to provision AWS RDS for Postgres using Crossplane