Variables de entorno en AWS Amplify front end

Introducción

AWS Amplify es una suite de herramientas para el desarrollo de aplicaciones web y móviles. Una de sus funcionalidades es la de deploy y host de nuestros front end.

Podemos gestionar las variables de entorno dentro de nuestros proyectos utilizando un fichero .env para cada entorno. El problema de hacerlo así, es que si necesitas modificar una variable tenemos que modificar el repositorio. Hoy os traigo una alternativa para poder gestionar las variables de entorno de nuestro front end directamente desde AWS Amplify.

Utilizando este sistema desacoplamos las variables de entorno de nuestro repositorio de código. Puede ser una ventaja si hay que cambiar una variable rápidamente, si cualquier persona sin tanto conocimiento del proyecto de front end pueda cambiar y también nos añade un plus de seguridad si necesitamos una variable de entorno con datos comprometidos.

Definir variables de entorno en AWS Amplify

Para definir las variables de entorno tenemos que acceder a “Configuración de la Aplicación > Variables de entorno”.

Podemos añadir nuevas variables en “Administrar las variables” y asignar un valor diferente para cada entorno.

Configuración de compilación

Ahora vamos a modificar el fichero de configuración de compilación. Añadiremos el siguiente comando en build para declarar nuestra variable de entorno en el fichero .env.

echo "VITE_API_KEY=$API_KEY" >> .env

El fichero de configuración de AWS Amplify completo quedaría así:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - echo "VITE_API_KEY=$API_KEY" >> .env
        - yarn build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Y ya está, ya tienes tu variable configurada correctamente ¡Enhorabuena!