Serverless plugin to deploy a single page app to s3
Originally inspired by this project aws-node-single-page-app-via-cloudfront
I've moved to using a native node s3 interface instead of the aws cli via command processing. Also didnt need the cloudfront stuff. Instead I used cloudflare to cache as a cdn as well as offloading custom domain names ssl for the bucket.
Make sure you have some credentials that can deploy serverless apps this plugin reads the environment variables,
AWS_ACCESS_KEY_ID=xxxxxx
AWS_SECRET_ACCESS_KEY=xxxxxx
If you want to add the plugin to your project using a folder just add the following to your package.json Its not required but I like using the serverless-stack-output plugin also.
npm install serverless-s3spa
npm install serverless-stack-output
"devDependencies": {
"serverless-s3spa": "serverless-s3spa"
}
You can also create a directory in .serverless_plugins in your project to serve the depedency without dealing with versioning issues bypassing the need to do an npm install
Create a serverless.yml file for your project with somethig like the following.
# Examples:
# serverless deploy --stage dev
# serverless syncToS3 --stage dev
# serverless remove --stage dev
service: example-project-serverless
plugins:
- serverless-s3spa
- serverless-stack-output
custom:
s3Bucket: example-project-serverless-${opt:stage}
syncFolder: build
output:
file: output.yaml
provider:
name: aws
runtime: nodejs4.3
region: us-west-1
resources:
Resources:
StaticSite:
Type: AWS::S3::Bucket
Properties:
BucketName: ${self:custom.s3Bucket}
AccessControl: PublicRead
WebsiteConfiguration:
IndexDocument: index.html
ErrorDocument: index.html
StaticSiteS3BucketPolicy:
Type: AWS::S3::BucketPolicy
Properties:
Bucket:
Ref: StaticSite
PolicyDocument:
Statement:
- Sid: PublicReadGetObject
Effect: Allow
Principal: "*"
Action:
- s3:GetObject
Resource:
- Fn::Join: [ "", [ "arn:aws:s3:::", { "Ref": "StaticSite" }, "/*" ] ]