Cómo acceder a las claves API de Next.js en AWS Amplify.
Estoy muy confundido acerca de cómo establecer y acceder a las claves API en una aplicación Next.js dentro de un proyecto de AWS Amplify.
El escenario es el siguiente: tengo una clave de API privada que obtiene datos de una API. Obviamente, esta es una clave secreta y no quiero compartirla en mi repositorio de GitHub ni en el navegador. Creo un archivo .env.local y coloco mi clave secreta allí.
API_KEY="qwerty123"
Soy capaz de acceder a esta clave en mi código utilizando process.env.API_KEY.
Aquí hay un ejemplo de solicitud fetch con esa clave API: `https://developer.nps.gov/api/v1/parks?${parkCode}&api_key=${process.env.API_KEY}`.
Esto funciona perfectamente cuando ejecuto yarn dev y yarn build -> yarn start.
Este es el mensaje que obtengo cuando ejecuto yarn start:
next start
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from /Users/tmo/Desktop/Code/projects/visit-national-parks/.env.local
El archivo de entorno se carga y se puede llamar en mi máquina local.
Sin embargo,
Cuando subo este código a GitHub y inicio el proceso de compilación en AWS Amplify, la aplicación se compila, pero las llamadas fetch a la API no funcionan. Obtengo un “Error del servidor 500”.
Esto es lo que he hecho para intentar resolver este problema:
- Añadí mi API_KEY en la pestaña “Variables de entorno” en Amplify.
-
Actualicé mi configuración de compilación
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- API_KEY=${API_KEY} # Añadí mi API_KEY de la pestaña de variables de entorno en Amplify`
- yarn run build
No estoy seguro de qué más hacer. Después de volver a compilar la aplicación, sigo obteniendo “Error del servidor 500”.
Aquí está la aplicación de Amplify en vivo con el error del servidor.
davy.ai
Solución:
Para acceder a las variables de entorno en tu aplicación Amplify desplegada/producción, necesitas definir esas variables también en el AWS Amplify Console.
Para configurar las variables de entorno de tu aplicación Amplify en la Consola:
A continuación, debes modificar la configuración de compilación para asegurarte de que tu clave de API se cargue correctamente durante el proceso de compilación. Aquí tienes un ejemplo de comando de compilación que carga las variables de entorno desde el Amplify Console:
Esto debería cargar correctamente la clave de API durante el proceso de compilación y permitir acceder a ella en tu aplicación desplegada.
Después de modificar la configuración de compilación, puedes volver a desplegar tu aplicación y la clave de API debería ser accesible en tu aplicación.
Recursos adicionales: