Build S3 Website

 

In this post we will review the steps to setup an AWS S3 based website.

First, let use a CloudFormation stack to setup the S3 bucket and configure it to have a public read access control.

Resources:
  s3AgentSite:
    Type: AWS::S3::Bucket
    Properties:
      AccessControl: PublicRead
      BucketName: my-bucket-site-example
      WebsiteConfiguration:
        IndexDocument: index.html

Next, we can create a CodeBuild project to build our code. See my previous post about the setup of a CodeBuild project using CloudFormation. Notice that the CodeBuild project also requires permissions to update the S3 bucket, hence the CodeBuild stack should also include the following permissions:

- Effect: Allow
  Action:
    - s3:*
  Resource:
    - arn:aws:s3:::my-bucket-site-example/*

Now, let's handle the build itself. The buildspec.yaml specifies requirements to include nodejs as part of the build container.

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: latest
  build:
    commands:
      - ./build.sh

And the build script run the npm build, and then copies the results to the S3 bucket using aws sync CLI.

npm i
npm run build
aws s3 sync --acl public-read ./public s3://cto-c3-agent