AWS Amplify를 사용하여 Flutter 프로젝트 배포

AWS Amplify 백엔드와 함께 Flutter 프로젝트를 생성했으면, 다음 단계는 이를 배포하는 것입니다.
Flutter 프로젝트를 AWS Amplify 호스팅으로 배포 방법을 아래에 설명합니다.

AWS Amplify는 Amazon에서 제공하는 풀스택 애플리케이션 개발 및 호스팅 서비스입니다.
일부 사람들은 이 서비스가 프로토타이핑에만 적합하다고 말하지만, 여기서는 특정한 적합성에 대해 논의하는 것이 아니라, 이 호스팅을 어떻게 구현하는지 검토하는 것이 목표입니다.

Flutter 풀스택 앱 구조

Flutter 풀스택 앱은 두 가지 주요 구성 요소로 이루어져 있습니다.

• Flutter 프론트엔드
• 일부 백엔드

프론트엔드는 웹 앱, 안드로이드 앱, iOS 앱으로 컴파일할 수 있으며, 이들은 모두 다른 방식으로 배포됩니다.
여기서는 웹 앱에 대해서만 검토합니다.

Flutter 풀스택 프로젝트의 백엔드는 AWS Amplify를 사용할 경우 JavaScript 람다 함수의 집합입니다. 정확히는 TypeScript입니다.
선택지가 그리 다양하지 않지만, GraphQL 함수, DynamoDB와의 REST, 일부 AWS S3 액세스 등이 포함되어 있습니다. 그러나 빠르고 간단하게 구현할 수 있습니다.

AWS Amplify 배포 설정

좋습니다. AWS Amplify 배포를 생성해 보겠습니다.

1. https://console.aws.amazon.com/amplify/apps에 접속하고, 선호하는 지역을 선택합니다.
2. Create new app 버튼을 클릭합니다.
3. Git 제공업체를 선택합니다. 2024년 8월 이전에 AWS 계정을 생성하셨다면 운이 좋습니다. 그 이후로는 새 고객에게 AWS Codecommit 서비스를 제공하지 않기 때문입니다. 저는 이미 생성했으므로, 이 테스트에서는 AWS Codecommit을 사용합니다. Next 버튼을 클릭합니다.
4. 배포할 Flutter 앱의 저장소와 브랜치를 선택합니다. Next 버튼을 클릭합니다.
5. 이제 App settings 페이지에 도달하게 되며, 여기서 마법사가 Amplify Gen2 앱을 감지하고, 잘못된 프론트엔드 빌드 설정을 적용했습니다. 나중에 이를 수정하겠습니다. Next 버튼을 클릭합니다.

6. 요약을 확인하고 Save and Deploy를 클릭합니다.
7. 새 배포가 진행 중임을 볼 수 있습니다.

8. 그리고 마법처럼 배포가 완료됩니다.

이 domain 링크를 클릭하면 빈 브라우저 화면만 보일 것입니다. 이는 아직 Flutter 앱을 빌드하지 않았기 때문입니다.
걱정하지 마세요, 수정하기 위해 해야 할 일은 하나뿐입니다.

9. 왼쪽 패널에서 Hosting / Build Settings을 클릭하면 다음과 같은 화면을 볼 수 있습니다.

10. 편집을 클릭하고, 아티팩트와 캐시 설정을 유지한 채 프론트엔드 빌드 구성 파일을 붙여넣습니다.

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

아래에 컴파일 및 배포 스크립트의 전체 예시를 확인해 보세요.

11. Save를 클릭하고, 배포 페이지로 이동한 후 Redeploy this version을 클릭하거나, 브랜치에 변경 사항을 커밋하고 푸시합니다.

12. 재빌드 및 재배포가 완료될 때까지 기다린 후, 앱으로 이동합니다.

스테이징 및 프로덕션 환경

프로덕션, 스테이징 및 기타 환경에 특별한 설정이나 추가 환경 변수가 필요하지 않습니다.
Amplify 배포는 이미 $AWS_BRANCH 및 $AWS_APP_ID 환경 변수를 제공합니다.
따라서 다른 브랜치를 배포할 때마다 백엔드가 다른 스테이징 환경으로 배포되고, 프론트엔드가 해당 스테이징 환경에 연결됩니다.
앱의 새 배포를 생성하고 다른 브랜치를 선택하는 것만으로 충분합니다. 이것이 전부입니다.

아래에 자세한 설명을 확인해 보세요.

백엔드를 컴파일할 때 다음 명령을 확인해 보세요.

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

이 명령은 amplify_outputs.json 파일을 생성하며, 이 파일은 React 프론트엔드에 필요합니다:

[INFO]: File written: amplify_outputs.json

하지만 Flutter 프론트엔드에는 amplify_outputs.dart 파일이 필요합니다.

원본 문서는 Flutter 프론트엔드에 대해 많이 설명하지 않지만, 중요한 점은 다음과 같습니다:

브랜치 환경을 위한 구성 파일을 생성하려면 다음 명령을 실행하세요:

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

이 스크립트는 Flutter 프론트엔드가 사용할 Dart 백엔드 연결 코드(파일 lib/amplify_outputs.dart)를 생성합니다.
--app-id <your-amplify-app-id> 및 --branch <your-git-branch-name> 매개변수를 지정함으로써, 각 브랜치에 배포된 백엔드가 다릅니다.
이 파일은 Git 저장소에 포함되어서는 안 됩니다. 앱 프로젝트의 .gitignore 파일에 다음이 포함되어 있는지 확인하세요:

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

lib/amplify_outputs.dart 파일을 Git에 푸시하고 npx ampx generate outputs... 명령을 실행하지 않으면, 배포된 프론트엔드는 개발자 샌드박스에 연결하려고 하며, 올바른 스테이징 또는 프로덕션 백엔드에 연결하지 않습니다.

Amplify 호스팅에서 빌드 구성에 사용할 실제 스크립트는 다음과 같습니다:

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

Amplify.yaml 예시

Reddit에서 발견한 예시입니다. 여기에 보관해 두겠습니다.

AWS Amplify 호스팅으로 Flutter 웹 앱을 빌드 및 배포하는 Amplify.yaml의 전체 예시입니다:

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

유용한 링크

• AWS Amplify에서 Flutter 오류 수정: [WARNING] fatal Not a valid object name origin/master
• AWS Amplify 백엔드와 함께 Flutter 프로젝트 생성
• Flutter 설치
• Flutter (Dart) 체크리스트
• Flutter용 AWS Amplify 문서
• Node.js 설치
• Docker로 Flutter 웹 앱을 구성하는 방법: Docker로 Flutter 빌드 및 Nginx 사용