【问题标题】:How to upload a static website with firebase如何用firebase上传静态网站
【发布时间】:2022-12-19 14:26:55
【问题描述】:

尝试使用 Firebase 更新我的静态网站时,我有点发疯了,最近我不得不在我的机器上重新安装所有东西,并且不记得我之前是如何设法连接和上传我的文件的。

我确定它只是与公共目录文件夹相关的非常简单的东西,但我无法锻炼。当我去部署项目时,它告诉我它上传了 150 个文件,这是正确的,我可以在我的 Firebase 帐户中的“托管”部分下看到这些文件已经上传,但是当我查看该网站时,我只得到一个流派“欢迎 Firebase 托管设置完成”屏幕。

只是为了澄清我的项目的路径(包含 index.html 等)是否位于“C:\site”下,我应该为公共目录输入什么?我试过一个斜杠,将其留空,输入“。”和六个其他选项没有任何乐趣。我还尝试将它们移动到“站点”下名为“公共”的文件夹,但这似乎也没有任何区别。

任何帮助/建议将不胜感激!

【问题讨论】:

  • 可能在您启动项目时键入 yes 来设置 index.html 文件。
  • 在文件 firebase.json 中,您有 "public": "path" 到公共文件夹。并检查您在此公共目录中是否有正确的 index.html 文件。
  • 你在哪里运行firebase init?它应该与您要部署的 HTML 位于同一目录中或(更典型地)在上面。
  • 感谢您的快速回复,是的,就像 index.html 文件在某个时候被覆盖一样简单!我将公用文件夹保留为“。”并替换了索引文件,现在好了!

标签: firebase-hosting


【解决方案1】:

步骤1: 在 firebase 中创建一个新项目和一个 web 实例 访问 firebase.google.com,使用您的 Gmail 帐户登录。登录后转到控制台并添加一个新项目。

第2步:在 IDE 中打开网站 现在,我们需要在 IDE 中打开包含网站文件的文件夹。并打开一个终端。这里我使用的是 VS Code。

第 3 步:注册应用 项目仪表板看起来像这样。在这里单击网络按钮(红色圆圈)。这将创建我们项目的 Web 实例。

enter image description here

现在在这里它会询问我们想要给我们的网站(网络实例)的名称。您可以选择一个,选择“同时设置 Firebase 托管”,然后点击注册应用。

第4步:添加 Firebase SDK 现在,我们将获得一个必须粘贴在我们网站主页正文中的代码 sn-p。

步骤 5: 安装 Firebase CLI 将脚本粘贴到主体中后,返回到 firebase 并单击下一步。现在,您将看到一个命令“npm install -g firebase-tools”,该命令需要在我们拥有网站文件的终端中运行。

步骤 6: 部署到 firebase 托管 现在,在 firebase 网站上给出了应该运行的命令,以便将我们的网站部署到 firebase 托管。

我们可以复制每个代码并将其粘贴到终端中,然后按回车键运行它。第一个是“firebase 登录”。

现在运行“firebase init”,我们将获得以下选项。点击 y 并回车。

在这里,我们需要选择 Hosting: Configure and deploy Firebase Hosting sites,(通过单击空格键)因为这是我们想要的服务。

现在,它会询问我们是要创建一个项目还是使用现有项目。我们将选择现有的,因为我们已经创建了项目。

在这里,我将 static_site(我们创建的 Web 实例)作为选项之一。我会选择这个,因为我们想在这个 web 实例上部署我们的网站。

现在,我们被问到,我们想在公共目录中使用什么?这意味着哪个文件夹应该包含要托管的网站的所有文件。如果我们点击回车键,将自动为我们创建一个公共文件夹。

在这里我们应该键入 y(是)将所有 URL 重写为 index.html。然后点击进入。

您会看到除了其他三个文件之外还创建了一个公用文件夹。现在我们需要做的是将我们所有网站的文件剪切并转移到公共文件夹中。

与我们网站相关的所有文件都应该在公共文件夹中。

现在,我们有最后一个命令来运行 firebase 部署(您可以从 firebase 网站复制)。

命令执行后,我们所有的文件都被推送到 firebase 托管,这将需要一两分钟,我们将获得项目控制台和网站的 URL。

现在我们可以单击托管 URL,我们将在 Internet 上看到我们的网站。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-09-13
    • 1970-01-01
    • 2023-03-07
    • 1970-01-01
    • 2017-08-13
    • 1970-01-01
    • 2016-01-01
    • 2019-10-01
    相关资源
    最近更新 更多