如何将 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 网络应用程序。例如，example.com/profile/username 需要在读取变量 username 后加载 Flutter Web 应用。
4. 我只是对如何在现有 Firebase 托管网站中加载 Flutter Web App 版本感到困惑？
5. 我是否应该在不同的托管链接中托管 Flutter Web 应用并将其加载到现有域页面内的 iFrame 中？

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

Answer 1

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

1.运行 Flutter Build：

flutter build web

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

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

将所有文件从 Flutter 构建目录复制到 public 目录后，它应该是这样的：

请注意，我已将 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 2

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

Answer 3

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

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

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