This project forked from droplr/serverless-api-cloudfront
Serverless Plugin - Simplify creating a full stack serverless web app
Home Page: https://www.madskills.io/fullstack-serverless
License: Other
Now cloudfront origin access identity by default creates with the same name "Serverless managed web app S3 bucket origin-access-identity" and when we have many sls apps at one account it's so hard to determine what's policy for what app.
It's would be fine if we'll have some option to set policy name or if it will named as "Serverless managed web app S3 bucket origin-access-identity " by default maybe.
Hello!
I like this library a lot. But I'm currently just using my mobile data to deploy some pet project to AWS.
Sometimes I have to deploy all the functions because for some reason, some files I require() from the function handler doesn't get updated if I upload only the specific function I have changes on. Deploying the whole project including the front-end stuff eats a considerable chunk of my data package.
Is there an option to deploy only all the functions, skipping the front-end, that I'm not aware of? If not, I think it's a great feature to have.
Thanks!
Nothing really bad, but a small issue - because the plugin attempts to validate the supplied configuration prior to running any command, it means it's not possible to run 'serverless remove' unless you've built your source just prior (as the configuration checks for the existence of the distributionFolder).
Unless there is a reason the plugin needs the build/distributionFolder in order to perform a removal?
Here is the my configuration
custom:
variables:
stage: ${env:DEPLOYMENT_STAGE, 'dev'}
region: ${env:AWS_REGION, 'us-west-2'}
memorySize: ${env:MEMORY_SIZE, '512'}
timeout: ${env:TIMEOUT, '30'}
deploymentPrefix: ${env:DEPLOYMENT_PREFIX, 'serverless'}
versionFunctions: false # ${env:VERSION_FUNCTIONS, 'false'}
endpointType: ${env:ENDPOINT_TYPE, 'Edge'}
tracing:
apiGateway: false # ${env:TRACING_API_GATEWAY, 'true'}
lambda: true # ${env:TRACING_LAMBDA, 'true'}
logs:
restApi:
accessLogging: true # ${env:LOGS_ACCESS_LOGGING, 'true'}
executionLogging: true # ${env:LOGS_EXECUTION_LOGGING, 'true'}
level: ${env:LOGS_LEVEL, 'INFO'}
fullExecutionData: true # ${env:LOGS_FULL_EXECUTION_DATA, 'true'}
websocket: true # ${env:LOGS_WEBSOCKET, 'true'}
frameworkLambda: true # ${env:LOGS_FRAMEWORK_LAMBDA, 'true'}
namePrefix: ${self:provider.stage}-${self:provider.region}
fullstack_config:
qa:
domain: staging.example.io
certificate: ''
bucketName: serverless-${self:custom.namePrefix}-frontend
clientCommand: npm install && ng build --configuration qa
prod:
domain: example.io
certificate: ''
bucketName: serverless-${self:custom.namePrefix}-frontend
clientCommand: npm install && ng build --aot --prod
fullstack:
distributionFolder: webapp/dist/webapp
singlePageApp: true
clientCommand: ${self:custom.fullstack_config.${self:provider.stage}.clientCommand
clientSrcPath: webapp
This gives error while creating bucket
Bucket name should not contain uppercase characters
Passing the bucketName manually gives the following error
Serverless Error ---------------------------------------
ServerlessError: Client generation failed with code 2
at ChildProcess.proc.on (/opt/atlassian/pipelines/agent/build/node_modules/fullstack-serverless/index.js:146:24)
at ChildProcess.emit (events.js:198:13)
at ChildProcess.EventEmitter.emit (domain.js:448:20)
at maybeClose (internal/child_process.js:982:16)
at Socket.stream.socket.on (internal/child_process.js:389:11)
at Socket.emit (events.js:198:13)
at Socket.EventEmitter.emit (domain.js:448:20)
at Pipe._handle.close (net.js:606:12)
From previous event:
at PluginManager.invoke (/usr/local/lib/node_modules/serverless/lib/classes/PluginManager.js:489:22)
at getHooks.reduce.then (/usr/local/lib/node_modules/serverless/lib/classes/PluginManager.js:524:24)
From previous event:
at PluginManager.run (/usr/local/lib/node_modules/serverless/lib/classes/PluginManager.js:524:8)
at variables.populateService.then (/usr/local/lib/node_modules/serverless/lib/Serverless.js:115:33)
at runCallback (timers.js:705:18)
at tryOnImmediate (timers.js:676:5)
at processImmediate (timers.js:658:5)
at process.topLevelDomainCallback (domain.js:126:23)
From previous event:
at Serverless.run (/usr/local/lib/node_modules/serverless/lib/Serverless.js:102:74)
at serverless.init.then (/usr/local/lib/node_modules/serverless/bin/serverless.js:72:30)
at /usr/local/lib/node_modules/serverless/node_modules/graceful-fs/graceful-fs.js:111:16
at /usr/local/lib/node_modules/serverless/node_modules/graceful-fs/graceful-fs.js:45:10
at FSReqWrap.args [as oncomplete] (fs.js:140:20)
From previous event:
at initializeErrorReporter.then (/usr/local/lib/node_modules/serverless/bin/serverless.js:72:8)
at runCallback (timers.js:705:18)
at tryOnImmediate (timers.js:676:5)
at processImmediate (timers.js:658:5)
at process.topLevelDomainCallback (domain.js:126:23)
From previous event:
at Object.<anonymous> (/usr/local/lib/node_modules/serverless/bin/serverless.js:61:4)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
Overview
It would be great if fullstack-serverless exposed an option, potentially called headers that would allow to set any custom headers for the static content using lambda@edge or some other solution.
I found it difficult to set any security headers since s3 bucket and cloudfront support very limited amount of headers. Specifically, almost none of the commonly used headers for security hardening like Strict Transport Security, Content-Security-Policy, X-Content-Type-Options, X-Frame-Options, X-XSS-Protection, Referrer-Policy (infosec.mozilla).
Possible Solution with lambda@edge
Here is how the process works:
Edge function source
'use strict';
exports.handler = (event, context, callback) => {
//Get contents of response
const response = event.Records[0].cf.response;
const headers = response.headers;
//Set new headers
headers['strict-transport-security'] = [{key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubdomains; preload'}];
headers['content-security-policy'] = [{key: 'Content-Security-Policy', value: "default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; object-src 'none'"}];
headers['x-content-type-options'] = [{key: 'X-Content-Type-Options', value: 'nosniff'}];
headers['x-frame-options'] = [{key: 'X-Frame-Options', value: 'DENY'}];
headers['x-xss-protection'] = [{key: 'X-XSS-Protection', value: '1; mode=block'}];
headers['referrer-policy'] = [{key: 'Referrer-Policy', value: 'same-origin'}];
//Return modified response
callback(null, response);
};As of right now, one of the workarounds is to setup lambda@edge manually and map it to the cloudfront distribution created by the fullstack-serverless plugin. In addition, you will need to configure Basic Lambda Execution Policy allowing logs to be written to CloudWatch and Trust Relationship allowing Lambda and Lambda@Edge to assume the role. (configuring-x-frame-options-response-header-on-aws-cloudfront-and-s3).
Hi,
I was trying to add custom request headers to the Custom Origin Config in the CloudFront which can pass requests to API gateway. So all the requests which are coming from cloud front to API gateway should have the custom header.
Please help me how can I configure this. Please find the below screen shots for details. Thanks in Advance.
Any plans to add objectHeaders option like in https://github.com/fernando-mc/serverless-finch?
It would fix issues like these: fernando-mc/serverless-finch#40
I would like to disable CloudFront caching for index.html.
This works:
fullstack:
domain: mydomain.com
certificate: xxxxxxxxxxxxxxx
distributionFolder: ../web/build
apiPath: api
clientCommand: yarn run build
clientSrcPath: ../web/
bucketName: mybucketname
singlePageApp: true
noConfirm: trueThis breaks (with exactly the same config):
stage: "${opt:stage, self:provider.stage}"
fullstack: ${file(./fullstack.${self:custom.stage}.yml)} Fullstack serverless configuration errors:
- Could not find '/Users/xxx/xxx/xxx/client/dist' folder in your project root
- Please specify a bucket name for the client in serverless.ymlIs there any concept of staging/dev with this plug-in? Any thoughts on how to do this?
This is a bad default due to
https://docs.aws.amazon.com/AmazonS3/latest/dev/BucketRestrictions.html
It forces you to set bucketName in serverless.yml
I use currently the following serverless configuration for my small react application.
service: my-service-name
provider:
name: aws
runtime: nodejs12.x
region: eu-central-1
plugins:
- fullstack-serverless
custom:
fullstack:
bucketName: my-bucket-name # Unique name for the S3 bucket to host the client assets
distributionFolder: ./build # Path to the client assets to be uploaded to S3
indexDocument: index.html # The index document to use
errorDocument: index.html # The error document to use
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
compressWebContent: true # Use compression when serving web content
noConfirm: false # Alternative to --no-confirm flag. Use this parameter if you do not want a confirmation prompt to interrupt automated builds.
The fullstack plugin works fine but I've a problem.
The files inside the created S3 bucket are not automatically public so that I must manually change the permission of the files to public.
That means that I get after the deployment just an AccessDenied error from the website.
Can I configure that or can you add an option to set the permission automatically?
Exist a possibility to offer a very simple authentication via the plugin?
Currently is it time-consuming to provide that via serverless.
Maybe over a lambda function which provides a basic authentication?
Hi.
I am facing an issue trying to deploy a full-stack serverless application that used to work to another AWS account. The error is
Error:
CREATE_FAILED: WebAppS3BucketPolicy (AWS::S3::BucketPolicy)
API: s3:PutBucketPolicy Access Denied
I have spent some time trying to understand what's going on, and found these articles:
I tried creating a simple CloudFormation stack with just a bucket and a policy, made sure the Block Public Access setting is turned off for my IAM account and the Root account, and the template failed with the same error! Inspecting the created bucket I see that despite all the account settings it still has a Block Public Access setting on by default!
I believe the resource template and the policy preparation code must be changed to specify this setting explicitly for the app bucket. Can you do this? I have several projects depending on fullstack-serverless, it will be very unfortunate if I will not be able to deploy them anymore.
Thanks in advance!
AWS S3 listObjectsV2 and deleteObjects do not support more then 1000 items. I am deploying an ionic webapp and use their icon-library ionicons, which adds more then 1300 svg-files to the app. As a result serverless remove fails because only 1000 items gets removed and cloudformation cannot delete the non empty bucket.
I'm going to add a PR as well.
When the plugin creates the CF distribution it uses the REST endpoint for the S3 bucket, this means you get XML style error pages and means you lose out on SSL offloading and HTML errors.
I.e. it currently configures CF to point at:
xxxxxxx-app.s3.amazonaws.com (REST endpoint)
Rather than the website endpoint:
xxxxxxx-app.s3-website-us-east-1.amazonaws.com (website endpoint).
Note the s3-website in the URL.
More info here: https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteEndpoints.html
Is this behaviour configurable? Or have I overlooked something?
Could you add CloudFront cache invalidation to this plugin like it's done in serverless-single-page-app-plugin: invalidation function?
Hey Guys,
I've just come across this repo from David's post on LinkedIn - our use case is to deploy a large number of subdomains for our customers via our CI.
As such we'd like to create buckets for domains that are new customers during our update cycles if they don't exist.
Is this a feature you'd be OK for us to PR?
Marc Fielding
My serverless.yml configuration:
plugins:
- fullstack-serverless
- serverless-offline
custom:
namePrefix: ${self:provider.stage}-${self:provider.region}
fullstack:
bucketName: serverless-${self:custom.namePrefix}-frontend
distributionFolder: webapp/dist/webapp
singlePageApp: true
clientCommand: npm install && ng build --aot --prod
clientSrcPath: webapp
But on deploying, it gives error
Serverless Error ---------------------------------------
An error occurred: WebAppS3BucketPolicy - Invalid principal in policy (Service: Amazon S3; Status Code: 400; Error Code: MalformedPolicy; Request ID: EE986697DF548390; S3 Extended Request ID: 0c648uKWw85q+U9bTsGXoCUzUFT21wpDPFYjkwYw2RPEh1nfq83xXmjtVAuHmoTeGo8uPQOhhzM=).
The errors generating are random.
When there was no bucketName in the config, it was giving an error as
Bucket name should not contain uppercase characters
Sometimes, it gives
client generation failed
Hi,
After creating new distribution on CloudFront we have at WebApp origin domain "bucket-name.s3.amazonaws.com" format. Regarding Amazon - it should look like different:
Important: The format bucket-name.s3.amazonaws.com doesn't work for Regions launched in 2019 or later.
https://aws.amazon.com/premiumsupport/knowledge-center/s3-rest-api-cloudfront-error-403/
Hello,
With the following configuration:
service: my-webapp
plugins:
- fullstack-serverless
provider:
name: aws
versionFunctions: false
region: ${opt:region, 'us-east-1'}
stage: dev # default stage
custom:
stage: "${opt:stage, self:provider.stage}"
profiles:
dev: dev-profile
fullstack:
bucketName: my-webapp-dev
distributionFolder: build
indexDocument: index.html
errorDocument: error.html
singlePageApp: true
# clientCommand: npm run builddoing nothing
# clientSrcPath: client
i get the following error:
sls client deploy --no-confirm --stage dev
Serverless: Skipping client generation...
Serverless: This deployment will:
Serverless: - Remove all existing files from bucket 'my-webapp-dev-my-webapp-saad'
Serverless: - Upload all files from 'build' to bucket 'my-webapp-dev-my-webapp-saad'
Serverless: Looking for bucket 'my-webapp-dev-my-webapp-saad'...
Serverless: Bucket does not exist. Run serverless deploy
Serverless Error ---------------------------------------
Bucket does not exist!
Get Support --------------------------------------------
Docs: docs.serverless.com
Bugs: github.com/serverless/serverless/issues
Issues: forum.serverless.com
Your Environment Information ---------------------------
Operating System: darwin
Node Version: 13.8.0
Framework Version: 1.67.3
Plugin Version: 3.6.6
SDK Version: 2.3.0
Components Version: 2.29.1
Notice that the bucket name in the logs is my-webapp-dev-my-webapp-saad, not just my-webapp-saad.
Is there a way to not prepend the service name to the bucketName?
Can we add ttls?
Something like this:
ttl:
min: 0
max: 31536000
default: 84600
Happy to make PR.
I'd love to use fullstack-serverless to deploy my autogenerated html API docs. This seems to be the best supported (and potentially only) serverless plugin that handles s3 buckets and cloudfront distributions end-to-end.
However, there appears to be a deep tie-in to API Gateway that this use case doesn't require. I'm only pushing static web files to a separate domain than my API domain.
Would you recommend fullstack-serverless for this use case, and do you have any configuration recommendations to eliminate unnecessary infrastructure being created?
Thanks so much -- this library looks spectacular!
I'm not sure what I'm missing here. I've setup a basic app with create-react-app and trying to deploy it. Here is my serverless.yml:
service: my-app
provider:
name: aws
runtime: nodejs12.x
stage: dev #default
plugins:
- fullstack-serverless
custom:
fullstack:
domain: app.mydomain.com
certificate: arn:aws:acm:us-east-xxxxxxxxxx
bucketName: client
distributionFolder: build
indexDocument: index.html
errorDocument: error.html
singlePageApp: true
compressWebContent: true
clientCommand: npm run-script build
This is the output I get, the command finishes in around 5-10 seconds. A bucket exists in AWS but it only contains the serverless folder and not my site.
PS C:\Users\dave.clarke\Documents\Code Repository\saas\client> serverless deploy
Serverless: Packaging service...
Serverless: Uploading CloudFormation file to S3...
Serverless: Uploading artifacts...
Serverless: Updating Stack...
Service Information
service: xxxxxxxxx
stage: dev
region: us-east-1
stack: xxxxxxxxxx
resources: 2
api keys:
None
endpoints:
None
functions:
None
layers:
None
Serverless: Run the "serverless" command to setup monitoring, troubleshooting and testing.
Any ideas - not sure what I'm missing?
I'm using Bitbucket pipeline to automate the deployment process.
Here is the serverless.yml configuration
custom:
fullstack:
bucketName: serverless-${self:custom.namePrefix}-frontend
distributionFolder: webapp/dist/webapp
singlePageApp: true
clientCommand: npm install && ng build --aot --prod
clientSrcPath: webapp
The frontend is in Angular is installed in the pipeline.
There is a step after building the source that asks to proceed with the changes
Do you want to proceed? (Y/n)
In the pipeline, it gives the following output and exits without deployment info like endpoints and webapp URL
Serverless: Client generation process succeeded...
Serverless: This deployment will:
Serverless: - Remove all existing files from bucket 'qcg-scanning-qa-serverless-qa-us-west-2-frontend'
Serverless: - Upload all files from 'webapp/dist/webapp' to bucket 'qcg-scanning-qa-serverless-qa-us-west-2-frontend'
/bin/sh: tput: not found
?
D
o
y
o
u
w
a
n
t
t
o
p
r
o
c
e
e
d
?
(
Y
/
n
)
2019-09-14T11:22:34.853107054Z stdout P
How can I proceed automatically?
According to serverless documentation shared API Gateway can be used by defining restApiId and restApiRootResourceId configs in provider section. It seems this plugin disregards those configs and just tries to find API Gateway definition in resources section.
@andrewphahn Could you make the change to enable shared gateway usage?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.