Installation

npm i -E serverless-cloudfront-stack

Features

S3
- Bucket for your app assets.
- Bucket access control.
- Bucket encryption support for AES256.
- Bucket versioning for your assets.
- Bucket for cdn access logs.
- Bucket Cors.
- Data rentention for access logs.

Cloud Front Distribution
- SSL support.
- Access Logs.
- Cors support.
- Cname support.

Acm - Https
- Certificate Creation.
- Certificate Validation.

Dns Alias
- Route53 - Record for your CDN.
- ApiGateway - New Path for your CDN

Extras
- Invalidate CloudFront cache on new deploys.
- Sync your local assets folder with s3 on new deploys.
- Extends resources configuration.

Usage

# serverless.yml

plugins:
  - serverless-cloudfront-stack

custom:
  cdnStack:
    disabled: false                               # optional, disabled this plugin
    beforeSpawn: ''                               # optional, run another hook plugin

    cname: ''                                     # optional, cname for cdn.
    createInRoute53: false                        # optional, default false, create cname record
    certificate: ''                               # required, if use cname

    apigateway: ''                                # optional, use apigateway as http_proxy to cloudfront

    bucketName: ''                                # required, app bucket name
    enableCors: false                             # optional, enable cors default false
    blockPublicAccess: true                       # optional, block public acccess to s3
    bucketEncryption: false                       # optional, bucket encryption for AES256
    bucketVersioning: false                       # optional, assets object versioning (backup)

    indexPage: ''                                 # optional, default index.html
    errorPage: ''                                 # optional, default index.html
    bucketWebHosting: true                        # optional, default true

    syncLocalFolder: ''                           # optional, folder path to sync with s3
    priceClass: ''                                # optional, default 'PriceClass_100'

    forwardHeaders:                               # optional, forward http headers
      - Origin
      - Accept-Encoding
      - Your-Custom-Header

    logging:                                      # optional tag
      bucketName: ''                              # required, logs bucket name
      preffix: ''                                 # optional, default 'Access/'
      retentionDays: 7                            # optional, default 21 days

Simple Example For Static Web App with Route53

# serverless.yml

custom:
  cdnStack:
    cname: 'cdn.dev.domain.com'
    createInRoute53: true                         # assumptions: exist hosted zone "dev.domain.com"
    certificate: '*.domain.com'                   # assumptions: exist acm cert "*.domain.com"

    bucketName: 'static-html-web-app'
    blockPublicAccess: true
    bucketWebHosting: true

    syncLocalFolder: './dist'

Simple Example For Static Web App with ApiGateway (multiple front approach)

# serverless.yml
# Your front-app will be accessed through api gateway
# Assumptions: should be exists the apigateway and stage

custom:
  cdnStack:
    apigateway: apigateway-name:stage-dev/new-front-app

    bucketName: 'static-html-web-app'
    blockPublicAccess: true
    bucketWebHosting: true

    syncLocalFolder: './dist'

Simple Example for Front Resources (webfonts, images, ...)

# serverless.yml

custom:
  cdnStack:
    cname: 'cdn.dev.domain.com'
    createInRoute53: true                         # assumptions: exist hosted zone "dev.domain.com"
    certificate: '*.domain.com'                   # assumptions: exist acm cert "*.domain.com"

    bucketName: 'assets-front-resources'
    enableCors: true
    blockPublicAccess: true
    bucketWebHosting: false

    syncLocalFolder: './dist'


# psss. check full example in serverless.example.yml file.

Extends

# serverless.yml

resources:
  Resources:
    StaticWebSiteBucket:
      Properties:
        BucketName: override bucket name
        ...

    DnsRecord:
      Properties:
        Comment: override comment
        ...

    CloudFrontDistribution:
      ...

    AccessLogsBucket:
      ...