Access denied for translation files in aws s3

So. First, hello, and thanks a lot for your hard work 😃

I am trying to create a POC for an ecommerce. We use Next.JS, and are trying to deploy on serverless. Everything was working fine until I add next-i18next.

At this point, I have the same problem as in #383 . I use the workaround described by @loukmane-issa in his comment, which partially solve the problem: lambda can access at runtime to translation files.

Describe the bug

Browser side, it looks like my application cannot fetch translations (JSON files). XHR request result to the this error:

GET https://{id}.cloudfront.net/static/locales/en/common.json

<?xml version="1.0" encoding="UTF-8"?>
<Error>
   <Code>AccessDenied</Code>
   <Message>Access Denied</Message>
   <RequestId>26D0CBE52D5ACE40</RequestId>
   <HostId>{id}</HostId>
</Error>

In my s3 management console, I can see that translations files exist:

_next/
public/
  static/
    locales/
      en/
      de/

I have also check the manifest.json and I can see that translation files are availables :

❯ cat .serverless_nextjs/default-lambda/manifest.json | json_pp
{
   // ...
   "publicFiles" : {
      "/static/locales/de/common.json" : "static/locales/de/common.json",
      "/static/locales/en/common.json" : "static/locales/en/common.json",
      "/favicon.ico" : "favicon.ico",
      "/vercel.svg" : "vercel.svg"
   },
   // ...
}

Expected behavior

GET https://{id}.cloudfront.net/static/locales/en/common.json

Fetching this url retrieve the JSON.

I think this is related to permissions, but not sure how to solve that problem.

Steps to reproduce

Well, it’s very hard to tell because it looks like it’s related to some build configuration. I can provide a repo, but without aws access. If it can help you just tell me, and I’ll do it.

Screenshots/Code/Logs

Versions

• OS/Environment: MacOS

• @sls-next/serverless-component version: 1.15.0-alpha.2

• Next.js version: 9.5.5

• next-i18next version: “^6.0.3”,

• You have reviewed the README and FAQs, which answers several common questions.

• Please first try using the latest @sls-next/serverless-component release version, which may have already fixed your issue. Note that the old serverless-next.js component and the serverless-next.js plugin are deprecated and no longer maintained.

[dphang]

@doliG yeah, I have added a build failure when it detects this since it conflicts.

[dphang]

Actually I think this is intentional, so I won’t make any change yet. If you have static folder at base of your Next app (outside of public), it gets uploaded to s3 into static path. So it will be accessible to CloudFront -> S3 directly without having to use the handler to do routing. For stuff in public folder, the handler is needed to route those files at root of the domain.

The proper way, at least for the later versions (not sure if old version you are using is working correctly), is to do one of the following:

1. Put assets in static folder at root of your Next.js app. Then this is uploaded directly to S3 in static key and CloudFront can access directly from S3 without using Lambda handler. (static/* behavior does not have handler attached to it).
2. Put assets in public folder but don’t put in public/static. Because the problem is it will generate a route static/* for public files, and this conflicts with the static/* cache behavior, so it will never be able to route correctly.

The difference between 1 and 2 is the use of the handler - if you use the handler there is potentially a bit more overhead due to Lambda cold starts.

I guess one fix is to fail the build if it detects any assets in public/static as that cannot be routed correctly.