Add serverless example hosted on AWS Lambda #4609

priyankpat · 2018-06-14T17:29:59Z

I was able to get next.js working with serverless as requested by #4482.
This example uses with-react-i18next as a scenario where the express server is not initialized right away.

timneutkens · 2018-06-14T17:49:23Z

Can we use hello-world as a base? 🤔 To not make things overly complex.

priyankpat · 2018-06-14T19:11:37Z

@timneutkens Updated example with simple hello-world.

timneutkens

I guess the i18n code can be removed then

priyankpat

Remove i18n code from the example and updated README instructions.

timneutkens · 2018-06-15T09:19:28Z

examples/with-aws-serverless/server.js

+
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()


app.prepare() is missing here.

Skaronator · 2018-06-24T17:16:27Z

examples/with-aws-serverless/serverless.yml

+functions:
+  nextJsRootApp:
+    handler: lambda.handler
+    events:


You can merge nextJsRootApp and nextJsAnyApp events - just change the events to this:

events: - http: ANY {proxy+} + - http: ANY /

Skaronator · 2018-06-24T17:34:43Z

examples/with-aws-serverless/serverless.yml

+service: nextjs-aws-serverless
+
+package:
+  exclude:


Please add yarn.lock as well.

Skaronator · 2018-06-24T17:52:22Z

examples/with-aws-serverless/.babelrc

+    "plugins": [
+      "transform-decorators-legacy"
+    ]
+  }


Remove space before }

Skaronator · 2018-06-24T17:58:04Z

examples/with-aws-serverless/serverless.yml

+
+provider:
+  name: aws
+  runtime: nodejs6.10


You should change this to Node 8.10 (better performance & cost less)

dihmeetree · 2018-06-29T01:30:24Z

I'm assuming we'll be waiting for #4496 in order for this to work, right? :D

Skaronator · 2018-06-29T10:17:24Z

It works without #4496 like any other node.js server with next. (Just not as fast as with #4496)

dihmeetree · 2018-07-01T14:53:02Z

@Skaronator I tried to test this out.. however it didn't work? After I deployed the application and went to the site.. and tried to click the link.. it gave a "Forbidden" message? Any ideas on that?

Skaronator · 2018-07-01T15:05:14Z

Check out this repo: https://github.com/mitchellhuang/future

You need these files: lambda.js, next.config.js and server.js + serverless config

dihmeetree · 2018-07-01T16:14:05Z

@Skaronator Is the domain with the api gateway required? :)

Skaronator · 2018-07-01T16:26:00Z

Yes you need API Gateway which trigger Lambda. You can either use your own domain or use the AWS Gateway URL.

Skaronator · 2018-07-01T17:08:37Z

CloudFront is not required. (I think it doesn't even work since it is just a CDN)

Looks like you're trying to deploy mitchellhuang/future but I've never done that. Only copyed the relevant parts out of it.

dihmeetree · 2018-07-02T01:05:52Z

@Skaronator idk still couldn't get it working even after putting your stuff in.. the index page works fine..but after I click a link to go to a new route it just says Forbidden. I guess i'll just wait until an official example is released.

evenchange4 · 2018-07-02T01:28:06Z

examples/with-aws-serverless/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "react-i18next-nextjs-example",


should update the name field without i18n-next

skriems · 2018-07-26T08:31:33Z

I think I've found the culprit here @PR1YANKPAT3L . If you open up your browsers dev tools you'll notice that scripts fail to load from <url>/_next/... and the reason for that is, that the provider.stage defined in the serverless.yml file gets appended to the URL. So basically you need to use an assetPrefix here.
Since this is unique to the Lambda environment you can use an env var in your serverless.yml and have your app.setAssetPrefix in server.js based on that env var.

Note that this is not needed if you would use a custom domain via serverless-domain-manager. I'm looking into that now.

I've deployed the material-ui nextjs example to Lambda in this repo
https://github.com/skriems/next-material

Best

dihmeetree · 2018-07-27T04:57:53Z

@skriems Your repo worked great for me!

Note: To get the deployment working through Cloudfront and a custom domain, I needed to remove the following from the server.js file:

if (process.env.LAMBDA) {
  // `assetPrefix` needs to match `serverless.yml:provider.stage
  let assetPrefix = dev ? '/dev' : '/prod'
  app.setAssetPrefix(assetPrefix)
}

When setting up Cloudfront I made the Origin Domain Name the path to the function and the Origin Path either /prod or /dev.

My working version here: https://sls.vgo2x.com :)

skriems · 2018-07-28T12:26:35Z

@lolcoolkat That looks cool :)

I've updated the repo now to utilizes serverless-domain-manager for optionally using a custom domain. I had to do amendments on the server.js as well:

  server.get('*', (req, res) => {
    if (process.env.LAMBDA) {
      let host = req.headers.host;
      let assetPrefix = 'https://' + host;
      if (host.indexOf('amazonaws.com') != -1) {
        // needs to match the stages defined in `serverless.yml`
        let stage = dev ? '/dev' : '/prod'
        assetPrefix += stage;
      }
      app.setAssetPrefix(assetPrefix);
    }
    handle(req, res)}
  );

This obviously depends on having setup a domain and certificate (which imho should be mandatory nowadays so I hardcoded it here).

So only if the app is deployed on Lambda it should set an assetPrefix. Otherwise it brakes running locally. By default this can simply be the protocol and the request.headers.host. Only if you directly invoke the function from its Lambda URL, we still need to append the stage.

Now, thinking this further in case of the custom domain we should also be appending the basePath actually from the serverless.yml. I needed to specify basePath: '' there, so that the lib create a mapping from the domains root / to our deployed stage. But one might prefer to mapp /v1 to our stage like for instance we're deploying a v1 API or so.

I think I'm only updating my docs in this regard and explain the hurdles I experienced. Note that you could simply opt-out of using a custom domain by specifying enabled: false in the serverless.yml

@PR1YANKPAT3L and/or @Skaronator I could either make the necessary commits here or create a new PR if you guys have no objections.

Skaronator · 2018-07-28T12:30:55Z

Weird... I'm using a custom domain via serverless-domain-manager (not a subdomain) and everything just works without modifying the assetPrefix.

skriems · 2018-07-28T14:06:40Z

How odd. I just tried again without adding a prefix and with basePath: '' but I get those 403's. Is it related to the region and/or endpointType ?

Skaronator · 2018-07-28T14:47:45Z

Ah the execute-api.eu-central-1.amazonaws.com endpoint has a /prod which mess up the whole path while the custom domain doesn't have it. Thanks to this mapping:

skriems · 2018-07-28T14:52:29Z

exactly that's the problem. Any opinion on how this should be included/documented in the example?

Skaronator · 2018-07-28T14:54:46Z

It might be better to use Lambda@Edge instead of Lambda with APIGateway but Serverless doesn't support it yet due to a bug in CloudFormation.

serverless/serverless#4796

Enalmada · 2018-09-04T22:33:43Z

@skriems next-material serverless example worked great. If the requested changes in this pull are not being acted on promptly, can we just get that into the next.js examples section?

Also, I see a few serverless example request tickets imply that there might be good reason for a next.js example to handle the "scenario where the express server is not initialized right away." Can any of the serverless hackers in this thread confirm if a serverless example based on "with-react-i18next" would be different in any fundamental way than one based on "hello-world"? Does the next-material example use an express server not initialized right away?

It would also be considerate to provide a cautionary note for new users that serverless may not be the optimal choice for consumer facing products due to the unavoidable latency it adds. A traditional deployment can consistently return sub 50ms response time but AWS Lambda, the same example varies wildly between 150ms and 2.5s when "warm".

romainquellec · 2018-09-20T16:33:41Z

between 150ms and 2.5s when "warm".

If you have 2.5s of response time, you did something wrong with your lambda. Waiting for #4496 though !

romainquellec · 2018-09-20T16:35:41Z

also, why serverless-http over aws-serverless-express ?

Enalmada · 2018-09-20T18:43:09Z

If you have 2.5s of response time, you did something wrong with your lambda.

@romainquellec It is certainly possible and testing was extremely unscientific. So everyone can do their own testing I will elaborate slightly: If I refresh my serverless next.js example quickly (once a second) the responses definitely tend to average closer to 150ms. I think this indicates my lambda was fine. If I wait a few minutes between each refresh (small enough interval that containers should be warm, trying to replicate my actual site traffic pattern), responses vary wildly between 150ms and 2.5s. I assume amazon knows my traffic pattern is insignificant and not giving me a "keep warm" status. YMMV and this is just food for thought as I was just messing around. (There does seem to be some evidence that warm up just reduces chances of cold start)

timneutkens · 2018-12-10T15:55:16Z

I'm going to close this PR in favor of the work we're doing towards making Next.js output single-route lambdas.

Add Next.js serverless example hosted on AWS Lambda

55692a8

Simplify base code with hello-world

a1eec93

timneutkens requested changes Jun 14, 2018

View reviewed changes

Priyank Patel added 2 commits June 14, 2018 18:07

Remove i18n code

528b9ed

Update README

4f68ddc

priyankpat commented Jun 14, 2018

View reviewed changes

timneutkens reviewed Jun 15, 2018

View reviewed changes

Skaronator suggested changes Jun 24, 2018

View reviewed changes

Skaronator reviewed Jun 24, 2018

View reviewed changes

examples/with-aws-serverless/serverless.yml

service: nextjs-aws-serverless

package:

exclude:

Copy link

Contributor

Skaronator Jun 24, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add yarn.lock as well.

Skaronator reviewed Jun 24, 2018

View reviewed changes

examples/with-aws-serverless/.babelrc

"plugins": [

"transform-decorators-legacy"

]

}

Copy link

Contributor

Skaronator Jun 24, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove space before }

Skaronator suggested changes Jun 24, 2018

View reviewed changes

evenchange4 reviewed Jul 2, 2018

View reviewed changes

timneutkens closed this Dec 10, 2018

lock bot locked as resolved and limited conversation to collaborators Dec 10, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add serverless example hosted on AWS Lambda #4609

Add serverless example hosted on AWS Lambda #4609

priyankpat commented Jun 14, 2018

timneutkens commented Jun 14, 2018

priyankpat commented Jun 14, 2018

timneutkens left a comment

priyankpat left a comment

timneutkens Jun 15, 2018

Skaronator Jun 24, 2018

Skaronator Jun 24, 2018

Skaronator Jun 24, 2018

Skaronator Jun 24, 2018

dihmeetree commented Jun 29, 2018

Skaronator commented Jun 29, 2018

dihmeetree commented Jul 1, 2018

Skaronator commented Jul 1, 2018 •

edited

Loading

dihmeetree commented Jul 1, 2018

Skaronator commented Jul 1, 2018

Skaronator commented Jul 1, 2018

dihmeetree commented Jul 2, 2018

evenchange4 Jul 2, 2018

skriems commented Jul 26, 2018 •

edited

Loading

dihmeetree commented Jul 27, 2018 •

edited

Loading

skriems commented Jul 28, 2018 •

edited

Loading

Skaronator commented Jul 28, 2018

skriems commented Jul 28, 2018

Skaronator commented Jul 28, 2018

skriems commented Jul 28, 2018

Skaronator commented Jul 28, 2018 •

edited

Loading

Enalmada commented Sep 4, 2018 •

edited

Loading

romainquellec commented Sep 20, 2018

romainquellec commented Sep 20, 2018

Enalmada commented Sep 20, 2018 •

edited

Loading

timneutkens commented Dec 10, 2018

Add serverless example hosted on AWS Lambda #4609

Add serverless example hosted on AWS Lambda #4609

Conversation

priyankpat commented Jun 14, 2018

timneutkens commented Jun 14, 2018

priyankpat commented Jun 14, 2018

timneutkens left a comment

Choose a reason for hiding this comment

priyankpat left a comment

Choose a reason for hiding this comment

timneutkens Jun 15, 2018

Choose a reason for hiding this comment

Skaronator Jun 24, 2018

Choose a reason for hiding this comment

Skaronator Jun 24, 2018

Choose a reason for hiding this comment

Skaronator Jun 24, 2018

Choose a reason for hiding this comment

Skaronator Jun 24, 2018

Choose a reason for hiding this comment

dihmeetree commented Jun 29, 2018

Skaronator commented Jun 29, 2018

dihmeetree commented Jul 1, 2018

Skaronator commented Jul 1, 2018 • edited Loading

dihmeetree commented Jul 1, 2018

Skaronator commented Jul 1, 2018

Skaronator commented Jul 1, 2018

dihmeetree commented Jul 2, 2018

evenchange4 Jul 2, 2018

Choose a reason for hiding this comment

skriems commented Jul 26, 2018 • edited Loading

dihmeetree commented Jul 27, 2018 • edited Loading

skriems commented Jul 28, 2018 • edited Loading

Skaronator commented Jul 28, 2018

skriems commented Jul 28, 2018

Skaronator commented Jul 28, 2018

skriems commented Jul 28, 2018

Skaronator commented Jul 28, 2018 • edited Loading

Enalmada commented Sep 4, 2018 • edited Loading

romainquellec commented Sep 20, 2018

romainquellec commented Sep 20, 2018

Enalmada commented Sep 20, 2018 • edited Loading

timneutkens commented Dec 10, 2018

Skaronator commented Jul 1, 2018 •

edited

Loading

skriems commented Jul 26, 2018 •

edited

Loading

dihmeetree commented Jul 27, 2018 •

edited

Loading

skriems commented Jul 28, 2018 •

edited

Loading

Skaronator commented Jul 28, 2018 •

edited

Loading

Enalmada commented Sep 4, 2018 •

edited

Loading

Enalmada commented Sep 20, 2018 •

edited

Loading