نشر مشروع flutter على AWS Amplify

بما في ذلك بيئات التطوير والتشغيل

Page content

عندما خلقت
مشروع Flutter مع خلفية AWS Amplify,
الخطوة التالية هي نشره.
هنا كيفية نشر مشروع Flutter على مضيف AWS Amplify

AWS Amplify هو خدمة Amazon لتطوير ومضيف تطبيقات كاملة.
بعض الناس يقولون إنه جيد فقط للاختبار الأولي، ولكننا لا نحن هنا لمناقشة التكيّف المحدد، بل لفحص كيفية تنفيذ هذا المضيف.

Flutter إلى amplify tracktor

هيكل تطبيق Flutter الكامل

تطبيق Flutter الكامل يتكون من مكونين رئيسيين

واجهة Flutter الأمامية
بعض الخلفية

يمكن تجميع الواجهة الأمامية إلى تطبيق ويب، تطبيق أندرويد، تطبيق iOS، وكل هذه تُنشر بشكل مختلف.
سنراجع فقط النسخة الإلكترونية.

وأما خلفية تطبيق Flutter الكامل، عندما يتم إنشاؤها باستخدام AWS Amplify، فهي مجموعة من وظائف Lambda JavaScript. بالتحديد TypeScript.
ليس هناك مجموعة واسعة من الخيارات - وظائف GraphQL، REST مع DynamoDB، بعض الوصول إلى AWS S3 … ومع ذلك، سريعة وسهلة.

إعداد نشر AWS Amplify

حسنًا. دعنا ننشئ نشر AWS Amplify

انتقل إلى https://console.aws.amazon.com/amplify/apps، واختر المنطقة المفضلة لديك.
انقر على زر إنشاء تطبيق جديد
اختر مزود Git الخاص بك. إذا خلقت حساب AWS الخاص بك قبل أغسطس 2024، فأنت محظوظ لأن AWS لا تقدم خدمة AWS Codecommit لعملاء جدد بعد ذلك. لكنني فعلت ذلك، لذا أستخدم AWS Codecommit في هذا الاختبار. انقر على زر التالي.
اختر مستودع وفرع تطبيق Flutter الخاص بك الذي سيتم نشره من. انقر على زر التالي.
الآن نحن على صفحة إعدادات التطبيق، حيث اكتشف السحر تطبيق Amplify Gen2، وتم تكوين frontend بشكل خاطئ. سنصلحه لاحقًا. انقر على التالي.

تم اكتشاف تطبيق Amplify Gen2

راجع الملخص، انقر على احفظ ونشر
سترى نشرك الجديد في التقدم

amplify-deploying

ومن ثم ترى أنه تم نشره بشكل عجيب

amplify-deployed

عندما تضغط على رابط النطاق سترى مجرد شاشة متصفح فارغة. هذا لأنه لا يتم إنشاء تطبيق Flutter الخاص بك بعد. لا تقلق، نحن بحاجة فقط إلى شيء واحد لتصحيحه.

في لوحة اليسار انقر على المضيف / إعدادات البناء، سترى شيئًا مثل:

amplify-build-settings

انقر على تعديل ولصق تكوين البناء الأمامي، مع الحفاظ على الأدوات والتخزين المؤقت.

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 "إنشاء اتصال الخلفية"
        - 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

انظر المثال الكامل لنص التجميع والنشر أدناه.

انقر على احفظ، انتقل إلى صفحة النشر الخاصة بك، وانقر على إعادة النشر هذه الإصدار. أو اmits وpush بعض التغييرات إلى فرعك.
انتظر حتى ينتهي من إعادة التجميع وإعادة النشر وتنقل إلى تطبيقك.

بيئات التصحيح والإنتاج

لا تحتاج إلى إعدادات خاصة أو متغيرات بيئة إضافية للإنتاج والتصحيح وغيرها من البيئات بشكل خاص. نشر Amplify يوفر بالفعل متغيرات البيئة $AWS_BRANCH -و $AWS_APP_ID. إذن نصيحتنا عند نشر فرع مختلف ستنشر الخلفية إلى مرحلة مختلفة، وستربط الواجهة الأمامية بهذه المرحلة. كل ما عليك هو إنشاء نشر جديد لتطبيقك واختيار فرع مختلف. هذا كل شيء/

انظر الوصف التفصيلي أدناه.

عندما تجمع الخلفية راجع الجزء التالي:

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

يُنتج هذا الملف amplify_outputs.json، وهو مطلوب من قبل الواجهة الأمامية:

[INFO]: الملف تم كتابته: 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

هذا النص ينشئ رمز الاتصال الخلفية (ملف lib/amplify_outputs.dart) للاستخدام من قبل Flutter الأمامية. وبما أنك تحدد المعلمات --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... - فسيحاول frontend المُنشر الاتصال بـ sandbox المطور، وليس الخلفية المُعدة للتصحيح أو الإنتاج بشكل صحيح.

النص الحقيقي لتكوين البناء على مضيف Amplify يجب أن يكون:

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:

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 "إنشاء اتصال الخلفية"
        - 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

بيئات التصحيح والإنتاج

مثال على Amplify.yaml

روابط مفيدة