Implante um projeto Flutter no AWS Amplify

Quando você criou projeto Flutter com backend AWS Amplify, o próximo passo é implantá-lo. Aqui está como implantar projeto Flutter no hospedagem AWS Amplify

AWS Amplify é o serviço da Amazon para desenvolvimento e hospedagem de aplicações fullstack. Alguns dizem que é bom apenas para prototipagem, mas não estamos aqui para discutir a adequação específica, mas sim para revisar como implementar este hospedagem.

Estrutura de aplicação fullstack Flutter

Aplicação fullstack Flutter consiste em dois componentes principais

• frontend Flutter
• algum backend

O frontend pode ser compilado para aplicação Web, Android, IOS, todos esses são implantados de forma diferente. Aqui revisaremos apenas o web.

E o backend do projeto Flutter fullstack, quando feito com AWS Amplify - é um conjunto de funções JavaScript lambda. Mais precisamente, TypeScript. Não uma grande variedade de opções - funções GraphQL, REST com DynamoDB, alguns acessos AWS S3… No entanto, rápido e fácil.

Configurando implantação AWS Amplify

OK. vamos criar implantação AWS Amplify

1. Vá para https://console.aws.amazon.com/amplify/apps , escolha sua região favorita.
2. Clique no botão Criar novo app
3. Selecione seu provedor de Git. Sorte sua se você criou sua conta AWS antes de agosto de 2024, porque depois disso AWS não está fornecendo serviço AWS Codecommit para novos clientes. Mas eu fiz, então usando AWS Codecommit neste teste. Clique no botão Próximo.
4. Selecione repositório e branch do seu app Flutter a ser implantado a partir dele. Clique no botão Próximo.
5. Agora estamos na página Configurações do app, onde o assistente detectou a aplicação Amplify Gen2 e configurou incorretamente o frontend de build. Vamos corrigi-lo mais tarde. Clique em Próximo.

6. Revise o resumo, clique em Salvar e implantar
7. Você verá sua nova implantação em andamento

8. E então você verá que foi miraculosamente implantado

Quando você clicar no link domínio verá apenas uma tela do navegador vazia. Isso acontece porque ainda não está construindo seu app Flutter. Não se preocupe, precisamos apenas de uma coisa para corrigi-lo.

9. No seu painel esquerdo, clique em Hosting / Configurações de build, você verá algo como:

10. Clique em Editar e cole a configuração de build do frontend, mantendo os artefatos e bits de cache.

frontend:
  phases:
    preBuild:
      commands:
        - echo "Instalando SDK Flutter"
        - 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 dependências"
        - flutter pub get
        - echo "Gerando conexão com backend"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Construindo aplicação Flutter web sem suporte a WASM"
        - flutter build web

Veja o exemplo completo do script de compilação e implantação abaixo.

11. Clique em Salvar, vá para sua página de implantação e clique em Reimplantar esta versão. Ou faça um commit e envie algumas alterações para sua branch.

12. Aguarde até que termine de reconstruir e reimplementar e navegue até sua aplicação.

Ambientes de staging e produção

Você não precisa de configurações especiais ou variáveis de ambiente adicionais para Prod, Staging e outros ambientes por si só. A implantação Amplify já fornece variáveis de ambiente $AWS_BRANCH -e $AWS_APP_ID. Então nosso script, ao implantar diferentes branches, implantará o backend para diferentes estágios e conectará o frontend a este estágio. Você só precisa criar uma nova implantação do seu app e selecionar uma branch diferente. Isso é tudo/

Veja a descrição detalhada abaixo.

Quando você compila o backend veja o trecho

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

Ele produz o arquivo amplify_outputs.json, que é necessário para o frontend react:

[INFO]: Arquivo escrito: amplify_outputs.json

mas para o frontend Flutter precisamos de amplify_outputs.dart.

O documento original não diz muito sobre o frontend Flutter, mas um ponto importante está lá:

Gerar a configuração para um ambiente de branch executando:

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

Este script gera código de conexão de backend (arquivo lib/amplify_outputs.dart) para o frontend Flutter usar. E porque você especifica os parâmetros --app-id <your-amplify-app-id> e --branch <your-git-branch-name> - o backend será diferente para cada branch implantado. Este arquivo não deve ser incluído no repositório git. Verifique se o .gitignore no projeto da aplicação contém

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

Se você enviar lib/amplify_outputs.dart para o git e não fizer npx ampx generate outputs... - seu frontend implantado tentará se conectar ao sandbox do desenvolvedor, não ao backend adequado de staging ou produção.

O script real para configuração de build no hospedagem Amplify deve ser:

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

Exemplo de Amplify.yaml

Encontrado em algum lugar no reddit, vamos mantê-lo aqui.

Exemplo completo de Amplify.yaml construindo e implantando app Flutter web no hospedagem 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 SDK Flutter"
        - 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 dependências"
        - flutter pub get
        - echo "Gerando conexão com backend"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Construindo aplicação Flutter web sem suporte a WASM"
        - flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache

Links úteis

• Corrigindo erros Flutter no AWS Amplify: [WARNING] fatal Not a valid object name origin/master
• Projeto Flutter com backend AWS Amplify
• Instalar Flutter
• Folha de dicas Flutter (Dart)
• Documentação Amplify para Flutter no .aws
• Instalar Node.js
• Dockerizando app Flutter Web com build Dockerizado Flutter e Nginx