在开发 Web 应用时，我们通常会使用前端框架来搭建整个项目。而 Next.js 面向现代化 Web 应用开发，是一个基于 React 的服务器端渲染框架。而 Firebase 是一款 Google 推出的云服务，提供了很多服务，比如实时数据库、身份验证、存储等。
本文主要介绍在 Next.js 中如何将 Firebase 部署到服务器上，同时探讨一些可能会遇到的坑点和解决方法，希望对前端开发者有所帮助。
Firebase 部署前注意事项
在部署 Firebase 之前，我们需要先了解一些注意事项。比如，Firebase 只支持绑定一个自定义域名，也就是说，如果你有多个项目需要部署，每个项目只能绑定一个自定义域名。此外，Firebase 站点服务使用的是 Https，如果你想使用 Http，需要使用 Firebase Hosting 的定制域名。
另外，在使用 Firebase Hosting 进行部署时，需要注意以下几个点：
- 在 Firebase Console 中创建一个项目，并开启 Firebase Hosting，同时确保您已经安装 Firebase Cli 工具
- 在项目根目录中，创建 .firebaserc 文件，并添加项目名称和别名
- 在 public 文件夹中，创建 index.html 文件，这是你要部署的站点入口文件
- 在 package.json 文件中，添加
"firebase-init": "firebase init hosting"命令，用于初始化 Firebase Hosting - 在 package.json 文件中，添加
"firebase-deploy": "firebase deploy --only hosting"命令，用于将站点部署到 Firebase Hosting
Next.js 中部署 Firebase 时的坑点
在将 Firebase 部署到 Next.js 项目中时，需要注意以下几个坑点：
1. Firebase 需要 Https 协议环境才能正常工作
在 Firebase 中，Https 协议是必须的，因此我们需要在 Next.js 中启用 Https 环境。这可以通过以下代码来实现：
-- -------------------- ---- -------
----- - ------------ - - -----------------
----- - ------------ - - --------------
----- - ---- - - ----------------
----- - ----- - - ---------------
----- ---- - ----------------
----- --- - -------------------- --- -------------
----- --- - ------ --- ---
----- ------- - ------------------------
----- ------------ - -
---- ---------------------------- --------------------
----- ---------------------------- ---------------------
--
--------------------- -- -
-------------------------- ----- ---- -- -
----- --------- - -------------- ------
------------ ---- -----------
--------------- --- -- -
-- ----- ----- ----
-------------- ----- -- -------------------------
---
---
其中的 ssl.key 和 ssl.cert 是我们自己生成的 SSL 证书，可以通过 mkcert 来生成。
2. 部署时可能出现 No firebase.json found in project directory. 的错误
这个错误通常是由于没有在项目根目录下创建 firebase.json 文件造成的。我们需要在该文件中设置部署的目标和公开的文件或文件夹。
-- -------------------- ---- -------
-
---------- -
--------- ---------
--------- -
----------------
--------------------
--
----------- -
-
--------- -----
----------- ----------------
-
-
-
-其中 "public": "public" 指定了要部署的资源文件夹，这里使用的是 public 文件夹。
3. 部署时可能出现 You have specified a function that does not exist. 的错误
这个错误会出现在你的 Firebase 的 package.json 文件中， functions 中指定的函数名不存在。我们需要在 functions 文件夹下创建我们所需要的函数，并在 package.json 文件中指定对应的函数名。
-- -------------------- ---- -------
-
------------ -
--------- ------------
------------ ---- --- ----------------
---------- -----------
---------- -
----------------
-
--
-其中 "targets": ["nextjsFunction"] 指定了只打包 functions/nextjsFunction.js 文件。
解决方法
在 Next.js 中部署 Firebase 时，我们需要注意以上的坑点。对于第一个坑点，我们需要启用 Https 环境。对于第二个坑点，我们需要在项目根目录下创建 firebase.json 文件，并在其中指定要部署的目标和公开的文件或文件夹。对于第三个坑点，我们需要创建对应的函数，并在 package.json 文件中指定对应的函数名。
最后，为了方便大家理解，在下面给出了一个示例代码：
-- -------------------- ---- -------
-
------------ -
--------- ------------
------------ ---- --- ----------------
---------- -----------
---------- -
----------------
-
--
---------- -
--------- ---------
--------- -
----------------
--------------------
--
----------- -
-
--------- -----
----------- ----------------
-
-
-
-通过本文的讲解，相信大家已经掌握了在 Next.js 中如何将 Firebase 部署到服务器上的方法，同时也了解了一些可能会遇到的坑点和解决方法。希望能够帮助到大家，让我们在开发过程中更加顺利。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6794de46504e4ea9bd9b71f8