एएव्वी एम्पलाई के साथ फ्लूटर प्रोजेक्ट का डिप्लॉइ

स्टेजिंग और प्रोडक्शन वातावरणों को शामिल करें

Page content

जब आपने Flutter प्रोजेक्ट के साथ AWS Amplify बैकएंड बनाया, तो अगला कदम इसे डिप्लॉइ करना है।
यहाँ देखें कैसे Flutter प्रोजेक्ट को AWS Amplify होस्टिंग पर डिप्लॉइ करें

AWS Amplify एक ऐसी एमएस एमएस सेवा है जो पूर्णस्तरीय एप्लिकेशन के विकास और होस्टिंग के लिए उपयोग की जाती है।
कुछ लोग कहते हैं कि यह केवल प्रोटोटाइपिंग के लिए अच्छा है, लेकिन हम यहाँ विशेष उपयुक्तता के बारे में चर्चा नहीं कर रहे हैं, बल्कि इस होस्टिंग को कैसे लागू करने के बारे में समीक्षा कर रहे हैं।

Flutter to amplify tracktor

Flutter पूर्णस्तरीय एप्लिकेशन संरचना

Flutter पूर्णस्तरीय एप्लिकेशन में दो मुख्य घटक होते हैं

  • flutter फ्रंटएंड
  • कुछ बैकएंड

फ्रंटएंड को वेब एप्लिकेशन, एंड्रॉइड एप्लिकेशन, आईओएस एप्लिकेशन में कंपाइल किया जा सकता है, और ये सभी अलग-अलग तरीके से डिप्लॉइ किए जाते हैं।
हम इसमें केवल वेब के बारे में समीक्षा करेंगे।

और Flutter पूर्णस्तरीय प्रोजेक्ट का बैकएंड, जब इसे AWS Amplify के साथ किया जाता है, तो एक जावास्क्रिप्ट लैम्ब्डा फंक्शन के सेट के रूप में होता है। टाइपस्क्रिप्ट के रूप में अधिक सटीक।
बहुत अधिक विकल्प नहीं हैं - ग्राफक्वेरी फंक्शन, डीएनओडीबी के साथ आरईएसटी, कुछ एएसएस एस3 एक्सेस… फिर भी, त्वरित और सरल।

AWS Amplify डिप्लॉइमेंट कन्फ़िगरिंग

ठीक है। चलिए AWS Amplify डिप्लॉइमेंट बनाते हैं

  1. https://console.aws.amazon.com/amplify/apps पर जाएं, अपना पसंदीदा रीजन चुनें।
  2. Create new app बटन पर क्लिक करें
  3. अपना जिट प्रोवाइडर चुनें। अगर आपने 2024 के अगस्त के बाद अपना AWS खाता बनाया है, तो आपको लकी है क्योंकि उसके बाद AWS नए ग्राहकों के लिए AWS कोडकमिट सेवा प्रदान नहीं करता है। लेकिन मैंने ऐसा कर लिया है, इसलिए इस परीक्षण में AWS कोडकमिट का उपयोग कर रहा हूं। Next बटन पर क्लिक करें।
  4. अपने flutter प्रोजेक्ट के रिपॉजिटरी और ब्रांच का चयन करें जिसे डिप्लॉइ किया जाना है। Next बटन पर क्लिक करें।
  5. अब हम App settings पृष्ठ पर हैं, जहां वैज्ञानिक ने Amplify Gen2 एप्लिकेशन का पता लगाया है, और बिल्ड फ्रंटएंड को गलत तरीके से कॉन्फ़िगर कर दिया है। हम इसे बाद में ठीक करेंगे। Next पर क्लिक करें।

detected the Amplify Gen2 app

  1. समारोह की समीक्षा करें, Save and Deploy पर क्लिक करें
  2. आप अपने नए डिप्लॉइमेंट के प्रगति को देखेंगे

amplify-deploying

  1. और फिर आप देखेंगे कि यह अजीब तरह से डिप्लॉइ हो गया है

amplify-deployed

जब आप इस domain लिंक पर क्लिक करते हैं, तो आपको एक खाली ब्राउज़र स्क्रीन दिखाई देगा। यह इसलिए है क्योंकि अभी तक आपके Flutter एप्लिकेशन को बिल्ड नहीं किया गया है।
चिंता न करें, हमें केवल एक बात करनी है जिससे इसे ठीक कर सकें।

  1. अपने बाएं पैनल पर Hosting / Build Settings पर क्लिक करें, आपको कुछ ऐसा दिखाई देगा:

amplify-build-settings

  1. संपादित करें और फ्रंटएंड बिल्ड कॉन्फ़िगरेशन पेस्ट करें, आर्टिफैक्ट्स और कैश बिट्स को बरकरार रखते हुए।
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

नीचे बिल्ड और डिप्लॉइ स्क्रिप्ट के पूरे उदाहरण को देखें।

  1. Save पर क्लिक करें, अपने डिप्लॉइमेंट पृष्ठ पर जाएं, और Redeploy this version पर क्लिक करें। या अपने ब्रांच में कुछ परिवर्तन करें और पुश करें।

  2. इंतजार करें जब तक यह फिर से बिल्ड और डिप्लॉइ नहीं करता है और अपने एप्लिकेशन पर जाएं।

स्टेजिंग और प्रोडक्शन वातावरण

आपको प्रोडक्शन, स्टेजिंग और अन्य वातावरणों के लिए विशेष कॉन्फ़िगरेशन या अतिरिक्त वातावरण चर आवश्यक नहीं हैं।
Amplify डिप्लॉइमेंट पहले से ही वातावरण चर $AWS_BRANCH - और $AWS_APP_ID प्रदान करता है।
इसलिए हमारा स्क्रिप्ट जब अलग-अलग ब्रांच के साथ डिप्लॉइ होता है, तो बैकएंड को अलग-अलग स्टेज में डिप्लॉइ करता है, और फ्रंटएंड को इस स्टेज से जोड़ता है।
आपको अपने एप्लिकेशन के नए डिप्लॉइमेंट बनाना ही पड़ेगा और अलग-अलग ब्रांच का चयन करना ही पड़ेगा। यह सब है।

नीचे विस्तृत विवरण देखें।

जब आप बैकएंड को कंपाइल करते हैं, तो आपको इस बिट को देखें:

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

यह फ़ाइल amplify_outputs.json बनाता है, जो रिएक्ट फ्रंटएंड के लिए आवश्यक है:

[INFO]: File written: amplify_outputs.json

लेकिन फ्लूटर फ्रंटएंड के लिए हमें amplify_outputs.dart की आवश्यकता है।

मूल दस्तावेज़ फ्लूटर फ्रंटएंड के बारे में कुछ नहीं कहता है, लेकिन महत्वपूर्ण बिंदु है:

एक शाखा वातावरण के लिए कॉन्फ़िगरेशन बनाने के लिए निम्नलिखित चलाएं:

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

यह स्क्रिप्ट फ्लूटर फ्रंटएंड के उपयोग के लिए डार्ट बैकएंड कनेक्शन कोड (फ़ाइल lib/amplify_outputs.dart) बनाता है।
और आप चर पैरामीटर --app-id <your-amplify-app-id> और --branch <your-git-branch-name> निर्दिष्ट करते हैं, इसलिए प्रत्येक डिप्लॉइ किए गए शाखा के लिए बैकएंड अलग होगा।
इस फ़ाइल को गिट रिपॉजिटरी में शामिल नहीं करना चाहिए। जांचें कि एप्लिकेशन प्रोजेक्ट में .gitignore इस तरह शामिल है:

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

अगर आप lib/amplify_outputs.dart को गिट में पुश करते हैं और npx ampx generate outputs... नहीं करते हैं, तो आपका डिप्लॉइ किया गया फ्रंटएंड विकास सैंडबॉक्स से जुड़ने की कोशिश करेगा, न कि सही स्टेजिंग या प्रोडक्शन बैकएंड से।

अम्प्लाइफ़ होस्टिंग पर बिल्ड कॉन्फ़िगरेशन के लिए वास्तविक स्क्रिप्ट होना चाहिए:

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

Amplify.yaml का उदाहरण

कहीं रेडिट पर पाया गया, चलिए इसे यहां रखते हैं।

अम्प्लाइफ़.yaml का पूरा उदाहरण जो फ्लूटर वेब एप्लिकेशन को 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

उपयोगी लिंक