Implante o projeto Flutter no AWS Amplify

Incluindo ambientes de homologação e produção

Conteúdo da página

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

AWS Amplify é o serviço da Amazon para desenvolvimento e hospedagem de aplicações fullstack. Algumas pessoas dizem que serve apenas para prototipagem, mas não estamos aqui para discutir a adequação particular, mas sim revisar como implementar essa hospedagem.

Flutter para amplificar tracktor

Estrutura de aplicativo fullstack Flutter

O aplicativo fullstack Flutter consiste em dois componentes principais:

  • frontend flutter
  • algum backend

O frontend pode ser compilado em aplicativo Web, aplicativo Android, aplicativo IOS; todos esses são implantados de maneiras diferentes. Aqui, revisaremos apenas o web.

E o backend do projeto fullstack Flutter, quando feito com AWS Amplify, é um conjunto de funções JavaScript Lambda. TypeScript, para ser mais preciso. Não é uma variedade enorme de opções - funções GraphQL, REST com DynamoDB, algum acesso AWS S3… Ainda assim, rápido e fácil.

Configurando a implantação da AWS Amplify

OK. vamos criar a implantação da AWS Amplify.

  1. Acesse https://console.aws.amazon.com/amplify/apps e escolha sua região favorita.
  2. Clique no botão Create new app (Criar novo app).
  3. Selecione seu provedor Git. Você terá sorte se tiver criado sua conta AWS antes de agosto de 2024, porque após isso a AWS não fornece o serviço AWS Codecommit a novos clientes. Mas eu fiz, então estou usando o AWS Codecommit neste teste. Clique no botão Next (Próximo).
  4. Selecione o repositório e a branch do seu aplicativo Flutter a serem implantados. Clique no botão Next (Próximo).
  5. Agora estamos na página App settings (Configurações do aplicativo), onde o assistente detectou o aplicativo Amplify Gen2 e configurou incorretamente a construção do frontend. Corrigiremos isso mais tarde. Clique em Next (Próximo).

detected the Amplify Gen2 app

  1. Revise o resumo e clique em Save and Deploy (Salvar e Implantar).
  2. Você verá sua nova implantação em andamento.

amplify-deploying

  1. E então você vê que foi implantado milagrosamente.

amplify-deployed

Quando você clicar neste link domain (domínio), verá apenas uma tela de navegador vazia. Isso ocorre porque seu aplicativo Flutter ainda não está sendo compilado. Não se preocupe, precisamos fazer apenas uma coisa para corrigi-lo.

  1. No painel à esquerda, clique em Hosting / Build Settings (Hospedagem / Configurações de Compilação); você verá algo como:

amplify-build-settings

  1. Clique em Editar e cole a configuração de build do Frontend, mantendo os bits de artefatos e cache.
frontend:
  phases:
    preBuild:
      commands:
        - echo "Installing 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 "Installing dependencies"
        - flutter pub get
        - echo "Generating backend connection"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Building Flutter web application without WASM support"
        - flutter build web

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

  1. Clique em Save (Salvar), vá para a página de implantação e clique em Redeploy this version (Reimplantar esta versão). Ou faça commit e push de algumas alterações para sua branch.

  2. Aguarde até que a reconstrução e reimplantação sejam concluídas e navegue até seu aplicativo.

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 em si. A implantação do Amplify já fornece as variáveis de ambiente $AWS_BRANCH e $AWS_APP_ID. Portanto, nosso script, ao implantar diferentes branches, implantará o backend em diferentes estágios e conectará o frontend a esse estágio. Você só precisa criar uma nova implantação do seu aplicativo e selecionar uma branch diferente. Isso é tudo.

Veja a descrição detalhada abaixo.

Quando você compila o backend, veja o bit:

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

Isso produz o arquivo amplify_outputs.json, necessário pelo frontend react:

[INFO]: File written: amplify_outputs.json

mas para o frontend flutter precisamos de amplify_outputs.dart.

A documentação original não diz muito sobre o frontend flutter, mas o 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 o código de conexão do backend em Dart (arquivo lib/amplify_outputs.dart) para o frontend Flutter usar. E como você especifica os parâmetros --app-id <your-amplify-app-id> e --branch <your-git-branch-name>, o backend será diferente para cada branch implantada. Este arquivo não deve ser incluído no repositório git. Verifique se o .gitignore no projeto do aplicativo contém:

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

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

O script real para a configuração de build na 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

Encontrei isso em algum lugar no Reddit, vamos apenas mantê-lo aqui.

Exemplo completo de Amplify.yaml para compilar e implantar aplicativo Flutter web para 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 "Installing 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 "Installing dependencies"
        - flutter pub get
        - echo "Generating backend connection"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Building Flutter web application without WASM support"
        - flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache