Implementar un proyecto de Flutter en AWS Amplify

Cuando creaste proyecto Flutter con backend de AWS Amplify, el siguiente paso es desplegarlo. Aquí te explico cómo Desplegar proyecto Flutter en hosting de AWS Amplify

AWS Amplify es el servicio de Amazon para el desarrollo y el alojamiento de aplicaciones fullstack. Algunas personas dicen que es bueno solo para prototipado, pero no estamos aquí para discutir la idoneidad específica, sino para revisar cómo implementar este alojamiento.

Estructura de la aplicación fullstack de Flutter

Una aplicación fullstack de Flutter consta de dos componentes principales:

• frontend de Flutter
• algún backend

El frontend puede compilarse a una aplicación web, una aplicación Android, una aplicación iOS, todas estas se despliegan de manera diferente. Solo revisaremos la web.

Y el backend de un proyecto fullstack de Flutter, cuando se hace con AWS Amplify, es un conjunto de funciones JavaScript lambda. Más precisamente, TypeScript. No hay una gran variedad de opciones - funciones GraphQL, REST con DynamoDB, algún acceso a AWS S3… Sin embargo, rápido y fácil.

Configuración del despliegue de AWS Amplify

OK. Vamos a crear el despliegue de AWS Amplify

1. Ve a https://console.aws.amazon.com/amplify/apps, elige tu región favorita.
2. Haz clic en el botón Crear nueva app
3. Selecciona tu proveedor de Git. Tu suerte si creaste tu cuenta de AWS antes de agosto de 2024, porque después de eso AWS no está proporcionando el servicio AWS Codecommit a nuevos clientes. Pero yo lo hice, así que usando AWS Codecommit en este test. Haz clic en el botón Siguiente.
4. Selecciona el repositorio y la rama de tu aplicación Flutter que se desplegará desde. Haz clic en el botón Siguiente.
5. Ahora estamos en la página Configuración de la app, donde el asistente detectó la app Amplify Gen2 y configuró incorrectamente el frontend de construcción. Lo corregiremos más tarde. Haz clic en Siguiente.

6. Revisa el resumen, haz clic en Guardar y desplegar
7. Verás tu nuevo despliegue en progreso

8. Y luego verás que se despliega milagrosamente

Cuando hagas clic en este enlace dominio verás solo una pantalla vacía del navegador. Eso es porque aún no estás construyendo tu app Flutter. No te preocupes, solo necesitamos hacer una cosa para corregirlo.

9. En tu panel izquierdo haz clic en Hosting / Configuración de construcción, verás algo como:

10. Haz clic en Editar y pega la configuración de construcción del frontend, manteniendo los artefactos y bits de caché.

frontend:
  phases:
    preBuild:
      commands:
        - echo "Instalando Flutter SDK"
        - git clone https://github.com/flutter/flutter.git -b stable --depth 1
        - export PATH="$PATH:$(pwd)/flutter/bin"
        - flutter config --no-analytics
        - flutter doctor
        - echo "Instalando dependencias"
        - flutter pub get
        - echo "Generando conexión al backend"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Construyendo aplicación Flutter web sin soporte de WASM"
        - flutter build web

Ver el ejemplo completo del script de compilación y despliegue a continuación.

11. Haz clic en Guardar, ve a tu página de despliegue y haz clic en Redeploy this version. O compromete y empuja algunos cambios a tu rama.

12. Espera a que termine la reconstrucción y el rediseño, y navega a tu app.

Entornos de staging y producción

No necesitas configuraciones especiales o variables de entorno adicionales para Prod, Staging y otros entornos por sí mismos. El despliegue de Amplify ya proporciona variables de entorno $AWS_BRANCH - y $AWS_APP_ID. Así que nuestro script cuando se despliega una rama diferente desplegará el backend a una etapa diferente, y conectará el frontend a esta etapa. Solo necesitas crear un nuevo despliegue de tu app y seleccionar una rama diferente. Eso es todo/

Ver la descripción detallada a continuación.

Cuando compiles el backend ve el fragmento

npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID

Produce el archivo amplify_outputs.json, que es necesario para el frontend de react:

[INFO]: File written: amplify_outputs.json

pero para el frontend de Flutter necesitamos amplify_outputs.dart.

El documento original no dice mucho sobre el frontend de Flutter, pero hay un punto importante allí:

Genera la configuración para un entorno de rama ejecutando:

npx ampx generate outputs --app-id <your-amplify-app-id> --branch <your-git-branch-name> --format dart --out-dir lib

Este script genera código de conexión al backend (archivo lib/amplify_outputs.dart) para que el frontend de Flutter lo use. Y porque especificas los parámetros --app-id <your-amplify-app-id> y --branch <your-git-branch-name> - el backend será diferente para cada rama desplegada. Este archivo no debe incluirse en el repositorio git. Verifica que el .gitignore en el proyecto de la app contiene

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

Si envías lib/amplify_outputs.dart a git y no haces npx ampx generate outputs... - tu frontend desplegado intentará conectarse al sandbox del desarrollador, no al backend de staging o producción correcto.

El script real para la configuración de construcción en el alojamiento de Amplify debe ser:

npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID

Ejemplo de Amplify.yaml

Encontrado en algún lugar de reddit, simplemente lo dejaremos aquí.

Ejemplo completo de Amplify.yaml construyendo y desplegando una aplicación Flutter web en el alojamiento de AWS Amplify:

version: 1
backend:
  phases:
    build:
      commands:
        - npm ci --cache .npm --prefer-offline
        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
frontend:
  phases:
    preBuild:
      commands:
        - echo "Instalando Flutter SDK"
        - git clone https://github.com/flutter/flutter.git -b stable --depth 1
        - export PATH="$PATH:$(pwd)/flutter/bin"
        - flutter config --no-analytics
        - flutter doctor
        - echo "Instalando dependencias"
        - flutter pub get
        - echo "Generando conexión al backend"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Construyendo aplicación Flutter web sin soporte de WASM"
        - flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache

Enlaces útiles

• Corrigiendo errores de Flutter en AWS Amplify: [WARNING] fatal Not a valid object name origin/master
• Proyecto Flutter con backend de AWS Amplify
• Instalar Flutter
• Hoja de trucos de Flutter (Dart)
• Documentación de Amplify para Flutter en .aws
• Instalar Node.js
• Dockerizando una aplicación Flutter Web con construcción de Flutter dockerizada y Nginx