serverless.yaml

service: my-service

provider:
  name: aws
  region: ${opt:region, 'eu-west-1'}
  stage: ${opt:stage, 'development'}

plugins:
  - serverless-s3-sync

resources:
  Resources:
    StaticSiteS3:
      Type: AWS::S3::Bucket
      Properties:
        AccessControl: PublicRead
        BucketName: ${self:custom.siteName}
        WebsiteConfiguration:
          IndexDocument: index.html
    StaticSiteS3BucketPolicy:
      Type: AWS::S3::BucketPolicy
      Properties:
        Bucket:
          Ref: StaticSiteS3
        PolicyDocument:
          Statement:
            - Sid: PublicReadGetObject
              Effect: Allow
              Principal: "*"
              Action:
                - s3:GetObject
              Resource:
                Fn::Join: [
                  "", [
                  "arn:aws:s3:::",
                  {
                    "Ref": "StaticSiteS3"
                  },
                  "/*"
                ]
                ]
    SiteCloudfront:
      Type: AWS::CloudFront::Distribution
      Properties:
        DistributionConfig:
          Aliases:
            - ${self:custom.siteName}
          Comment: "My distribution"
          Enabled: true
          ViewerCertificate:
            AcmCertificateArn: <arn of your cert>
            SslSupportMethod: sni-only
          Origins:
            - DomainName: ${self:custom.siteName}.s3-website.${self:provider.region}.amazonaws.com
              CustomOriginConfig:
                OriginProtocolPolicy: http-only
              Id: my-gui
          DefaultRootObject: index.html
          CustomErrorResponses:
            - ErrorCode: 404
              ResponseCode: 200
              ResponsePagePath: /index.html
          DefaultCacheBehavior:
            DefaultTTL: 30
            MaxTTL: 300
            MinTTL: 5
            ForwardedValues:
              QueryString: true
              Headers:
                - Authorization
                - Content-Type
                - Access-Control-Request-Headers
                - Access-Control-Request-Method
                - Origin
            TargetOriginId: developers-gui
            ViewerProtocolPolicy: redirect-to-https
    DnsRecord:
      Type: "AWS::Route53::RecordSet"
      Properties:
        HostedZoneName: yourdomain.com.
        Name: ${self:custom.siteName}
        ResourceRecords:
          - Fn::GetAtt:
              - SiteCloudfront
              - DomainName
        TTL: 3600
        Type: CNAME

custom:
  siteName: my-app.com
  s3Sync:
    - bucketName: ${self:custom.siteName}
      localDir: dist