Flutter Firebase——为 iOS、Android 和 Web 设置不同的部署目标

Posted

技术标签:

【中文标题】Flutter Firebase——为 iOS、Android 和 Web 设置不同的部署目标【英文标题】：Flutter Firebase -- setting different deployment targets for iOS, Android, and Web 【发布时间】：2021-06-08 03:12:43 【问题描述】：

问题在于如何设置您的 Flutter 环境，以便您可以针对单独的 Firebase 实例（例如用于 dev、prod、staging ......）

【问题讨论】：

【参考方案1】：

在此示例中，我有三个名为 dev、staging 和 prod 的 firebase 实例（也称为“firebase 项目”）。 p>

使用此解决方案

ios 和安卓

对于 iOS 和 Android，为了定位这些 firebase 实例，我使用 Flutter 风格：

> flutter run --flavor dev

> flutter run --flavor staging

> flutter run --flavor prod

Web（本地网络托管服务器）

对于 Web，为了定位这些 firebase 实例，我使用 firebase 部署目标：

> 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 停止本地网络服务器

Web（Firebase 网络托管服务器）

对于 Web，为了定位这些 firebase 实例，我使用 firebase 部署目标：

> firebase use dev
> flutter build web
> firebase deploy

> firebase use staging
> flutter build web
> firebase deploy

> firebase use prod
> flutter build web
> firebase deploy

设置

假设

您已经设置了 Firebase 实例，并且可以轻松地在 Firebase Console 周围导航。 您已将 Firebase 公共构建目标文件夹设置为 build/web 用于网络托管。

为 iOS 和 android 设置 Flutter 风格

Flutter Flavors 的实现参见以下内容：

Build flavors in Flutter (Android and iOS) with different Firebase projects per flavor 由于软件平台经常变化，如果您在使用这些指令时遇到问题，请查看文章中的 cmets。读者经常为新的和常见的问题提供非常有用的解决方案。

为 Web 设置部署目标

为 Web 配置 Flutter 项目

Flutter for Web 现在在 Flutter stable 频道上。确保您拥有当前版本的 Flutter：

> flutter channel stable
> flutter upgrade

在您的项目中配置 web 文件夹：

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

检查 Web 是否配置为 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!

同时检查设备：

> flutter devices
1 connected device:

Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150

配置 Firebase 部署目标

列出您在输入 > firebase login 时有权访问的 firebase 项目。

> firebase projects:list

您可以通过输入以下命令为每个 Firebase 实例分配一个项目别名（在我的例子中是 dev、staging 和 prod）： 

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

它会询问您要为哪个 Firebase 实例添加别名：使用 箭头键 突出显示您的选择，然后按 Enter 选择它。

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

在这种情况下，我通过 firebase 实例 my-great-app 给了别名 prod。

要查看您可以使用 firebase use 在哪些 firebase 实例之间切换，只需输入：

> firebase use

将 Firebase 配置详细信息添加到您的项目

一些 *** 答案告诉您将 Firebase 配置放入您的项目 web/index.html 文件中。这是没有必要的。而不是这样做，您只需从终端命令行使用 firebase use prod、firebase use staging、firebase use prod 在 firebase 配置之间切换，以使每个 firebase 实例“活动 ”。当您执行 flutter build web 时，构建过程会自动从 active firebase 实例中获取正确的 firebase 配置。

这种魔法是如何发生的？ Click here 了解使用保留 URL 添加 SDK 的详细信息。

    在每个 Firebase 实例中，确保每个实例都有一个网络应用 >。 将 SDK 代码段设置为“自动”

    从您的 Firebase 实例之一复制代码 sn-p 并将其添加到您的 web/index.html 文件中。您的 <body> 标记应如下所示，具体取决于您在 Flutter 应用中使用的 Firebase SDK： 
<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>

【讨论】：

当我尝试在没有配置的情况下运行时。应用程序未运行并抛出应用程序未定义。 FlutterFire Web 文档说：“我们正在积极研究在不直接使用 CDN 的情况下初始化 Firebase 的方法，一旦可用，我们将更新文档。” firebase.flutter.dev/docs/installation/web 这个解决方案看起来不错，但我找不到 SDK sn-p 选项将其设置为“自动”。有什么改变吗？我正在“项目设置 -> 您的应用”页面中查找它。 另外，这个路径是什么： 这个初始化是什么是？这个脚本应该从哪里来？【参考方案2】：

根据目标动态放置 Firebase 配置文件

此 github 存储库包含指向设置说明的链接以及脚本，这些脚本会根据您要部署到的项目自动将您的 iOS 和 Android Firebase 配置文件放置到适当的位置。

回购： https://github.com/deimantasa/flutter-firebase-environment-generator-advanced

指南：https://aurimas-deimantas.medium.com/cicd-p2-multiple-firebase-environments-in-flutter-deb919cfac2b

【讨论】：

以上是关于Flutter Firebase——为 iOS、Android 和 Web 设置不同的部署目标的主要内容，如果未能解决你的问题，请参考以下文章

构建 Flutter iOS 应用程序时出错 - Firebase

Flutter - Firebase 动态链接没有被 onLink 捕获，而是在 iOS 上打开应用

Flutter ios：我收到“（在通道 plugins.flutter.io/firebase_core 上找不到方法 Firebase#initializeCore 的实现）”，不明白为啥

Firebase 通知 Flutter iOS

是否有可能在 Flutter 中动态启动 Firebase？

用于 Flutter 桌面嵌入的 Firebase 身份验证插件