如何将 Flutter Web 应用程序部署到托管在 Firebase 上的现有网站？

Question

我已经使用 Firebase 托管在 www.example.com（自定义域）托管了一个网站。我已经在网站上有各种 HTML 页面，例如 example.com/page-1.html 或 example.com/page-2.html。

现在我需要构建一个 Web 应用程序 example-web 并将其放入现有站点内的页面中。想象一下example.com/page-3 应该只加载 Flutter Web 应用程序。我不希望我现有的 HTML 页面发生变化或受到 Flutter 单页 Web 应用程序的影响。

注意事项：

1. 我已经使用与托管在example.com 上的网站相同的 Firebase 项目构建了 iOS 和 Android 应用程序。这些移动应用也是使用 Flutter 创建的。
2. 我已经在同一个项目中使用 Flutter 和 Firebase 创建了一个示例 Web 应用程序。
3. 我需要它位于同一个域中，因为我已经设置了 Firebase 托管以读取一个变量，然后使用该变量加载 Flutter Web 应用程序。比如example.com/profile/username需要读取变量username后加载flutter web app。
4. 我只是对如何在现有 Firebase 托管网站中加载 Flutter Web App 构建感到困惑？
5. 我应该将 Flutter Web 应用程序托管在不同的托管链接中，并将其加载到现有域页面的 iFrame 中吗？

对此的任何帮助或指导将不胜感激！谢谢！

Answer 1

当您在项目目录中运行 flutter build web 时，Flutter 会自动创建一个 index.html 文件及其所有依赖项，因此为 Flutter Web 应用程序提供服务与提供普通页面没有什么不同。您需要的所有文件都将保存在项目的 /build/web 文件夹中，该文件夹可以在 example.com/page-3 上单独提供。

Answer 2

您可以简单地将Flutter 生成的所有文件粘贴到您的 Firebase 托管的公共目录中。请按以下步骤操作：

1.运行 Flutter 构建：

flutter build web

它将生成build/web 目录，其内容可能类似于：

2。复制公共目录中的构建文件： 如果您已经有一个 Firebase 托管项目，那么我假设您的公共目录如下所示：

将 Flutter 构建目录中的所有文件复制到公共目录后，应该如下所示：

请注意，我已将 index.html 从 Flutter 重命名为 page-3.html，并保持原来的 index.html 不变。

page-3.html 文件将在同一目录中查找 main.dart.js 文件，因此如果您将该 JS 文件移动到任何其他目录，例如 /js/main.dart.js，那么不要忘记在 page-3.html 中更改它。

3.为网站服务：

尝试使用firebase serve --only hosting 命令在本地为您的网站提供服务。

您应该在http://localhost:3000/page-3.html 上拥有所有现有页面和 Flutter 应用程序。如果页面在 /page-3 上返回 404 但在 /page-3.html 上有效，则在 cleanUrls 上查看此答案。

PS：如果您的文件名称相同，请确保它们不会相互覆盖。

Answer 3

使用Firebase multisite hosting 保留您当前的站点，您可以在app.example.com 上设置和部署您的flutter 应用程序。

您需要将用户定向到应用网址才能使用该应用。

两个站点需要在同一个项目中，如果您使用 Firebase 身份验证，这将适用于所有站点。