Building an S3 Origin for Cloudfront in serverless.yml

serverless.yml

service: name

custom:
  staticBucket: static-name.justtim.net

provider:
  name: aws
  stage: prod
  environment:
    bucketName: ${self:custom.staticBucket}

functions:
# None here for the purposes of this gist

resources:
  Resources:
# Bucket to hold static stuff
# After doing: serverless deploy, use aws s3 sync [local directory] [bucketname] (scripted) to
# populate the static content into the bucket.
    WebAppstaticBucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: ${self:custom.staticBucket}
        AccessControl: PublicRead
        WebsiteConfiguration:
          IndexDocument: index.html
    ## Specifying the policies to make sure all files inside the Bucket are avaialble to CloudFront
    WebAppStaticBucketPolicy:
      Type: AWS::S3::BucketPolicy
      Properties:
        Bucket:
          Ref: WebAppstaticBucket
        PolicyDocument:
          Statement:
            - Sid: PublicReadGetObject
              Effect: Allow
              Principal: "*"
              Action:
              - s3:GetObject
              Resource: arn:aws:s3:::${self:custom.staticBucket}/*

# Cloudfront distribution, which wraps the API Gateway, and the S3 bucket, as different origins
    myDistribution:
      Type: AWS::CloudFront::Distribution
      Properties:
        DistributionConfig:
          Enabled: "true"
          DefaultRootObject: "page1"
# The default caching applies to the default (root) objects, not to images etc...
          DefaultCacheBehavior:
            AllowedMethods:
            - GET
            - HEAD
            MinTTL: "0"
            MaxTTL: "0"
            DefaultTTL: "0"
            TargetOriginId: myAPIOrigin
            ForwardedValues:
              QueryString: 'true'
              Cookies:
                Forward: all
            ViewerProtocolPolicy: redirect-to-https
# Here we define two behaviours of how we cache responses
          CacheBehaviors:
          - AllowedMethods:
            - GET
            - HEAD
            - OPTIONS
            TargetOriginId: myS3Origin
            ForwardedValues:
              QueryString: "false"
            ViewerProtocolPolicy: https-only
            MinTTL: "0"
            MaxTTL: "6"
            DefaultTTL: "3"
            PathPattern: static/*
# Here we define the API origin
          Origins:
            - DomainName:
               Fn::Join:
                - ""
                - - Ref: ApiGatewayRestApi
                  - ".execute-api.${self:provider.region}.amazonaws.com"
              Id: myAPIOrigin
              OriginPath: /${self:provider.stage}
              CustomOriginConfig:
                OriginProtocolPolicy: https-only
# Here's the origin from S3...
            - DomainName: ${self:custom.staticBucket}.s3.amazonaws.com
              OriginPath: /static
              ## An identifier for the origin which must be unique within the distribution
              Id: myS3Origin
              S3OriginConfig:
                OriginAccessIdentity: origin-access-identity/cloudfront/ID-GOES-HERE
# To get the ID, use CLI to run:
# aws cloudfront list-cloud-front-origin-access-identities
# Everything apart from ID-GOES-HERE is static, ID is a 13(ish digit) alphanumeric string

See: https://blog.h4.nz/2017/01/20/a-cloudformation-custom-resource-for-cloudfront-origin-access-identities-oai/#2-use-a-cloudformation-customresource-to-create-delete-the-originaccessidentity for more info on origin access identities.