serverless.yml

service: my-store-app

frameworkVersion: "3"

provider:
  name: aws
  runtime: nodejs14.x
  region: eu-west-1
  # setup profile for AWS CLI.
  # profile: node-aws

plugins:
  - serverless-finch
  # 'serverless-single-page-app-plugin' is a custom plugin that located .serverless_plugins folder.
  # Existing plugin (https://www.npmjs.com/package/serverless-single-page-app-plugin) doesn't have invalidate cache feature that often used during CI/CD events.
  # How to build your own plugins: https://www.serverless.com/framework/docs/providers/aws/guide/plugins#service-local-plugin
  - serverless-single-page-app-plugin
  - serverless-s3-cleaner

custom:
  client:
    bucketName: my-store-app
    distributionFolder: dist
  s3BucketName: ${self:custom.client.bucketName}

  ## Serverless-single-page-app-plugin configuration:
  s3LocalPath: ${self:custom.client.distributionFolder}/
  serverless-s3-cleaner:
    buckets:
      - ${self:custom.client.bucketName}

resources:
  Resources:
    ## Specifying the S3 Bucket
    WebAppS3Bucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: ${self:custom.s3BucketName}
        AccessControl: PublicRead
        WebsiteConfiguration:
          IndexDocument: index.html
          ErrorDocument: index.html
        # VersioningConfiguration:
        #   Status: Enabled

    ## Specifying the policies to make sure all files inside the Bucket are avaialble to CloudFront
    WebAppS3BucketPolicy:
      Type: AWS::S3::BucketPolicy
      Properties:
        Bucket:
          Ref: WebAppS3Bucket
        PolicyDocument:
          Statement:
            - Sid: "AllowCloudFrontAccessIdentity"
              Effect: Allow
              Action: s3:GetObject
              Resource: arn:aws:s3:::${self:custom.s3BucketName}/*
              Principal:
                AWS:
                  Fn::Join:
                    - " "
                    - - "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity"
                      - !Ref OriginAccessIdentity

    OriginAccessIdentity:
      Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
      Properties:
        CloudFrontOriginAccessIdentityConfig:
          Comment: Access identity between CloudFront and S3 bucket

    ## Specifying the CloudFront Distribution to server your Web Application
    WebAppCloudFrontDistribution:
      Type: AWS::CloudFront::Distribution
      Properties:
        DistributionConfig:
          Origins:
            - DomainName: !GetAtt WebAppS3Bucket.RegionalDomainName
              ## An identifier for the origin which must be unique within the distribution
              Id: myS3Origin
              ## In case you don't want to restrict the bucket access use CustomOriginConfig and remove S3OriginConfig
              S3OriginConfig:
                OriginAccessIdentity: !Sub origin-access-identity/cloudfront/${OriginAccessIdentity}
              # CustomOriginConfig:
              #   HTTPPort: 80
              #   HTTPSPort: 443
              #   OriginProtocolPolicy: https-only
          Enabled: true
          IPV6Enabled: true
          HttpVersion: http2
          ## Uncomment the following section in case you are using a custom domain
          # Aliases:
          # - mysite.example.com
          DefaultRootObject: index.html
          ## Since the Single Page App is taking care of the routing we need to make sure ever path is served with index.html
          ## The only exception are files that actually exist e.h. app.js, reset.css
          CustomErrorResponses:
            - ErrorCode: 404
              ResponseCode: 200
              ResponsePagePath: /index.html
          DefaultCacheBehavior:
            AllowedMethods: ["GET", "HEAD", "OPTIONS"]
            CachedMethods: ["GET", "HEAD", "OPTIONS"]
            ForwardedValues:
              Headers:
                - Access-Control-Request-Headers
                - Access-Control-Request-Method
                - Origin
                - Authorization
              ## Defining if and how the QueryString and Cookies are forwarded to the origin which in this case is S3
              QueryString: false
              Cookies:
                Forward: none
            ## The origin id defined above
            TargetOriginId: myS3Origin
            ## The protocol that users can use to access the files in the origin. To allow HTTP use `allow-all`
            ViewerProtocolPolicy: redirect-to-https
            Compress: true
            DefaultTTL: 0
          ## The certificate to use when viewers use HTTPS to request objects.
          ViewerCertificate:
            CloudFrontDefaultCertificate: true
          ## Uncomment the following section in case you want to enable logging for CloudFront requests
          # Logging:
          #   IncludeCookies: 'false'
          #   Bucket: mylogs.s3.amazonaws.com
          #   Prefix: myprefix

  ## In order to print out the hosted domain via `serverless info` we need to define the DomainName output for CloudFormation
  Outputs:
    WebAppS3BucketOutput:
      Value: !Ref WebAppS3Bucket
    WebAppCloudFrontDistributionOutput:
      Value: !GetAtt WebAppCloudFrontDistribution.DomainName