es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La detección de lenguaje en la ruta y la cadena de consulta funciona incorrectamente en el bucket de AWS S3.

Estoy trabajando en una aplicación web de React y uso i18n y i18next-browser-languagedetector para la traducción de la aplicación. En mi entorno local todo funciona bien, incluso en el servidor todo funciona de la misma manera. Pero tengo un problema en el bucket de aws s3. Después de construir mi proyecto de React y cargarlo en el bucket de s3, i18n deja de funcionar correctamente.

Soy un usuario nuevo en AWS, así que tal vez esté haciendo algo mal, lo siento por eso.

Mi configuración de bucket de s3:

Hosting de sitio web estático con las siguientes reglas de redireccionamiento

[
{
"Condition": {
"HttpErrorCodeReturnedEquals": "404"
},
"Redirect": {
"HostName": "my-bucket-name.s3-website-sa-east-1.amazonaws.com",
"ReplaceKeyPrefixWith": "#!/"
}
},
{
"Condition": {
"HttpErrorCodeReturnedEquals": "403"
},
"Redirect": {
"HostName": "my-bucket-name.s3-website-sa-east-1.amazonaws.com",
"ReplaceKeyPrefixWith": "#!/"
}
}
]

Primero paso el idioma actual en la ruta como my-bucket-name.s3-website-sa-east-1.amazonaws.com/en/ pero cuando cargo la aplicación web siempre veo el idioma detectado en incluso si establezco otro idioma en la ruta. Luego intenté poner el idioma en la cadena de consulta como my-bucket-name.s3-website-sa-east-1.amazonaws.com/?lang=en y me enfrenté al mismo comportamiento erróneo. captura de pantalla de la consola
Mi archivo i18n.

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
const options = {
order: ['querystring'],
lookupQuerystring: 'lng',
};
const languages = ["en", "pt"]

i18n.use(LanguageDetector).init({
detection: options,
resources: {…},
fallbackLng: "en",
debug: true,
whitelist: languages,
checkWhitelist: true ,
ns: ["translations"],
defaultNS: "translations",
keySeparator: false,
interpolation: {
escapeValue: false,
formatSeparator: ","
},
react: {
wait: true
}
});

export default i18n;

También intenté establecer el idioma de reserva en pt y en este caso en el bucket de aws s3 siempre se detectó como pt incluso si establecí en la ruta o en la cadena de consulta en.

Entonces siempre está utilizando el idioma de reserva por alguna razón.

¿Por qué la detección de idioma puede no funcionar en el bucket de aws s3? ¿Tal vez alguien se enfrentó a un problema similar?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Es posible que la detección de idioma no esté funcionando en el depósito AWS S3 debido a las reglas de redirección que ha configurado. Es posible que estas reglas estén interfiriendo con el script de detección de idioma, lo que resulta en que siempre detecte el idioma de reserva.

    Una posible solución es intentar establecer las reglas de redirección para que se apliquen solo a archivos que no existen, en lugar de a todos los errores 404 y 403. Esto se puede hacer modificando las reglas a:

    [
        {
            "Condition": {
                "KeyPrefixEquals": "/"
            },
            "Redirect": {
                "HostName": "my-bucket-name.s3-website-sa-east-1.amazonaws.com",
                "ReplaceKeyPrefixWith": "#!/en/"
            }
        }
    ]
    

    Esta regla solo se aplicará si la URL no contiene un nombre de archivo o una ruta de directorio, y se redirigirá a la versión en inglés de la aplicación de forma predeterminada.

    Además, puede ser útil verificar que el idioma se esté pasando correctamente en la cadena de consulta o en la ruta mediante la verificación de las solicitudes de la red en la consola de desarrollador. Esto puede ayudar a identificar problemas con la codificación o el análisis de URL.

    Finalmente, puede valer la pena considerar el uso de un método diferente para compartir la aplicación, como el uso de un servidor web o un servicio de hosting diferente que no requiere estas reglas de redirección. Esto puede ayudar a evitar cualquier conflicto con el script de detección de idioma y asegurar que la aplicación funcione como se pretende.

Comments are closed.