Deploy proyek flutter ke AWS amplify

Ketika Anda membuat proyek Flutter dengan backend AWS Amplify, langkah berikutnya adalah mendeploynya. Berikut cara mendeploy proyek Flutter ke hosting AWS Amplify

AWS Amplify adalah layanan Amazon untuk pengembangan dan hosting aplikasi fullstack. Beberapa orang mengatakan bahwa layanan ini hanya cocok untuk prototyping, tetapi kita tidak akan membahas kesesuaian tertentu, melainkan meninjau bagaimana cara menerapkan hosting ini.

Struktur aplikasi fullstack Flutter

Aplikasi fullstack Flutter terdiri dari dua komponen utama

• frontend Flutter
• backend tertentu

Frontend dapat dikompilasi menjadi aplikasi Web, Android, IOS, semua ini dideploy secara berbeda. Di sini kita hanya akan meninjau yang web.

Dan backend dari proyek Flutter fullstack, ketika selesai dengan AWS Amplify - adalah kumpulan fungsi JavaScript lambda. Lebih tepatnya, Typescript. Tidak banyak pilihan yang tersedia - fungsi GraphQL, REST dengan DynamoDB, akses beberapa AWS S3… Namun, cepat dan mudah.

Mengkonfigurasi deployment AWS Amplify

Baiklah. mari kita buat deployment AWS Amplify

1. Buka https://console.aws.amazon.com/amplify/apps , pilih wilayah favorit Anda.
2. Klik tombol Create new app
3. Pilih penyedia Git Anda. Beruntung Anda jika Anda membuat akun AWS sebelum Agustus 2024, karena setelah itu AWS tidak menyediakan layanan AWS Codecommit untuk pelanggan baru. Tapi saya sudah melakukannya, jadi menggunakan AWS Codecommit dalam uji ini. Klik tombol Next.
4. Pilih repositori dan cabang dari aplikasi Flutter Anda yang akan dideploy. Klik tombol Next.
5. Sekarang kita berada di halaman App settings, di mana wizard mendeteksi aplikasi Amplify Gen2, dan mengkonfigurasi frontend build secara salah. Kita akan memperbaikinya nanti. Klik Next.

6. Tinjau ringkasan, klik Save and Deploy
7. Anda akan melihat deployment baru Anda sedang berlangsung

8. Dan kemudian Anda melihatnya telah dideploy secara ajaib

Ketika Anda mengklik tautan domain ini, Anda akan melihat layar browser kosong. Itu karena aplikasi Flutter Anda belum dibangun. Jangan khawatir, kita hanya perlu melakukan satu hal untuk memperbaikinya.

9. Di panel kiri klik Hosting / Build Settings, Anda akan melihat sesuatu seperti:

10. Klik Edit dan tempelkan konfigurasi build frontend, menjaga artifacts dan cache bits.

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

Lihat contoh lengkap dari skrip kompilasi dan deploy di bawah ini.

11. Klik Save, pergi ke halaman deployment Anda, dan klik Redeploy this version. Atau Commit dan push beberapa perubahan ke cabang Anda.

12. Tunggu hingga selesai merebuild dan redeploy, lalu navigasi ke aplikasi Anda.

Lingkungan Staging dan Production

Anda tidak perlu konfigurasi khusus atau variabel lingkungan tambahan untuk Prod, Staging, dan lingkungan lainnya secara spesifik. Deployment Amplify sudah menyediakan variabel lingkungan $AWS_BRANCH - dan $AWS_APP_ID. Jadi skrip kita ketika mendeploy cabang berbeda akan mendeploy backend ke stage berbeda, dan menghubungkan frontend ke stage ini. Anda hanya perlu membuat deployment baru dari aplikasi Anda dan memilih cabang berbeda. Itu saja/

Lihat deskripsi terperinci di bawah ini.

Ketika Anda mengkompilasi backend lihat bagian

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

Ini menghasilkan file amplify_outputs.json, yang diperlukan oleh frontend react:

[INFO]: File written: amplify_outputs.json

tetapi untuk frontend flutter kita membutuhkan amplify_outputs.dart.

Dokumen asli tidak mengatakan banyak tentang frontend flutter tetapi poin penting ada di sana:

Buat konfigurasi untuk lingkungan cabang dengan menjalankan:

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

Skrip ini menghasilkan kode koneksi backend (file lib/amplify_outputs.dart) untuk frontend Flutter digunakan. Dan karena Anda menentukan parameter --app-id <your-amplify-app-id> dan --branch <your-git-branch-name> - backend akan berbeda untuk setiap cabang yang dideploy. File ini tidak boleh dimasukkan ke dalam repo git. Periksa bahwa .gitignore dalam proyek aplikasi berisi

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

Jika Anda mendorong lib/amplify_outputs.dart ke git dan tidak melakukan npx ampx generate outputs... - frontend yang dideploy akan mencoba terhubung ke sandbox pengembang, bukan backend staging atau production yang tepat.

Skrip nyata untuk konfigurasi build di hosting Amplify harusnya:

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

Contoh Amplify.yaml

Ditemukan di suatu tempat di reddit, mari kita simpan saja di sini.

Contoh lengkap Amplify.yaml yang membangun dan mendeploy aplikasi web Flutter ke hosting 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

Tautan yang Berguna

• Memperbaiki kesalahan Flutter di AWS Amplify: [WARNING] fatal Not a valid object name origin/master
• Proyek Flutter dengan backend AWS Amplify
• Install Flutter
• Kartu Panduan Flutter (Dart)
• Dokumentasi Amplify untuk Flutter di .aws
• Install Node.js
• Dockerisasi aplikasi web Flutter dengan build Flutter yang didockerisasi dan Nginx