CloudFront Support (#95)

* feat: add cloudfront support
serverless-nextjs · Jun 30, 2019 · d57756e · d57756e
1 parent e55ffc2
commit d57756e
Show file tree

Hide file tree

Showing 8 changed files with 487 additions and 330 deletions.
diff --git a/README.md b/README.md
@@ -17,6 +17,7 @@ The plugin targets [Next 8 serverless mode](https://nextjs.org/blog/next-8/#serv
 - [Motivation](#motivation)
 - [Getting Started](#getting-started)
 - [Hosting static assets](#hosting-static-assets)
+- [Serving static assets](#serving-static-assets)
 - [Deploying](#deploying)
 - [Deploying a single page](#deploying-a-single-page)
 - [Overriding page configuration](#overriding-page-configuration)
@@ -116,8 +117,6 @@ custom:
     assetsBucketName: "your-bucket-name"
 ```
 
-With this approach you could have a CloudFront distribution in front of the bucket and use a custom domain in the assetPrefix.
-
 ## Serving static assets
 
 Static files can be served by [following the NextJs convention](https://github.com/zeit/next.js/#static-file-serving-eg-images) of using a `static` and `public` folder.
@@ -136,6 +135,23 @@ To serve static files from the root directory you can add a folder called public
 
 Note that for this to work, an S3 bucket needs to be provisioned as per [hosting-static-assets](#hosting-static-assets).
 
+**For production deployments, enabling CloudFront is recommended:**
+
+```yml
+# serverless.yml
+plugins:
+  - serverless-nextjs-plugin
+
+custom:
+  serverless-nextjs:
+    assetsBucketName: "your-bucket-name"
+    cloudFront: true
+```
+
+By doing this, a CloudFront distribution will be created in front of your next application to serve any static assets from S3 and the pages from Api Gateway.
+
+Note that deploying the stack for the first time will take considerably longer, as CloudFront takes time propagating the changes, typically 10 - 20mins.
+
 ## Deploying
 
 `serverless deploy`

diff --git a/packages/serverless-nextjs-plugin/README.md b/packages/serverless-nextjs-plugin/README.md
@@ -10,22 +10,23 @@ A [serverless framework](https://serverless.com/) plugin to deploy nextjs apps.
 
 The plugin targets [Next 8 serverless mode](https://nextjs.org/blog/next-8/#serverless-nextjs)
 
-![demo](../../demo.gif)
+![demo](./demo.gif)
 
 ## Contents
 
 - [Motivation](#motivation)
 - [Getting Started](#getting-started)
 - [Hosting static assets](#hosting-static-assets)
+- [Serving static assets](#serving-static-assets)
 - [Deploying](#deploying)
 - [Deploying a single page](#deploying-a-single-page)
 - [Overriding page configuration](#overriding-page-configuration)
 - [Custom page routing](#custom-page-routing)
 - [Custom error page](#custom-error-page)
 - [Custom lambda handler](#custom-lambda-handler)
 - [All plugin configuration options](#all-plugin-configuration-options)
-- [Caveats](#caveats)
 - [Examples](#examples)
+- [Caveats](#caveats)
 - [Contributing](#contributing)
 
 ## Motivation
@@ -116,20 +117,40 @@ custom:
     assetsBucketName: "your-bucket-name"
 ```
 
-With this approach you could have a CloudFront distribution in front of the bucket and use a custom domain in the assetPrefix.
+## Serving static assets
+
+Static files can be served by [following the NextJs convention](https://github.com/zeit/next.js/#static-file-serving-eg-images) of using a `static` and `public` folder.
+
+From your code you can then reference those files with a `/static` URL:
+
+```
+function MyImage() {
+  return <img src="/static/my-image.png" alt="my image" />
+}
+
+export default MyImage
+```
+
+To serve static files from the root directory you can add a folder called public and reference those files from the root, e.g: /robots.txt.
+
+Note that for this to work, an S3 bucket needs to be provisioned as per [hosting-static-assets](#hosting-static-assets).
 
-If you need the static assets available in the main domain of your application, you can use the `routes` configuration to proxy API Gateway requests to S3. For example, to host `/robots.txt`:
+**For production deployments, enabling CloudFront is recommended:**
 
 ```yml
+# serverless.yml
+plugins:
+  - serverless-nextjs-plugin
+
 custom:
   serverless-nextjs:
-    staticDir: ./assets
-    routes:
-      - src: ./assets/robots.txt
-        path: robots.txt
+    assetsBucketName: "your-bucket-name"
+    cloudFront: true
 ```
 
-Note that for this to work, an S3 bucket needs to be provisioned by using the `assetsBucketName` plugin config or `assetPrefix` in `next.config.js`.
+By doing this, a CloudFront distribution will be created in front of your next application to serve any static assets from S3 and the pages from Api Gateway.
+
+Note that deploying the stack for the first time will take considerably longer, as CloudFront takes time propagating the changes, typically 10 - 20mins.
 
 ## Deploying
 
@@ -312,15 +333,13 @@ module.exports = page => {
 
 ## All plugin configuration options
 
-| Plugin config key | Default Value | Description                                                                                                                                                                                                                      |
-| ----------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| nextConfigDir     | ./            | Path to parent directory of `next.config.js`.                                                                                                                                                                                    |
-| assetsBucketName  | \<empty\>     | Creates an S3 bucket with the name provided. The bucket will be used for uploading next static assets.                                                                                                                           |
-| staticDir         | \<empty\>     | Directory with static assets to be uploaded to S3, typically a directory named `static`, but it can be any other name. Requires a bucket provided via the `assetPrefix` described above or the `assetsBucketName` plugin config. |
-| routes            | []            | Array of custom routes for the next pages or static assets.                                                                                                                                                                      |
-| customHandler     | \<empty\>     | Path to your own lambda handler.                                                                                                                                                                                                 |
-| uploadBuildAssets | true          | In the unlikely event that you only want to upload `static` or `public` dirs, set this to `false`.                                                                                                                               |
-|  |
+| Plugin config key | Default Value | Description                                                                                            |
+| ----------------- | ------------- | ------------------------------------------------------------------------------------------------------ |
+| nextConfigDir     | ./            | Path to parent directory of `next.config.js`.                                                          |
+| assetsBucketName  | \<empty\>     | Creates an S3 bucket with the name provided. The bucket will be used for uploading next static assets. |
+| routes            | []            | Array of custom routes for the next pages.                                                             |
+| customHandler     | \<empty\>     | Path to your own lambda handler.                                                                       |
+| uploadBuildAssets | true          | In the unlikely event that you only want to upload `static` or `public` dirs, set this to `false`.     |
 
 ## Caveats
 

diff --git a/packages/serverless-nextjs-plugin/index.js b/packages/serverless-nextjs-plugin/index.js
@@ -51,7 +51,8 @@ class ServerlessNextJsPlugin {
     const defaults = {
       routes: [],
       nextConfigDir: "./",
-      uploadBuildAssets: true
+      uploadBuildAssets: true,
+      cloudFront: false
     };
 
     const userConfig = this.serverless.service.custom["serverless-nextjs"][