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)
- Much 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
- 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
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
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-prefixSecond, 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 deploy [--no-delete-contents] [--no-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: lambdacertificate
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
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
originPath
optional, default: not set
custom:
fullstack:
...
originPath: customPath
...Supports a custom origin path for the web application in the cloudfront distribution
--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-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.
- Andy Hahn - andrewphahn from MadSkills.io
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