skip to content
rainbow ゆめこ

firebase hosting

/ 3 min read

前提条件

  1. 安装Node.js（建议最新LTS版本，https://nodejs.org）/)
  2. 准备好包含静态文件（如index.html、CSS、JS）的本地文件夹
  3. 一个Google账号用于Firebase登录

步骤

1. 安装Firebase CLI

在终端运行以下命令以全局安装Firebase命令行工具：

Terminal window
npm install -g firebase-tools

2. 登录Firebase

运行以下命令并通过浏览器登录你的Google账号：

Terminal window
firebase login

3. 初始化Firebase项目

进入你的本地静态网站文件夹（例如my-website），然后运行：

Terminal window
cd path/to/my-website
firebase init hosting

在初始化过程中：

  • 选择“Hosting”作为要设置的功能（使用空格键选择，然后按回车）
  • 选择“Use an existing project”或创建一个新项目
  • 当提示“Public directory”时，输入你的静态文件所在文件夹（通常是.或public，如果你的文件直接在当前目录，输入.）
  • 配置为单页应用？根据需要选择（通常选“No”，除非是React/Vue等SPA）
  • 是否覆盖现有文件？选择“No”

完成后，Firebase会在你的项目目录中生成以下文件：

  • .firebaserc：项目配置文件
  • firebase.json：Hosting配置文件
  • （可选）404.html和index.html，如果选择了覆盖

4. 检查firebase.json

确保firebase.json文件内容正确，例如：

{
  "hosting": {
    "public": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
  • "public": "." 表示使用当前目录作为静态文件根目录
  • "rewrites" 可选，用于单页应用，确保所有路由指向index.html

5. 本地测试

在本地预览你的网站：

Terminal window
firebase serve

访问http://localhost:5000查看效果。

6. 部署到Firebase Hosting

运行以下命令将你的网站部署到Firebase：

Terminal window
firebase deploy

部署完成后，Firebase会提供一个托管URL（例如https://your-project-id.web.app）。

7. 验证部署

打开提供的URL，确认你的静态网站已正确上线。

常见问题

  • 更新网站：修改本地文件后，重新运行firebase deploy。
  • 自定义域名：在Firebase控制台的Hosting部分添加自定义域名。
  • 错误处理：检查终端输出，确保没有权限或文件路径错误。

参考