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

Question

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

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

需要注意的一些事项：

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

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

Answer 1

您只需将生成的所有文件粘贴Flutter到 Firebase 托管的公共目录中即可。按着这些次序：

1. 运行 Flutter 构建：

flutter build web

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

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

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

请注意，我已将index.htmlFlutter 重命名为page-3.html并保持原样index.html。

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

3. 提供网站服务：

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

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

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