Flutter Firebase-为iOS，Android和Web设置不同的部署目标 [英] Flutter Firebase -- setting different deployment targets for iOS, Android, and Web

问题描述

问题在于如何设置Flutter环境，以便您可以定位独立的Firebase实例(例如，针对dev，prod，staging等)

解决方案

在此示例中，我有三个名为 dev ， staging 的Firebase实例(又名"firebase项目").strong>和产品.

使用此解决方案

iOS和Android

对于 iOS 和 Android ，针对这些Firebase实例，我使用Flutter风格:

 >扑奔--flavor dev 

 >扑动-风味分期 

 >扑打--flavor prod 

Web(本地网络托管服务器)

对于 Web ，要定位这些Firebase实例，我使用Firebase部署目标:

 >Firebase使用开发>颤振构建网站>火力发球 

 >Firebase使用阶段>颤振构建网站>火力发球 

 >Firebase使用产品>颤振构建网站>火力发球 

CTL-C 停止本地Web服务器

Web(Firebase Web托管服务器)

对于 Web ，要定位这些Firebase实例，我使用Firebase部署目标:

 >Firebase使用开发>颤振构建网站>火力基地部署 

 >Firebase使用阶段>颤振构建网站>火力基地部署 

 >Firebase使用产品>颤振构建网站>火力基地部署 

---

设置事情

假设

• 您已经设置了Firebase实例，可以轻松浏览
  3. 从您的一个Firebase实例中复制代码片段，并将其添加到您的 web/index.html 文件中.您的< body> 标签应如下所示，具体取决于您在Flutter应用中使用的Firebase SDK:

   < body><！-始终需要核心Firebase JS SDK，并且必须首先列出它->< script src ="/__/firebase/8.2.10/firebase-app.js"</script><！-TODO:添加您要使用的Firebase产品的SDKhttps://firebase.google.com/docs/web/setup#available-libraries->< script src ="/__/firebase/8.2.10/firebase-analytics.js"</script>< script src ="/__/firebase/8.2.10/firebase-auth.js"</script>< script src ="/__/firebase/8.2.10/firebase-firestore.js"</script>< script src ="/__/firebase/8.2.10/firebase-storage.js"</script><！-初始化Firebase->< script src ="/__/firebase/init.js"</script>< ;!-此脚本安装service_worker.js来提供PWA功能以应用.有关更多信息，请参见:https://developers.google.com/web/fundamentals/primers/service-workers->< script>if(导航器中的"serviceWorker"){window.addEventListener('load'，function(){navigator.serviceWorker.register('flutter_service_worker.js?v = 1367769473');});}</script>< script src ="main.dart.js"type ='application/javascript'></script> 

  The problem is how to set up your Flutter environment so you can target separate firebase instances (say for dev, prod, staging, ...)

  解决方案

  In this example, I have three firebase instances (aka "firebase projects") called dev, staging, and prod.

  Using This Solution

  iOS and Android

  For iOS and Android, to target these firebase instances I use Flutter flavors:

  > flutter run --flavor dev
  

  > flutter run --flavor staging
  

  > flutter run --flavor prod
  

  Web (Local web hosting server)

  For the Web, to target these firebase instances I use firebase deploy targets:

  > firebase use dev
  > flutter build web
  > firebase serve
  

  > firebase use staging
  > flutter build web
  > firebase serve
  

  > firebase use prod
  > flutter build web
  > firebase serve
  

  CTL-C to stop the local web server

  Web (Firebase web hosting server)

  For the Web, to target these firebase instances I use firebase deploy targets:

  > firebase use dev
  > flutter build web
  > firebase deploy
  

  > firebase use staging
  > flutter build web
  > firebase deploy
  

  > firebase use prod
  > flutter build web
  > firebase deploy
  

  ---

  Setting Things Up

  Assumptions

  • You have already set up your Firebase instances and are comfortable navigating around the Firebase Console.
  • You have set up your firebase public build target folder to build/web for web hosting.

  Setting Up Flutter Flavors for iOS and Android

  See the following for implementation of Flutter Flavors:

  • Build flavors in Flutter (Android and iOS) with different Firebase projects per flavor As software platforms often change, if you run into problems with these instructions, please look at the comments on the article. Often readers have provided very useful solutions to new and common problems.

  Setting Up Deploy Targets for the Web

  Configuring Your Flutter Project for the Web

  Flutter for the Web is now on the Flutter stable channel. Make sure you have the current version of Flutter:

  > flutter channel stable
  > flutter upgrade
  

  Configure the web folder in your project:

  > flutter config --enable-web
  > flutter create .
  

  Check the that the Web is configured to Flutter:

  > flutter doctor
  
  [✓] Flutter: is fully installed. (Channel stable, 1.27.0, on macOS 11.2.1 20D74 darwin-x64, locale en)
  [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
  [✓] Xcode - develop for iOS and macOS
  [✓] Chrome - develop for the web
  [✓] Android Studio (version 4.1)
  [✓] IntelliJ IDEA Ultimate Edition (version 2020.3.2)
  [✓] Connected device (3 available)
  
  • No issues found!
  

  Also check the devices:

  > flutter devices
  1 connected device:
  
  Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150
  

  Configuring the Firebase Deploy Targets

  List the firebase projects you have access to when you entered > firebase login.

  > firebase projects:list
  

  You can assign a project alias (in my case, dev, staging, and prod) to each firebase instance by entering:

  > firebase use --add
  ? Which project do you want to add?
  my-great-app
  my-great-app-staging
  my-great-app-development
  

  It will ask you which firebase instance you want to add an alias for: Use the arrow keys to highlight your selection then press Enter to select it.

  ? Which project do you want to add? my-great-app
  ? What alias do you want to use for this project? (e.g. staging) prod
  

  In this case, I gave the alias prod by the firebase instance my-great-app.

  To see which firebase instances you can switch between using firebase use just enter:

  > firebase use
  

  Adding Firebase Config details to your project

  Some StackOverflow answers tell you to put your Firebase config into your projects web/index.html file. This isn't necessary. Rather than doing that, you just switch between firebase configs using firebase use prod, firebase use staging, firebase use prod from the Terminal command line to make each instance of firebase "active". When you do flutter build web, the build process automatically picks up the the correct firebase config from the active firebase instance.

  How does this magic happen? Click here for the gory details on Adding SDKs Using Reserved URLs.

  1. In each of your firebase instances, ensure that you have a web app </> for each instance.
  2. Set the SDK Snippet to 'Automatic'
  3. Copy the code snippet from one of your firebase instances and add it to your web/index.html file. Your <body> tag should look something like this, depending on which firebase SDKs you are using in your Flutter app:

  <body>
  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="/__/firebase/8.2.10/firebase-app.js"></script>
  
  <!-- TODO: Add SDKs for Firebase products that you want to use
       https://firebase.google.com/docs/web/setup#available-libraries -->
  <script src="/__/firebase/8.2.10/firebase-analytics.js"></script>
  <script src="/__/firebase/8.2.10/firebase-auth.js"></script>
  <script src="/__/firebase/8.2.10/firebase-firestore.js"></script>
  <script src="/__/firebase/8.2.10/firebase-storage.js"></script>
  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
      
    <!-- This script installs service_worker.js to provide PWA functionality to
         application. For more information, see:
         https://developers.google.com/web/fundamentals/primers/service-workers -->
         
      
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
          navigator.serviceWorker.register('flutter_service_worker.js?v=1367769473');
        });
      }
    </script>
    <script src="main.dart.js" type='application/javascript"></script>
  

  这篇关于Flutter Firebase-为iOS，Android和Web设置不同的部署目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！