serverless.yml

service: 'remix-serverless-app'

frameworkVersion: '2'

package:
  individually: true

plugins:
  - serverless-esbuild
  - serverless-s3-sync

custom:
  # stage-specific variables
  dev: 
    HOST: my-cloudfront-domain.cloudfront.net # replace with the WebsiteDomain from stack outputs
  prod:
    HOST: my-domain.com # replace with your production url
  # serverless-esbuild config, bundles your code and allows you to use typescript or es-next features in your handler code
  esbuild:
    bundle: true
    minify: false
    sourcemap: true
    sourcesContent: false
    exclude: ['aws-sdk']
    target: 'node14'
    define:
      'require.resolve': null
    platform: 'node'
  # serverless-s3-sync config, handles uploading static files to S3
  s3Sync:
    buckets:
      - bucketNameKey: WebsiteBucketName
        bucketPrefix: website/
        localDir: public
        params:
          - favicon.png:
              CacheControl: 'public, max-age=3600'
          - 'static/**/*':
              CacheControl: 'public, max-age=31536000, immutable'

provider:
  name: aws
  runtime: nodejs14.x
  stage: ${opt:stage, 'dev'}
  region: ${opt:region, 'us-east-1'}
  environment:
    AWS_NODEJS_CONNECTION_REUSE_ENABLED: '1'
    NODE_OPTIONS: '--enable-source-maps --stack-trace-limit=1000'
  lambdaHashingVersion: '20201221'

functions:
  remix:
    handler: server/index.handler
    description: My Remix app!
    events:
      - httpApi:
          method: any
          path: '/{proxy+}'
resources:
  Resources:
    # Created by serverless
    # HttpApi:
    #   Type: AWS::ApiGatewayV2::Api
    #   Properties:
    #     Name: ${self:provider.stage}-${self:service}
    #     ProtocolType: HTTP

    # S3 bucket for static assets
    WebsiteBucket:
      Type: AWS::S3::Bucket
      Properties: {}
    
    # Allow CloudFront to use GetObject in the WebsiteBucket
    WebsiteOriginAccessIdentity:
      Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
      Properties:
        CloudFrontOriginAccessIdentityConfig:
          Comment: Origin Access Identity to Access ${self:service} Website Bucket ${self:provider.stage}
    WebsiteBucketPolicy:
      Type: AWS::S3::BucketPolicy
      Properties:
        Bucket: !Ref WebsiteBucket
        PolicyDocument:
          Statement:
            - Effect: Allow
              Action:
                - s3:GetObject
              Resource:
                Fn::Join:
                  - /
                  - - Fn::GetAtt:
                        - WebsiteBucket
                        - Arn
                    - '*'
              Principal:
                CanonicalUser:
                  Fn::GetAtt:
                    - WebsiteOriginAccessIdentity
                    - S3CanonicalUserId
    
    # Use CloudFront in front of the Remix API Gateway endpoint
    RemixCachePolicy:
      Type: AWS::CloudFront::CachePolicy
      Properties:
        CachePolicyConfig:
          Name: RemixCachePolicy
          DefaultTTL: 60
          MinTTL: 0
          MaxTTL: 60
          ParametersInCacheKeyAndForwardedToOrigin:
            HeadersConfig:
              HeaderBehavior: none
            EnableAcceptEncodingGzip: true
            QueryStringsConfig:
              QueryStringBehavior: all
            CookiesConfig:
              CookieBehavior: all
    
    # CloudFront Configuration
    CDN:
      Type: AWS::CloudFront::Distribution
      DependsOn:
        - WebsiteBucket
        - HttpApi
      Properties:
        DistributionConfig:
          Origins:
            - DomainName:
                Fn::GetAtt:
                  - WebsiteBucket
                  - DomainName
              Id: StaticOrigin
              S3OriginConfig:
                OriginAccessIdentity:
                  Fn::Join:
                    - /
                    - - origin-access-identity
                      - cloudfront
                      - !Ref WebsiteOriginAccessIdentity
              OriginPath: '/website'
            - DomainName:
                Fn::Join:
                  - ''
                  - - Ref: HttpApi
                    - '.execute-api.${self:provider.region}.amazonaws.com'
              Id: RemixOrigin
              # UNCOMMENT THIS TO SET THE X-Forwarded-Host header for API Gateway
              # OriginCustomHeaders:
              #   - HeaderName: X-Forwarded-Host
              #     HeaderValue: ${self:${self:provider.stage}.HOST}
              CustomOriginConfig:
                OriginProtocolPolicy: https-only
                OriginSSLProtocols: [TLSv1.2]

          # missing static assets will give a 403 from s3, so you can override the error response here
          # CustomErrorResponses:
            # - ErrorCachingMinTTL: 60
            #   ErrorCode: 403
            #   ResponseCode: 404
            #   ResponsePagePath: /404
          # By default, all requests go to remix
          DefaultCacheBehavior:
            AllowedMethods: [GET, HEAD, OPTIONS, PUT, PATCH, POST, DELETE]
            CachedMethods: [GET, HEAD, OPTIONS]
            Compress: true
            CachePolicyId: 
              Ref: RemixCachePolicy
            TargetOriginId: RemixOrigin
            ViewerProtocolPolicy: redirect-to-https
          # Requests to /static go to S3
          CacheBehaviors:
            - PathPattern: 'static/*'
              AllowedMethods:
                - GET
                - HEAD
              CachedMethods:
                - GET
                - HEAD
              Compress: true
              ForwardedValues:
                QueryString: true
                Cookies:
                  Forward: none
              TargetOriginId: StaticOrigin
              ViewerProtocolPolicy: redirect-to-https
            # Special rule for browser favicon requests to also go to S3 origin
            - PathPattern: '/favicon.*'
              AllowedMethods:
                - GET
                - HEAD
              CachedMethods:
                - GET
                - HEAD
              Compress: false
              ForwardedValues:
                QueryString: false
                Cookies:
                  Forward: none
              TargetOriginId: StaticOrigin
              ViewerProtocolPolicy: redirect-to-https
          Comment: ${self:service}-${self:provider.stage}
          Enabled: true
          HttpVersion: http2
          PriceClass: PriceClass_100
          ViewerCertificate:
            CloudFrontDefaultCertificate: true
  Outputs:
    WebsiteBucketName:
      Value:
        Ref: WebsiteBucket
    DistributionID:
      Value:
        Ref: CDN
    WebsiteDomain:
      Value:
        Fn::GetAtt: [CDN, DomainName]