Component: 503 CloudFront error

[josephluck]

Hey!

I've converted my Next.js application to use the new serverless component, but I'm stuck at what seems like a configuration or permissions issue with CloudFront and the lambdas.

After deploying the app (successfully) to a custom domain, CloudFront returns the following error:

503 ERROR
The request could not be satisfied.
The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions.

Here's my serverless configuration:

name: internote-ui

app:
  component: serverless-next.js
  inputs:
    domain: ["dev", "internote.app"]

The next build runs correctly and I can run the application locally fine (in production built / serverless mode with next build).

---

From digging around I suspect that this is a IAM issue, yet I can see that there's a IAM policy between CloudFront and the edge Lambda that looks correct to me (from my admittedly limited knowledge of IAM!). I wondered if anyone else has experienced this and can offer any advice?

[danielcondemarin]

Can you paste the HTTP Response Headers from CloudFront? Might provide more information about the error.

For example:

[josephluck]

Thanks for getting back so quickly!

Here's the response headers from CloudFront:

content-length: 1217
content-type: text/html
date: Fri, 20 Sep 2019 08:14:40 GMT
server: CloudFront
status: 503
via: 1.1 87df42a5b068c9b504dcaa62529e2dfa.cloudfront.net (CloudFront)
x-amz-cf-id: T48v1ZOoIWYjs_x-_s06nR1Ji07ohCS5rA5GivlktvMF66ov4bboUA==
x-amz-cf-pop: LHR61-C1
x-cache: LambdaExecutionError from cloudfront

[josephluck]

Seeing as the issue is a LambdaExecutionError it leads me to believe that the problem is application code rather than anything to do with the Serverless component.

I suspect it may have to do with environment variables not being populated.

Closing for now, and I'll report back if the issue is anything to do with the component.

[cristiam86]

Hello, I'm also getting this error but the weird thing is that refreshing the page loads fine without any error.

Here is my response header

content-type: text/html
date: Wed, 02 Oct 2019 12:40:25 GMT
server: CloudFront
status: 503
via: 1.1 9b51ea0192df87ecb2185cd2247e4a1b.cloudfront.net (CloudFront)
x-amz-cf-id: S4ARsV1e_Oj6NX-eZJAeb8RKadcruVN_Fd8UHHkUgmkidL7SCLFMZg==
x-amz-cf-pop: MAD51-C1
x-cache: LambdaExecutionError from cloudfront

You can try it out at: https://data.enantio.com with random search. Please note that we are catching the results so if the search has been done previously, it will work fine.

[josephluck]

As a data point, the reason my app was failing was due to two things:

• I hadn't set up environment variables correctly (using the .env file instead of passing them in the CLI)
• Cookies and query strings are not passed through CloudFront to the underlying lambda. I tried to fix this in the CloudFront serverless component and subsequently in this component, but it still doesn't work correctly. If you need either of these things, I'd suggest editing the CloudFront distribution directly in the AWS console post-deploy (or even better, trying to fix the components so this happens automatically!)

[cristiam86]

Thank you @josephluck did your app also failed randomly? That's what breaks my head

[josephluck]

Thank you @josephluck did your app also failed randomly? That's what breaks my head

I didn't get any build failures or deployment failures, just that the app didn't work once it was deployed for the reasons stated above.

[jerrygreen]

Cookies and query strings are not passed through CloudFront to the underlying lambda. I tried to fix this in the CloudFront serverless component and subsequently in this component, but it still doesn't work correctly. If you need either of these things, I'd suggest editing the CloudFront distribution directly in the AWS console post-deploy (or even better, trying to fix the components so this happens automatically!)

Huh. Can you elaborate on this more? What serverless.yml did you end up with?

[PaulKushch]

@jerrygreen Having the same error, any news about a solution? Br

[jerrygreen]

@jerrygreen Having the same error, any news about a solution? Br

Short: I use Vercel instead.

Long: I don't quite remember the details, but I remember there was a problem that first deploy simply doesn't work for a while, and answers with an error, but after some time, probably like 10 min, the problem eliminates, and further deployments are done pretty much instantaneously. So there's a problem with the initial deployment only.

[danielcondemarin]

@PaulKushch What version of the project are you using? Things have moved on quite a bit since this issue was opened. Might be worth opening a new issue.

[PaulKushch]

@danielcondemarin I solved the issue. The problem was including environmental variables correctly, see #184 if you are interested. Best Regards