Skip to content

Set up CloudFront deploy workflow

This guide shows how to set up automated deployment of static sites to S3 and CloudFront using GitHub Actions.

Reference implementation

See how CloudFront deploy workflow is configured in golden-path-docs.

Things to consider

This workflow relies on the IAM role created by the CloudFront static website template with IamForCicd.Enable set to true.

The workflow uses Docker to build your static site and requires a Dockerfile that produces built files in a specific location within the container.

Before you begin

  • You have set up a CloudFront static website using the CloudFront static website template
  • You have enabled IamForCicd and run the set_github_secrets.sh script to configure GitHub secrets
  • Your application repository has a Dockerfile that builds your static site

Step 1: Create GitHub Actions configuration

Navigate to your application repository

repo-app/
cd repo-app/

Create the GitHub Actions configuration directories

repo-app/
mkdir -p .github/workflows/_config/dev

Create a common configuration file

repo-app/.github/workflows/_config/dev/common-config.yml
AccountId: "1234567890"
Region: "eu-west-1"
Team: "pirates"
Environment: "pirates-dev"

Create a packages.yml file

repo-app/.github/workflows/_config/dev/packages.yml
DefaultPackagePathPrefix: "boilerplate/github-actions"

Step 2: Add the package

Add the CloudFront deploy package

repo-app/.github/workflows/_config/dev/
ok pkg add cloudfront-deploy

Create package configuration:

repo-app/.github/workflows/_config/dev/cloudfront-deploy.yml
Name: "monkey"
Environment: "pirates-dev"
DockerContext: "."
DockerfilePath: "Dockerfile"
ContainerSitePath: "/static-website" # (1)!
  1. Path inside the Docker container where the built static files are located.
Example Dockerfile where ContainerSitePath is /static-website 
FROM busybox AS build

RUN mkdir -p /static-website && echo "Hello world!" > /static-website/index.html

Warning

The stage must be named build.

Install the package to generate the workflow file:

repo-app/.github/workflows/_config/dev/
ok pkg install

Step 3: Verify

Check that the workflow file was created

repo-app/
ls .github/workflows/

You should see a file named _gp_monkey_pirates-dev_cloudfront_deploy.yml.

Check that the secrets exist:

gh secret list --env pirates-dev-monkey

You should see these secrets:

  • AWS_ROLE_ARN
  • S3_BUCKET_NAME
  • CLOUDFRONT_DISTRIBUTION_ID

Push your changes to trigger the workflow

repo-app/
git add .github/
git commit -m "ci: add CloudFront deploy workflow"
git push

The workflow will:

  • Build your static site using Docker
  • Extract the built files from the container
  • Sync files to your S3 bucket
  • Create CloudFront cache invalidations

Next step

Your static site will now be automatically deployed when you push changes to your repository. Monitor the Actions tab in GitHub to see the deployment progress.