Enable CloudFront Compression for web assets

README.md

@@ -63,6 +63,7 @@ custom:
     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
+    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 
     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
@@ -301,6 +302,22 @@ If true 403 errors will be rerouted (missing assets) to your root index document
 
 ---
 
+**compressWebContent**
+
+_optional_, default: `true`
+
+```yaml
+custom:
+  fullstack:
+    ...
+    compressWebContent: true
+    ...
+```
+
+Instruct CloudFront to use compression when serving web content, see [Serving Compressed Files](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html) in the Amazon CloudFront Developer Guide.
+
+---
+
 **clientCommand**
 
 _optional_, default: `not set`

index.js

@@ -280,6 +280,7 @@ class ServerlessFullstackPlugin {
         this.prepareSinglePageApp(resources.Resources);
         this.prepareS3(resources.Resources);
         this.prepareMinimumProtocolVersion(distributionConfig);
+        this.prepareCompressWebContent(distributionConfig);
 
     }
 
@@ -449,6 +450,12 @@ class ServerlessFullstackPlugin {
         resources.WebAppS3Bucket.Properties.WebsiteConfiguration.ErrorDocument = errorDocument;
     }
 
+    prepareCompressWebContent(distributionConfig) {
+        const compressWebContent = this.getConfig('compressWebContent', true);
+
+        distributionConfig.DefaultCacheBehavior.Compress = compressWebContent;
+    }
+
     getBucketName(bucketName) {
         const stageBucketName = `${this.serverless.service.service}-${this.getStage()}-${bucketName}`;
         return stageBucketName;

lib/resources/resources.yml

@@ -99,6 +99,8 @@ Resources:
             - GET
             - HEAD
             - OPTIONS
+          ## Compress web content: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html
+          Compress: true
           ## The origin id defined above
           TargetOriginId: WebApp
           ## Defining if and how the QueryString and Cookies are forwarded to the origin which in this case is S3