部署在AWS CloudFront中的next-i18next跟踪错误ENOENT：无此类文件或目录，scandir'/ var / task / public / static /'

如何解决部署在AWS CloudFront中的next-i18next跟踪错误ENOENT：无此类文件或目录，scandir'/ var / task / public / static /'

，它使用next-i18next模块。在我的本地服务器上，这很好！用于多语言应用程序。问题是当我将此应用程序作为无服务器应用程序部署到CloudFront时。在我的CloudWatch日志中，我可以看到：

<!DOCTYPE html>
<html>
<head>
<Meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>

<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Phasellus imperdiet,nulla et dictum interdum,nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est,ultrices nec congue eget,auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi,sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet,sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

</body>
</html>

我的i18n.js是这样的：

da9949dd-1822-4d5c-b0d3-aeb56b6468ee    ERROR   Invoke Error    
{
    "errorType": "Error","errorMessage": "ENOENT: no such file or directory,scandir '/var/task/public/static/locales/es'","code": "ENOENT","errno": -2,"syscall": "scandir","path": "/var/task/public/static/locales/es","stack": [
        "Error: ENOENT: no such file or directory,"    at Object.readdirsync (fs.js:955:3)","    at getAllNamespaces (/var/task/pages/index.js:53691:19)","    at createConfig (/var/task/pages/index.js:53696:27)","    at new NextI18Next (/var/task/pages/index.js:66340:48)","    at Object.k7Sn (/var/task/pages/index.js:54121:18)","    at __webpack_require__ (/var/task/pages/index.js:31:31)","    at Module.IlR1 (/var/task/pages/index.js:24470:12)","    at Module.NIeY (/var/task/pages/index.js:27944:17)","    at __webpack_require__ (/var/task/pages/index.js:31:31)"
    ]
}

2020-10-23T18:56:15.679Z da9949dd-182

我的next.config.js文件是这样的：

const NextI18Next = require('next-i18next').default
const { localeSubPaths } = require('next/config').default().publicRuntimeConfig
const path = require('path')
path.resolve('./public/static/locales');

module.exports = new NextI18Next({
  otherLanguages: ['en'],localeSubPaths,defaultLanguage: process.env.NEXT_PUBLIC_MAIN_LANG,localePath: path.resolve('./public/static/locales')
})

请帮忙吗？如何避免此错误？

const withSass = require("@zeit/next-sass");

const localeCountries = [
     { label: 'es',name: 'España',lang: 'es' },{ label: 'uk',name: 'United Kingdom',lang: 'en' },{ label: 'mx',name: 'México',lang: 'es' }
];
const localeSubPaths = {
     es: 'es',en: 'en'
};
// Extend your Next config for advanced behavior
// See https://nextjs.org/docs/api-reference/next.config.js/introduction
let nextConfig = {
     serverRuntimeConfig: {
          PROJECT_ROOT: __dirname
     },publicRuntimeConfig: {
          localeCountries,staticFolder: '/static',}
};

// Add the Next SASS plugin
nextConfig = withSass(nextConfig);

module.exports = nextConfig;

解决方法

您的/public/static/locales/es文件未添加到默认lambda函数源代码中。假设您正在使用@sls-next/serverless-component无服务器组件来部署Next.js基础设施，我遇到了同样的问题。我在@dphang的GitHub存储库问题帮助下解决了该问题。现在postBuildCommands输入中支持serverless.yml。这些将在构建您的应用程序之后并在部署它之前运行。修改您的代码，如下所示：

serverless.yml

myNextApp:
  component: "@sls-next/serverless-component@1.19.0-alpha.0"
  inputs:
    timeout: 30
    build:
      postBuildCommands: ["node serverless-post-build.js"]
  memory: 1024

添加构建后脚本以将文件复制到以下位置：

serverless-post-build.js

// post-build.js
const fs = require("fs-extra");
console.log("-> Copying locales directory...");
// Path to locales directory
const localeSrc = "./static/locales";
// Path to default-lambda destination
const localeDest = "./.serverless_nextjs/default-lambda/static/locales";
// Copy Files over recursively
fs.copySync(localeSrc,localeDest,{ recursive: true });
console.log("Locale directory was copied successfully");

您将需要针对您的用例编辑以上脚本：

// post-build.js
const fs = require("fs-extra");
console.log("-> Copying locales directory...");
// Path to locales directory
const localeSrc = "./public/static/locales";
// Path to default-lambda destination
const localeDest = "./.serverless_nextjs/default-lambda/public/static/locales";
// Copy Files over recursively
fs.copySync(localeSrc,{ recursive: true });
console.log("Locale directory was copied successfully");