Skip to content
This repository was archived by the owner on Jan 28, 2025. It is now read-only.

Commit d57756e

Browse files
danielcondemarindanielcondemarin
authored
CloudFront Support (#95)
* feat: add cloudfront support
1 parent e55ffc2 commit d57756e

File tree

8 files changed

+487
-330
lines changed

8 files changed

+487
-330
lines changed

‎README.md

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ The plugin targets [Next 8 serverless mode](https://nextjs.org/blog/next-8/#serv
1717
- [Motivation](#motivation)
1818
- [Getting Started](#getting-started)
1919
- [Hosting static assets](#hosting-static-assets)
20+
- [Serving static assets](#serving-static-assets)
2021
- [Deploying](#deploying)
2122
- [Deploying a single page](#deploying-a-single-page)
2223
- [Overriding page configuration](#overriding-page-configuration)
@@ -116,8 +117,6 @@ custom:
116117
assetsBucketName: "your-bucket-name"
117118
```
118119

119-
With this approach you could have a CloudFront distribution in front of the bucket and use a custom domain in the assetPrefix.
120-
121120
## Serving static assets
122121

123122
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
136135

137136
Note that for this to work, an S3 bucket needs to be provisioned as per [hosting-static-assets](#hosting-static-assets).
138137

138+
**For production deployments, enabling CloudFront is recommended:**
139+
140+
```yml
141+
# serverless.yml
142+
plugins:
143+
- serverless-nextjs-plugin
144+
145+
custom:
146+
serverless-nextjs:
147+
assetsBucketName: "your-bucket-name"
148+
cloudFront: true
149+
```
150+
151+
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.
152+
153+
Note that deploying the stack for the first time will take considerably longer, as CloudFront takes time propagating the changes, typically 10 - 20mins.
154+
139155
## Deploying
140156

141157
`serverless deploy`

‎packages/serverless-nextjs-plugin/README.md

Lines changed: 37 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,23 @@ A [serverless framework](https://serverless.com/) plugin to deploy nextjs apps.
1010

1111
The plugin targets [Next 8 serverless mode](https://nextjs.org/blog/next-8/#serverless-nextjs)
1212

13-
![demo](../../demo.gif)
13+
![demo](./demo.gif)
1414

1515
## Contents
1616

1717
- [Motivation](#motivation)
1818
- [Getting Started](#getting-started)
1919
- [Hosting static assets](#hosting-static-assets)
20+
- [Serving static assets](#serving-static-assets)
2021
- [Deploying](#deploying)
2122
- [Deploying a single page](#deploying-a-single-page)
2223
- [Overriding page configuration](#overriding-page-configuration)
2324
- [Custom page routing](#custom-page-routing)
2425
- [Custom error page](#custom-error-page)
2526
- [Custom lambda handler](#custom-lambda-handler)
2627
- [All plugin configuration options](#all-plugin-configuration-options)
27-
- [Caveats](#caveats)
2828
- [Examples](#examples)
29+
- [Caveats](#caveats)
2930
- [Contributing](#contributing)
3031

3132
## Motivation
@@ -116,20 +117,40 @@ custom:
116117
assetsBucketName: "your-bucket-name"
117118
```
118119

119-
With this approach you could have a CloudFront distribution in front of the bucket and use a custom domain in the assetPrefix.
120+
## Serving static assets
121+
122+
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.
123+
124+
From your code you can then reference those files with a `/static` URL:
125+
126+
```
127+
function MyImage() {
128+
return <img src="/static/my-image.png" alt="my image" />
129+
}
130+
131+
export default MyImage
132+
```
133+
134+
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.
135+
136+
Note that for this to work, an S3 bucket needs to be provisioned as per [hosting-static-assets](#hosting-static-assets).
120137

121-
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`:
138+
**For production deployments, enabling CloudFront is recommended:**
122139

123140
```yml
141+
# serverless.yml
142+
plugins:
143+
- serverless-nextjs-plugin
144+
124145
custom:
125146
serverless-nextjs:
126-
staticDir: ./assets
127-
routes:
128-
- src: ./assets/robots.txt
129-
path: robots.txt
147+
assetsBucketName: "your-bucket-name"
148+
cloudFront: true
130149
```
131150

132-
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`.
151+
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.
152+
153+
Note that deploying the stack for the first time will take considerably longer, as CloudFront takes time propagating the changes, typically 10 - 20mins.
133154

134155
## Deploying
135156

@@ -312,15 +333,13 @@ module.exports = page => {
312333

313334
## All plugin configuration options
314335

315-
| Plugin config key | Default Value | Description |
316-
| ----------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
317-
| nextConfigDir | ./ | Path to parent directory of `next.config.js`. |
318-
| assetsBucketName | \<empty\> | Creates an S3 bucket with the name provided. The bucket will be used for uploading next static assets. |
319-
| 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. |
320-
| routes | [] | Array of custom routes for the next pages or static assets. |
321-
| customHandler | \<empty\> | Path to your own lambda handler. |
322-
| uploadBuildAssets | true | In the unlikely event that you only want to upload `static` or `public` dirs, set this to `false`. |
323-
| |
336+
| Plugin config key | Default Value | Description |
337+
| ----------------- | ------------- | ------------------------------------------------------------------------------------------------------ |
338+
| nextConfigDir | ./ | Path to parent directory of `next.config.js`. |
339+
| assetsBucketName | \<empty\> | Creates an S3 bucket with the name provided. The bucket will be used for uploading next static assets. |
340+
| routes | [] | Array of custom routes for the next pages. |
341+
| customHandler | \<empty\> | Path to your own lambda handler. |
342+
| uploadBuildAssets | true | In the unlikely event that you only want to upload `static` or `public` dirs, set this to `false`. |
324343

325344
## Caveats
326345

‎packages/serverless-nextjs-plugin/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ class ServerlessNextJsPlugin {
5151
const defaults = {
5252
routes: [],
5353
nextConfigDir: "./",
54-
uploadBuildAssets: true
54+
uploadBuildAssets: true,
55+
cloudFront: false
5556
};
5657

5758
const userConfig = this.serverless.service.custom["serverless-nextjs"][

0 commit comments

Comments
 (0)