将带有 ExpressJS 后端的 React 应用程序从 Heroku 迁移到 Netlify
将带有 ExpressJS 后端的 React 应用程序从 Heroku 迁移到 Netlify
Heroku 将开始对 Heroku Dynos 收费，这是运行节点服务器所需的资源。如果您正在开发具有前端和后端的全栈应用程序，则需要升级到付费层或迁移到另一个 Web 平台。
Netlify 是市场上提供慷慨免费等级帐户的最佳选择之一。
但是 Netlify 的后端服务与使用 serverless 功能的 Heroku 有很大不同。不能直接使用相同的后端代码库。
但是只需几个简单的步骤，同一个 React 应用程序就可以立即启动并运行！
从 Heroku 迁移到 Netlify 的步骤
-
安装 netlify-lambda 和 无服务器-http
npm --i netlify-lambda serverless-http
2.在 服务器 目录：
-
创建一个空 功能 目录——node.js/express 服务器的原始 js/ts 文件默认会内置到“functions”文件夹中
-
创建一个 源代码 放置后端文件的目录
-
创建一个 距离 放置所有前端构建文件（HTML、CSS 和 JS）的目录
-
创建一个 netlify.thumb 文件（详情如下）
-
更新 包.json 脚本（详情如下）
-
gitignore 以下目录
节点模块
功能
3. 修改后端文件（详情如下）
4.将前端应用中的API端点更新为如下路径（默认）
**/.netlify/functions/[文件名]**
您最终将或多或少地得到以下文件结构：
5. 将您的更改推送到在线存储库（例如 github），然后连接到 Netlify 以开始部署您的 Web 应用程序
恭喜！您的应用程序再次免费启动并运行！
netlify.thumb
此文件可用于配置 Netlify 服务器的构建设置、部署设置和环境变量。
至少，我们需要指定两种配置：
-
要放入“functions”目录的函数
-
将对静态文件的所有请求重定向到允许客户端路由的网站根目录（即使用 React-router 等）
[建造]
功能=“功能” [[重定向]]
来自 = "/*"
至 = "/"
状态 = 200
包.json
不是直接从 Node.js 运行，而是需要模拟该函数以在 Netlify Lambda 上运行，因此我们需要将脚本更改为：
“脚本”：{ “开始”：“./node_modules/.bin/netlify-lambda 服务源代码”，
“构建”：“./node_modules/.bin/netlify-lambda 构建 src” }
更改后端文件
以下是 API 端点的后端文件的基本框架，其文件名 api.js ：
常量表达 = 要求（“表达”）；
常量路由器 = express.Router()
**const serverless = require("serverless-http");** 常量应用程序 = 快递（）； app.use(express.json()); app.use(/.netlify/functions/ **接口"** ，路由器）; router.get("/test", (request, response) => {
返回响应。发送（“你好”）；
}); **module.exports = 应用程序；
module.exports.handler = serverless(app);**
端点 /.netlify/functions/api/test 将返回“你好”
常见问题：Node.js 错误
如果您遇到以下错误：
节点：内部/加密/哈希：71
this[kHandle] = new _Hash(算法, xofLen);
^ **错误：错误：0308010C：数字信封例程：：不支持**
原因是您正在运行具有更新的 openssl 要求的最新版本的 Node。在这种情况下，您需要将脚本更改为：
“脚本”：{ "start": "NODE_OPTIONS= - openssl-legacy-provider ./node_modules/.bin/netlify-lambda 服务 src",
“构建”：“./node_modules/.bin/netlify-lambda 构建 src” }
常见问题：fetch、node-fetch 和 axios
到目前为止，Netlify 上的 lambda 函数仍未运行本机 javascript fetch 函数。即使您可以在本地环境中毫无问题地运行它，Netlify 的边缘服务器也会抱怨 'fetch' 未定义。
一个流行的替代方案是提供 javascript 提取功能的“node-fetch”模块。但是，node-fetch 2.6 和 node-fetch 3.X 都不适用于 Netlify。你会得到一些奇怪的错误，比如：
类型错误：e 不是函数
类型错误：c 不是函数
这与 Webpack 和 Babel 配置有关。但是解决这个问题的一种简单方法是利用 axios 模块。
只需安装 axios 库并将所有 fetch 更改为 axios 即可。
fetch(URL, { method: "Get" }).then(...) => axios.get(URL).then(...)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
