从s3bucket加载i18n翻译

Question

我正在使用我的react应用程序中的i18n模块，该应用程序作为S3上的一个应用程序(我将其称为实时应用程序)托管，cloudfront位于其前面。

我希望将s3 url存储在一个配置文件中，以避免将其硬编码到我的应用程序中，以便我在开发时可以针对本地存储在public/locales文件夹中的翻译文件进行操作。

最初，我对后端选项进行了设置，以便它总是尝试在locales路径中查找文件。这在本地有效，但在S3上停止工作，尽管locales文件夹存在于S3存储桶中。我还注意到，应用程序没有发送检索翻译文件的请求。

backend: {
    loadPath: 'locales'
  }

然后，我决定将翻译文件上传到另一个S3存储桶中，并在那里托管它们，看看这是否可以解决这个问题。我更改了配置，对s3存储桶路径进行了硬编码。这在本地和实时应用程序上都有效。但是这意味着我不能使用我的配置文件来确定loadPath选项。

 backend: {
    loadPath: '<myhardcoded-s3-bucket-url>/{{lng}}/translation.json',
    crossDomain: true
  }

然后，我认为我可以在适当的位置构建url：

/*global AWS_CONFIG */
/*eslint no-undef: "error"*/
...
...
...
backend: {
    loadPath: `${AWS_CONFIG.aws_app_translations_path}/{{lng}}/translation.json`,
    crossDomain: true
  }

奇怪的是，当AWS_CONFIG.aws_app_translations_path既是http://localhost:3000/locales又是<myhardcoded-s3-bucket-url>时，这在本地也是有效的。然而，一旦我把它推向现实，它又失败了。例如，这一次向https://<my-apps-base-path>/undefined/en-GB/translation.json发出请求。因此，它尝试使用应用程序路径并附加我在loadPath中定义的内容。

然后我发现我可以将loadPath作为一个函数来构造我的url。这对live应用程序也不起作用，但在本地也能用。

backend: {
    loadPath: function (lng) {
      return `${AWS_CONFIG.aws_app_translations_path}/${lng}/translation.json`
    },
    crossDomain: true
  }

这是我的整个i18n文件

/*global AWS_CONFIG */
/*eslint no-undef: "error"*/
import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";


const options = {
  order: ['navigator', 'localStorage'],
  caches: ['localStorage'],
  fallbackLng: "en-GB",
  debug: true,
  interpolation: {
    escapeValue: false // not needed for react as it escapes by default
  },
  backend: {
    loadPath: function (lng) {
      return `${AWS_CONFIG.aws_app_translations_path}/${lng}/translation.json`
    },
    crossDomain: true
  }
}

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init(options);

export default i18n;

该如何解释这种奇怪的行为呢？这里是不是缺少配置？

Answer 1

根据你在评论中的回复，看起来你遗漏了翻译部分，它在url中预先附加了undefined作为名称空间。

试试这个：

// i18n

const options = {
  order: ['navigator', 'localStorage'],
  caches: ['localStorage'],
  fallbackLng: "en-GB",
  debug: true,
  interpolation: {
    escapeValue: false // not needed for react as it escapes by default
  },
  backend: {
    loadPath: function () {
      return `${AWS_CONFIG.aws_app_translations_path}/{{lng}}/{{ns}}.json`
    },
    crossDomain: true
  }
}

基于loadPath配置文档：

返回从中加载资源的路径或返回路径的函数：

( lng，命名空间){ customPath；}返回的路径将插入lng，ns，如果提供的方式类似于提供静态路径

Answer 2

一旦我改变了导入配置文件的方式，它就起作用了。我猜是在live上有加载问题，但我已经将我的i18n文件从

/*global AWS_CONFIG */
/*eslint no-undef: "error"*/
import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";


const options = {
  order: ['navigator', 'localStorage'],
  caches: ['localStorage'],
  fallbackLng: "en-GB",
  debug: true,
  interpolation: {
    escapeValue: false // not needed for react as it escapes by default
  },
  backend: {
    loadPath: function (lng) {
      return `${AWS_CONFIG.aws_app_translations_path}/${lng}/translation.json`
    },
    crossDomain: true
  }
}

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init(options);

export default i18n;

至

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";
import {config} from './config';

const {aws_app_translations_path} = config;


const options = {
  order: ['navigator', 'localStorage'],
  caches: ['localStorage'],
  fallbackLng: "en-GB",
  debug: true,
  defaultNS: 'translation',
  load: 'currentOnly',
  interpolation: {
    escapeValue: false // not needed for react as it escapes by default
  },
  backend: {
    loadPath: (lng, ns) => {
      return `${aws_app_translations_path}/${lng}/${ns}.json`;
    },
    crossDomain: true
  }
}

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init(options);

export default i18n;

修好了。最初，AWS_CONFIG被返回为未定义的，尽管在整个应用程序的其余部分都可以工作。将配置文件更改为位于项目的根目录中，并采用导入的方式解决了此问题。