在 Firebase 托管中动态包含域名答案

【问题标题】：Dynamic inclusion of domain name in Firebase hosting在 Firebase 托管中动态包含域名
【发布时间】：2018-08-30 15:30:55
【问题描述】：

我有一个通过 Firebase 托管发布的 index.html 文件。我在 Firebase 控制台中设置了一个 DEV(私奔) 和 PROD(uction) 应用程序。并成功地将我自己的域链接到它 (https://firebase.google.com/docs/hosting/custom-domain)

此页面包含 opengraph 元数据，并且作为一部分的 og:url 应指向 mydomain.dev.com（当发布到 DEV 时）或 mydomain.prod.com（当发布到 PROD 时）。我不想开始复制 index.html 文件（代码维护），那么如何通过 Firebase 托管动态插入正确的域？

<!DOCTYPE html>
<html lang="en">
 <head>    
 <meta charset="utf-8">
 <meta property="og:url" content="mydomain.dev.com or mydomain.prod.com">
 <meta property="og:type" content="website" />  
 <meta property="og:title" content="Some title" />
 <meta property="og:description" content="some description" />      
 <meta property="og:image" content="/assets/img/og.jpg" />
 ...

【问题讨论】：

标签： firebase firebase-hosting

【解决方案1】：

有两种方法可以处理这个问题。

1) 部署前的构建步骤

拥有一个包含变量的 index.html 模板文件。

<meta property="og:url" content="{{domain}}">

然后，您可以使用gulp 或webpack 之类的构建工具将domain 变量替换为您正在部署的特定站点的域。

2) 函数渲染

这将有一个类似的 index.html 模板，位于 Firebase Function 中。然后，您将您的主机映射为由 Function 支持，这将根据请求使用正确的域呈现 HTML。

【讨论】：

选项 1 看起来很有趣（选项 2 会导致许多函数调用 = 成本）。这可以以某种方式集成到 vscode 中吗？
函数响应是通过主机路由的，所以你可以set the cache，只要你不想。这样，您将获得最少的函数调用，并且大部分只是托管使用。