后端开发教程 - Java、Spring Boot 实战 - msg200.com
▲🔥 Next.js、ZEIT Now 和 Firebase 入门
▲ 注册 ZEIT
🔥 设置 Firebase 项目
▲ 设置 ZEIT Now CLI
🔥 设置 Firebase CLI
▲🔥 立即使用 Firebase 密钥进行设置
🔥 创建 Firestore 索引
🔥 设置 Firebase 函数
▲ 立即部署至 ZEIT
📌 参考
🔗 相关文章
本教程将指导您为 Next.js、ZEIT Now 和 Firebase 设置一个最小模板项目。
- 我附上了很多截图，即使你现在不想创建项目，也能大致了解一下这些工具的使用体验。我认为这是对 2020 年快速入门开发者产品的最新进展的一个很好的概括。
- 模板项目是官方 Next.js with-firebase-authentication-serverless示例的扩展，具有更多功能。
- 本教程提供了有关在 Firebase 中设置暂存和生产环境以及使用 Firebase 密钥配置 ZEIT Now 的一些额外指导。
最近，我开始了一个新的副项目，使用：
我喜欢这种工具组合✨所以我决定整理这个详细的教程。
您可以使用这个模板项目进行操作：
benzguo / nextjs-now-firebase
Next.js + ZEIT Now + Firebase [模板]
该模板还包含Tailwind CSS（样式几乎为零）。注册页面如下所示：
该应用程序包括：
- 注册、登录、退出
- 更新显示名称
- 将对象添加到 Firestore 集合
- 列出 Firestore 集合中的对象（使用firestore-pagination-hook）
- 使用简单的 Firebase 函数获取数据（使用getInitialProps进行服务器端渲染）
▲ 注册 ZEIT
我使用了电子邮件注册流程，觉得它非常棒✨您可以查看 ZEIT 入职流程的屏幕截图[⤵️ 这里]。
我们将在教程结束时建立一个 ZEIT Now 项目 - 您现在要做的就是注册。
🔥 设置 Firebase 项目
登录您的 Firebase 帐户，并创建两个项目（一个用于您的暂存环境，另一个用于您的生产环境）。
您需要点击几下才能完全配置一个新的 Firebase 项目。点击此处查看完整演示：
▲ 设置 ZEIT Now CLI
安装 Now CLI并运行now login
🔥 设置 Firebase CLI
安装 Firebase CLI并运行firebase login
如果您还没有这样做：
- 从 GitHub 模板仓库生成新项目
- 将其克隆到你的机器上
- 并导航到终端中的目录。
benzguo / nextjs-now-firebase
Next.js + ZEIT Now + Firebase [模板]
将项目添加到 Firebase CLI
运行firebase use --add以将您创建的两个项目添加到 Firebase CLI。使用“staging”和“production”作为项目别名。
在后台，此配置存储在您的.firebaserc
▲🔥 立即使用 Firebase 密钥进行设置
暂存环境
首先，我们将使用来自 Firebase 的密钥配置我们项目的暂存环境。
在 Firebase 控制台中，打开您的暂存项目，导航到“服务帐户”选项卡，然后单击“生成新私钥”以下载您的管理员 SDK 密钥。
将密钥文件保存在functions目录中serviceAccount-staging.json
📁 函数
═── serviceAccount-staging.json
⚠️ 您的私钥（位于您的服务帐号密钥文件中）可让您访问项目的 Firebase 服务。请妥善保管您的私钥，切勿将其存储在公共代码库中。
请注意，这些
serviceAccount*文件位于项目的 中.gitignore，因此不会被签入到你的仓库。请务必遵循最佳实践来确保这些密钥的安全！🔒
接下来，找到您的应用程序密钥（在项目设置下）。
在模板项目中包含的.env和文件中输入这些变量。.env.build
创建两个env文件：$ touch .env$ touch .env.build
.env：运行时环境变量.env.build：构建步骤环境变量
打开编辑器，并将以下内容添加到两个新.env文件中（填写您的 Firebase 密钥）：
.env
# .env
# == Firebase app keys (staging) ==
FIREBASE_API_KEY=■■■■■■■■-■■■■■■■■
FIREBASE_AUTH_DOMAIN=■■■■■■■■.firebaseapp.com
FIREBASE_DATABASE_URL=https://■■■■■■■■.firebaseio.com
FIREBASE_PROJECT_ID=■■■■■■■■
FIREBASE_STORAGE_BUCKET=■■■■■■■■.appspot.com
FIREBASE_MESSAGING_SENDER_ID=■■■■■■■■
FIREBASE_APP_ID=1:■■■■■■■■:web:■■■■■■■■
FIREBASE_MEASUREMENT_ID=G-■■■■■■■■
.env.build
# .env.build
# == Firebase app keys (staging) ==
FIREBASE_API_KEY=■■■■■■■■-■■■■■■■■
FIREBASE_AUTH_DOMAIN=■■■■■■■■.firebaseapp.com
FIREBASE_DATABASE_URL=https://■■■■■■■■.firebaseio.com
FIREBASE_PROJECT_ID=■■■■■■■■
FIREBASE_STORAGE_BUCKET=■■■■■■■■.appspot.com
FIREBASE_MESSAGING_SENDER_ID=■■■■■■■■
FIREBASE_APP_ID=1:■■■■■■■■:web:■■■■■■■■
FIREBASE_MEASUREMENT_ID=G-■■■■■■■■
# == Firebase admin keys (from serviceAccount-staging.json) ==
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-■■■■@■■■■■■■■.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\n■■■■■■■■\n-----END PRIVATE KEY-----\n
⚠️ 这些密钥可访问您项目的 Firebase 服务。请妥善保管它们，切勿将其存储在公共代码库中。
请注意，这些
.env*文件位于项目的 中.gitignore，因此不会被签入到你的仓库。请务必遵循最佳实践来确保这些密钥的安全！🔒
现在，您已准备好尝试在本地运行该应用程序。
$ npm install$ npm run dev
当您在浏览器中打开http://localhost:3000 时，您应该会看到此页面：
尝试创建一个帐户！✅
生产环境
现在，我们将使用来自 Firebase 的密钥配置项目的生产环境。
在 Firebase 控制台中打开您的生产项目，然后按照上述相同的步骤操作：
- 下载您的管理密钥
/functions/serviceAccount-production.json - 在 Firebase 控制台的项目设置页面中找到您的应用密钥。
运行以下命令将您的生产 Firebase 密钥添加到 Now：
$ now secrets add firebase-api-key ■■■■■■■■-■■■■■■■■
$ now secrets add firebase-auth-domain ■■■■■■■■.firebaseapp.com
$ now secrets add firebase-database-url https://■■■■■■■■.firebaseio.com
$ now secrets add firebase-project-id ■■■■■■■■
$ now secrets add firebase-storage-bucket ■■■■■■■■.appspot.com
$ now secrets add firebase-messaging-sender-id ■■■■■■■■
$ now secrets add firebase-app-id 1:■■■■■■■■:web:■■■■■■■■
$ now secrets add firebase-measurement-id G-■■■■■■■■
$ now secrets add firebase-client-email firebase-adminsdk-■■■■@■■■■■■■■.iam.gserviceaccount.com
$ now secrets add -- firebase-private-key "-----BEGIN PRIVATE KEY-----\n■■■■■■■■\n-----END PRIVATE KEY-----\n"
🔥 创建 Firestore 索引
这里，我们将演示如何在 Firestore 中创建索引。在迭代应用的数据模型时，您会经常经历这个流程。
导航到http://localhost:3000/spaces，然后打开浏览器的控制台。
您应该会在控制台中看到一个错误，其中包含一个创建索引的链接。
点击链接后，您将进入 Firestore 仪表板，其中有一个用于创建新索引的模式：
此工作流程非常适合原型设计。当您完善数据模型后，就可以切换到从 CLI部署索引。
🔥 设置 Firebase 函数
在这里，我们将配置 Firebase 函数以支持部署到暂存和生产，然后部署函数。
现在，导航到http://localhost:3000/account
你应该会看到一个错误！🛑
此页面向 Firebase 函数发出请求，但我们尚未部署该函数。
为了设置函数，我们将使用一个environment配置变量来配置我们的暂存和生产项目。函数使用此配置变量来决定在运行时使用哪些键。
$ firebase use staging
Now using alias staging (my-project-staging)
$ firebase functions:config:set app.environment="staging"
✔ Functions config updated.
$ firebase use production
Now using alias production (my-project-production)
$ firebase functions:config:set app.environment="production"
✔ Functions config updated.
现在，我们可以将功能部署到暂存和生产阶段。
首先，安装依赖项：$ cd functions && npm install && cd ..
部署到暂存区：$ firebase deploy -P staging --only functions
部署到生产环境：$ firebase deploy -P production --only functions
再次打开账户页面：http://localhost:3000/account。
您现在应该可以正常加载页面了！✅
▲ 立即部署至 ZEIT
您已到达最后一步！🏁🥳
运行now以设置 ZEIT Now 项目并部署到生产中。
$ now
将来，您可以通过运行以下命令将应用程序部署到生产环境：now --prod
要在本地运行应用程序，请运行now dev
📌 参考
在本地运行应用程序（使用暂存环境）
$ now dev
将函数部署到暂存区
$ firebase deploy -P staging --only functions
将功能部署到生产环境
$ firebase deploy -P production --only functions
在本地运行函数
$ cd functions && npm run shell
部署到生产环境
$ now --prod
本地运行函数
要在本地运行 Firebase 函数，请导航到函数目录并运行npm run shell
$ cd functions && npm run shell
...
✔ functions: Emulator started at http://localhost:5000
i functions: Loaded functions: getEnvironment
firebase > getEnvironment({})
Sent request to function.
firebase >
RESPONSE RECEIVED FROM FUNCTION: 200, {
"result": {
"environment": "staging"
}
}
该项目配置为在本地运行函数时使用暂存环境。
在本地运行函数对于开发来说可能很方便，但处理经过身份验证的函数可能会比较棘手。Firebase 有一些本地模拟器，但目前尚不清楚它们是如何模拟身份验证的。
通常，我只是将函数直接部署到暂存区，然后打开http://localhost:3000来验证更改。
🔗 相关文章
