Skip to content

Set up CloudFront static website

This guide shows you how to create a static website hosted on S3 with CloudFront distribution, SSL certificate, and custom domain.

Reference implementation

See how CloudFront static website is configured in pirates-iac.

Before you begin

  • Have an AWS account with networking and DNS infrastructure configured
  • Have the gh CLI installed and authenticated

Step 1: Add the package

Navigate to your infrastructure repository directory:

repo-iac/environments/dev/
cd repo-iac/environments/dev/

Add the CloudFront static website package:

repo-iac/environments/dev/
ok pkg add cloudfront-static-website web-monkey # (1)!
  1. Replace web-monkey with a stack name that fits your project.

Step 2: Configure the package

Create configuration file for your static website:

repo-iac/environments/dev/web-monkey/package-config.yml
StackName: "web-monkey"
cloudfront-static-website-data.StackName: "web-monkey-data"
Name: "monkey"
RootObject: index.html
ErrorObject: 404.html
RedirectAllToIndex: false # (1)!
AppendIndexToDirectories: false # (2)!
IamForCicd:
  Enable: true
  GitHubRepo: golden-path-docs # (3)!
cloudfront-static-website-data.AutoForwardLogs:
  Enable: false # (4)!
versions.AwsProviderVersion: ">= 6.0.0"
  1. By default, CloudFront returns a 403 Forbidden error when someone requests a file that doesn't exist in your S3 bucket. Enable this setting to serve index.html instead of the error page. This allows your Single Page Application (SPA) to handle client-side routing - the SPA receives the request and can display the correct content based on the URL path
  2. When someone visits a directory URL like /getting-started/, CloudFront needs to know which file to serve. Enable this to automatically append index.html to directory requests, so /getting-started/ serves /getting-started/index.html.
  3. Replace golden-path-docs with your GitHub repository.
  4. Want logs in Datadog? Enable this later.

Step 3: Install the package

Install the package to generate Terraform files:

repo-iac/environments/dev/web-monkey/
ok pkg install

Step 4: Apply the configuration

Apply the data stack first. This creates the S3 buckets for content and logs:

repo-iac/environments/dev/
cd web-monkey-data/
terraform init
terraform apply

Apply the main CloudFront stack:

repo-iac/environments/dev/
cd ../web-monkey/
terraform init
terraform apply # (1)!
  1. Takes about 5 minutes ⏳

Time for a break?

It takes about 5 minutes to provision the CloudFront distribution.

The website will be available at https://web-monkey.pirates-dev.oslo.systems:

Expected error message
<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
</Error>

Step 5: Upload static files manually (optional)

Upload some files to the S3 bucket with at least one index.html file:

aws s3 sync ./your-static-files/ s3://your-bucket-name/

Step 6: Set up secrets for CI/CD (optional)

Run the script to set up CI/CD secrets for GitHub Actions:

repo-iac/environments/dev/web-monkey/
cd bin/
./set_github_secrets.sh # (1)!
  1. The script will prompt you to confirm ✅

The script will set these secrets in your GitHub repository:

  • AWS_ROLE_ARN
  • S3_BUCKET_NAME
  • CLOUDFRONT_DISTRIBUTION_ID

Next step

Create the CloudFront deploy workflow that will allow automated deployment of your static site from GitHub Actions.