A serverless plugin that automatically creates an AWS CloudFront distribution that serves static web content from S3 and optionally routes API traffic to API Gateway.
Home page - https://www.madskills.io/fullstack-serverless/
⚡ Pros
- Allows you to set-up custom domain for a S3 hosted site and API Gateway
- Free SSL using AWS CertificateManager
- No CORS needed
- Enables CDN caching of resources - so you don't waste Lambda invocations or API Gateway traffic for serving static files (just set Cache-Control headers in API responses)
- More CloudWatch statistics of API usage (like bandwidth metrics)
- Real world access log - out of the box, API Gateway currently does not provide any kind of real "apache-like" access logs for your invocations
- Web Application Firewall support - enable AWS WAF to protect your API from security threats
- Can be used to manage S3 content and CloudFront without API Gateway by simply not defining any functions
- Install the serverless framework
npm install -g serverlessFirst, Install and configure
npm install --save-dev fullstack-serverless- All fullstack-serverless configuration parameters are optional - e.g. don't provide ACM Certificate ARN to use default CloudFront certificate (which works only for default cloudfront.net domain).
- This plugin does not set-up automatically Route53 for newly created CloudFront distribution. After creating CloudFront distribution, manually add Route53 ALIAS record pointing to your CloudFront domain name.
- First deployment may be quite long (e.g. 10 min) as Serverless is waiting for CloudFormation to deploy CloudFront distribution.
# add to your serverless.yml
plugins:
- fullstack-serverless
custom:
fullstack:
domain: my-custom-domain.com
certificate: arn:aws:acm:us-east-1:... # The ARN for the SSL cert to use form AWS CertificateManager
bucketName: webapp-deploy # Unique name for the S3 bucket to host the client assets
distributionFolder: client/dist # Path to the client assets to be uploaded to S3
indexDocument: index.html # The index document to use
errorDocument: error.html # The error document to use
singlePageApp: false # If true 403 errors will be rerouted (missing assets) to your root index document to support single page apps like React and Angular where the js framework handles routing
invalidationPaths: # Custom invalidationPaths for cloudfront in case your frontend framework uses filename hashing
- /index.html
- /error.html
compressWebContent: true # Use compression when serving web content
apiPath: api # The path prefix for your API Gateway lambdas. The path for the lambda http event trigger needs to start with this too eg. api/myMethod
apiGatewayRestApiId: a12bc34df5 # If "Api Gateway Rest Api" is not part of the same serverless template, you can set your API id here
clientCommand: gulp dist # Command to generate the client assets. Defaults to doing nothing
clientSrcPath: client # The path to where you want to run the clientCommand
waf: 00000000-0000-0000-0000-000000000000 # ID of the Web Application Firewall. Defaults to not used
logging:
bucket: my-bucket.s3.amazonaws.com
prefix: my-prefix
minimumProtocolVersion: TLSv1.2_2018
priceClass: PriceClass_100
noConfirm: false # Alternative to --no-confirm flag. Use this parameter if you do not want a confirmation prompt to interrupt automated builds.Second, Create a website folder in the root directory of your Serverless project. This is where your distribution-ready website should live. By default the plugin expects the files to live in a folder called client/dist. But this is configurable with the distributionFolder option (see the Configuration Parameters below).
The plugin uploads the entire distributionFolder to S3 and configures the bucket to host the website and make it publicly available, also setting other options based the Configuration Parameters specified in serverless.yml.
To test the plugin initially you can copy/run the following commands in the root directory of your Serverless project to get a quick sample website for deployment:
mkdir -p client/dist
touch client/dist/index.html
touch client/dist/error.html
echo "Go Serverless" >> client/dist/index.html
echo "error page" >> client/dist/error.htmlThird, run the plugin (this can take several minutes the first time), and visit your new website!
Serverless v2 cli params
serverless deploy [--no-delete-contents] [--no-generate-client]Serverless v3 cli params
Serverless v3 forbids free-form cli options.
Therefore options can now only be passed as--param="option=value".
For the sake of simplicity, all v2 options are still available and passable through theparamargument.
serverless deploy [--param="no-delete-contents"] [--param="generate-client"]The plugin should output the location of your newly deployed static site to the console.
Note: See Command-line Parameters for details on command above
WARNING: The plugin will overwrite any data you have in the bucket name you set above if it already exists.
To just generate and deploy your client code:
serverless client deploy [--no-delete-contents] [--no-generate-client]If later on you want to take down the website you can use:
serverless client removebucketName
required
custom:
fullstack:
...
bucketName: [unique-s3-bucketname]
...Use this parameter to specify a unique name for the S3 bucket that your files will be uploaded to.
distributionFolder
optional, default: client/dist
custom:
fullstack:
...
distributionFolder: [path/to/files]
...Use this parameter to specify the path that contains your website files to be uploaded. This path is relative to the path that your serverless.yaml configuration files resides in.
apiPath
optional, default: api
custom:
fullstack:
...
apiPath: api
...Use this parameter to specify the path prefix your API Gateway methods will be available through on your CloudFront distribution (custom domain)
- If
httpevents are defined,apiPathmust be included in the path for the lambdas you want exposed through CloudFront (your custom domain). Not all your methods need to be exposed through CloudFront. For some things, esp. those that are not public facing (eg. third party web hooks) you may want to use the ApiGateway URL and not expose them through CloudFront to control access and cost.
functions:
message:
handler: message.handler
timeout: 30
events:
- http:
path: ${self:custom.fullstack.apiPath}/message
method: post
integration: lambdaapiGatewayRestApiId
optional, default: not set
custom:
fullstack:
...
apiGatewayRestApiId: a12bc34df5
...This is only needed if "Api Gateway Rest Api" is not part of the same serverless template and the API id is not defined in provider -> apiGateway section.
The id can be found in API Gateway url. For example, if your Rest API url is https://a12bc34df5.execute-api.eu-central-1.amazonaws.com, API id will be a12bc34df5.
certificate
optional, default: not set
custom:
fullstack:
...
certificate: arn:aws:acm:us-east-1:...
...Use this parameter to specify ARN for the SSL cert to use form AWS CertificateManager
indexDocument
optional, default: index.html
custom:
fullstack:
...
indexDocument: [file-name.ext]
...The name of your index document inside your distributionFolder. This is the file that will be served to a client visiting the base URL for your website.
domain
optional, default: not set
custom:
fullstack:
...
domain: my-custom-domain.com
...domain can be a list, if you want to add more domains:
custom:
fullstack:
...
domain:
- my-custom-domain.com
- secondary-custom-domain.com
...The custom domain for your fullstack serverless app.
errorDocument
optional, default: error.html
custom:
fullstack:
...
errorDocument: [file-name.ext]
...The name of your error document inside your distributionFolder. This is the file that will be served to a client if their initial request returns an error (e.g. 404). For an SPA, you may want to set this to the same document specified in indexDocument so that all requests are redirected to your index document and routing can be handled on the client side by your SPA.
objectHeaders
optional, no default
custom:
fullstack:
...
objectHeaders:
ALL_OBJECTS:
- name: header-name
value: header-value
...
specific-directory/:
- name: header-name
value: header-value
...
specific-file.ext:
- name: header-name
value: header-value
...
... # more file- or folder-specific rules
...Use the objectHeaders option to set HTTP response headers be sent to clients requesting uploaded files from your website.
Headers may be specified globally for all files in the bucket by adding a name, value pair to the ALL_OBJECTS property of the objectHeaders option. They may also be specified for specific folders or files within your site by specifying properties with names like specific-directory/ (trailing slash required to indicate folder) or specific-file.ext, where the folder and/or file paths are relative to distributionFolder.
Headers with more specificity will take precedence over more general ones. For instance, if 'Cache-Control' was set to 'max-age=100' in ALL_OBJECTS and to 'max-age=500' in my/folder/, the files in my/folder/ would get a header of 'Cache-Control: max-age=500'.
singlePageApp
optional, default: false
custom:
fullstack:
...
singlePageApp: true
...If true 403 errors will be rerouted (missing assets) to your root index document to support single page apps like React and Angular where the js framework handles routing
invalidationPaths
optional, default: ['/*']
custom:
fullstack:
...
invalidationPaths:
- /index.html
- /error.html
...Custom invalidationPaths for cloudfront in case your frontend framework uses filename hashing
compressWebContent
optional, default: true
custom:
fullstack:
...
compressWebContent: true
...Instruct CloudFront to use compression when serving web content, see Serving Compressed Files in the Amazon CloudFront Developer Guide.
clientCommand
optional, default: not set
custom:
fullstack:
...
clientCommand: [command to generate your client (e.g. gulp dist)]
...Command to generate the client assets. Defaults to doing nothing
clientSrcPath
optional, default: not set
custom:
fullstack:
...
clientSrcPath: [path/to/your/client]
...The path to where you want to run the clientCommand
waf
optional, default: not set
custom:
fullstack:
...
waf: [web application firewall ARN]
...Web Application Firewall support - enable AWS WAF to protect your API from security threats
logging
optional, default: not set
custom:
fullstack:
...
logging:
bucket: my-bucket.s3.amazonaws.com
prefix: my-prefix
...Real world access log - out of the box, API Gateway currently does not provide any kind of real "apache-like" access logs for your invocations
priceClass
optional, default: PriceClass_All
custom:
fullstack:
...
priceClass: PriceClass_100
...CloudFront PriceClass - can be PriceClass_All (default), PriceClass_100 or PriceClass_200
minimumProtocolVersion
optional, default: TLSv1
custom:
fullstack:
...
minimumProtocolVersion: TLSv1.2_2018
...Set minimum SSL/TLS protocol version - TLSv1_2016, TLSv1.1_2016, TLSv1.2_2018 or SSLv3
- The minimum SSL/TLS protocol that CloudFront uses to communicate with viewers
- The cipher that CloudFront uses to encrypt the content that it returns to viewers
noConfirm
optional, default: false
custom:
fullstack:
...
noConfirm: true
...Use this parameter if you do not want a confirmation prompt to interrupt automated builds. If either this or --no-confirm CLI parameter is true the confirmation prompt will be disabled.
origins
optional, default: not set
custom:
fullstack:
...
origins:
- Id: Media
DomainName:
Fn::GetAtt:
- MediaBucket
- DomainName
S3OriginConfig:
OriginAccessIdentity:
Fn::Join:
- ''
- - origin-access-identity/cloudfront/
- { Ref: S3OriginAccessIdentity }
...Use this parameter if you want to add additional origins to the CloudFormation resources.
defaultCacheBehavior
optional, default: not set
custom:
fullstack:
...
defaultCacheBehavior:
MinTTL: 3600
...cacheBehaviors
optional, default: not set
custom:
fullstack:
...
cacheBehaviors:
- TargetOriginId: Media
PathPattern: media/*
AllowedMethods:
- GET
- HEAD
- OPTIONS
CachedMethods:
- HEAD
- GET
ForwardedValues:
QueryString: true
Headers:
- Accept
- Referer
- Authorization
- Content-Type
ViewerProtocolPolicy: redirect-to-https
...
...Use this parameter if you want to add additional cache behaviors to the CloudFormation resources.
--no-delete-contents
optional, default false (deletes contents by default)
serverless client deploy --no-delete-contentsUse this parameter if you do not want to delete the contents of your bucket before deployment. Files uploaded during deployment will still replace any corresponding files already in your bucket.
--no-generate-client
optional, default false (generates client code by default if clientCommand and clientSrcPath are configured)
serverless client deploy --no-generate-clientUse this parameter if you do not want to generate the client code before deploying. Files uploaded during deployment will still replace any corresponding files already in your bucket.
--no-client-deploy
optional, default false (deploys the generated client code by default)
serverless deploy --no-client-deployUse this parameter if you do not want to deploy the client along with the rest of the serverless stack. Almost certainly in this case you don't want to generate the client code either and will want to use
serverless deploy --no-generate-client --no-client-deploy--no-confirm
optional, default false (disables confirmation prompt)
serverless client deploy --no-confirmUse this parameter if you do not want a confirmation prompt to interrupt automated builds.
--no-invalidate-distribution
optional, default false (disables creating an invalidation for the CloudFront distribution)
serverless client deploy --no-invalidate-distributionUse this parameter if you do not want to invalidate the CloudFront distribution. Invalidations are for the path /*.
- Andy Hahn - andrewphahn from MadSkills.io
- jlaramie
- superandrew213
- harmon25
- jmortlock
- haochang
- hakimio
- artoliukkonen
- pecirep
- miguel-a-calles-mba
Forked from the serverless-api-cloudfront
Borrowed heavily from the serverless-finch
Initial CloudFormation template from Full Stack Serverless Web Apps with AWS
Inspiration from serverless-stack.com