Развернуть проект на Flutter в AWS Amplify

Когда вы создали
Flutter проект с AWS Amplify backend,
следующим шагом будет его развертывание.
Вот как развернуть Flutter проект на AWS Amplify hosting

AWS Amplify — это сервис Amazon для разработки и хостинга полнотелых приложений.
Некоторые люди утверждают, что он подходит только для прототипирования, но мы не собираемся обсуждать конкретную пригодность, а рассмотрим, как реализовать этот хостинг.

Структура полнотелого Flutter приложения

Полнотелое Flutter приложение состоит из двух основных компонентов

• flutter frontend
• некоторый backend

Frontend может быть скомпилирован в веб-приложение, Android-приложение, IOS-приложение, все эти варианты развертываются по-разному.
Мы рассмотрим только веб-версию.

А backend полнотелого Flutter проекта, когда он реализован с использованием AWS Amplify — это набор JavaScript lambda функций. Точнее, TypeScript.
Не очень много вариантов — функции GraphQL, REST с DynamoDB, некоторый доступ к AWS S3… Тем не менее, быстрый и простой.

Настройка развертывания AWS Amplify

Хорошо. Давайте создадим развертывание AWS Amplify

1. Перейдите на https://console.aws.amazon.com/amplify/apps, выберите ваш регион.
2. Нажмите кнопку Create new app
3. Выберите ваш поставщик Git. Удачно, если вы создали свой AWS аккаунт до августа 2024 года, потому что после этого AWS не предоставляет AWS Codecommit сервис новым клиентам. Но я сделал это, поэтому использую AWS Codecommit в этом тесте. Нажмите кнопку Next.
4. Выберите репозиторий и ветку вашего flutter приложения, которое будет развернуто. Нажмите кнопку Next.
5. Теперь мы на странице App settings, где волшебник обнаружил Amplify Gen2 приложение, и неправильно настроил сборку frontend. Мы исправим это позже. Нажмите Next.

6. Просмотрите резюме, нажмите Save and Deploy
7. Вы увидите свой новый развертывание в процессе

8. И затем вы увидите, что оно чудесным образом развернуто

Когда вы нажмете на этот domain ссылку, вы увидите просто пустой экран браузера. Это потому, что еще не собирается ваш Flutter приложение.
Не беспокойтесь, нам нужно только одно действие, чтобы исправить это.

9. На вашем левом панели нажмите Hosting / Build Settings, вы увидите что-то вроде:

10. Нажмите Edit и вставьте конфигурацию сборки frontend, сохраняя артефакты и кэш.

frontend:
  phases:
    preBuild:
      commands:
        - echo "Установка 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 "Установка зависимостей"
        - flutter pub get
        - echo "Генерация подключения к backend"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Сборка Flutter веб-приложения без поддержки WASM"
        - flutter build web

Посмотрите полный пример скрипта компиляции и развертывания ниже.

11. Нажмите Save, перейдите на страницу вашего развертывания и нажмите Redeploy this version. Или сделайте коммит и отправьте изменения в вашу ветку.

12. Подождите, пока он завершит пересборку и переразвертывание, и перейдите к вашему приложению.

Окружения Staging и Production

Вам не нужны специальные конфигурации или дополнительные переменные окружения для Prod, Staging и других окружений.
Amplify развертывание уже предоставляет переменные окружения $AWS_BRANCH и $AWS_APP_ID.
Итак, наш скрипт при развертывании разных веток будет развертывать backend на разные этапы, и подключать frontend к этому этапу.
Вам нужно просто создать новое развертывание вашего приложения и выбрать другую ветку. Это все.

См. подробное описание ниже.

Когда вы компилируете backend, обратите внимание на часть:

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

Это создает файл amplify_outputs.json, который нужен react frontend:

[INFO]: Файл записан: amplify_outputs.json

но для flutter frontend нам нужен amplify_outputs.dart.

Оригинальный документ не говорит много о flutter frontend, но важная точка там:

Создайте конфигурацию для ветки окружения, выполнив:

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

Этот скрипт генерирует код подключения к backend (файл lib/amplify_outputs.dart) для Flutter frontend.
И потому что вы указываете параметры --app-id <your-amplify-app-id> и --branch <your-git-branch-name> — backend будет отличаться для каждой развернутой ветки.
Этот файл не должен включаться в репозиторий git. Проверьте, что .gitignore в проекте приложения содержит:

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

Если вы отправите lib/amplify_outputs.dart в git и не выполните npx ampx generate outputs... — ваш frontend, который будет развернут, попытается подключиться к разработческому сэндбоксу, а не к правильному staging или production backend.

Реальный скрипт для конфигурации сборки на amplify hosting должен быть:

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

Пример Amplify.yaml

Найден где-то на Reddit, просто сохраним его здесь.

Полный пример Amplify.yaml, который собирает и развертывает Flutter веб-приложение на AWS Amplify hosting:

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 "Установка 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 "Установка зависимостей"
        - flutter pub get
        - echo "Генерация подключения к backend"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Сборка Flutter веб-приложения без поддержки WASM"
        - flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache

Полезные ссылки

• Исправление ошибок Flutter на AWS Amplify: [WARNING] fatal Not a valid object name origin/master
• Flutter проект с AWS Amplify backend
• Установка Flutter
• Справочник Flutter (Dart)
• Документация Amplify для Flutter на .aws
• Установка Node.js
• Докеризация Flutter веб-приложения с докеризованной сборкой Flutter и Nginx