将 Cloudflare 页面与 IPFS 结合使用

了解 LogRocket 的 Galileo AI 如何为您解决最严重的问题 无需注册

星际文件系统（IPFS）是一种点对点超媒体协议。简单来说，IPFS 允许您将资产存储在去中心化存储中。

像以太坊这样的区块链允许您将智能合约部署到区块链网络中，但是如果您将资产或静态文件存储在以太坊网络本身中，则效率不高。这会增加成本，并提供访问文件的较慢的解决方案。 IPFS的出现就是为了解决这个问题。

Cloudflare Pages 允许您从 Git 托管提供商（例如 GitHub 或 GitLab）在云中托管动态页面。您可以使用 Cloudflare Pages 和 Cloudflare Workers 将完整的全栈应用程序部署到云中。

您可以将使用 Hugo、Jekyll 或 Next.js 构建的网站快速部署到 Cloudflare Pages。 Cloudflare 还允许连接 IPFS 网络的网关，您可以使用这些网关访问 IPFS 上托管的文件。您还可以从 Cloudflare Pages 将站点发布到 IPFS 网络。

在本文中，我们将设置一个基本的 Next.js 应用程序，使用 Cloudflare Pages 发布它，然后将其提供给 IPFS 网络。

注意： Cloudflare 尚未向所有人推出这项服务。该服务可能会在 2022 年底向公众开放。

什么是IPFS？

正如我们提到的，IPFS 是“星际文件系统”的缩写。这个名字听起来有点像科幻电影中的技术。

在区块链中，一切都发生在节点上。这些节点可以相互通信并交换文件。

上图精美地展示了 IPFS 网络。右图代表一个集中式存储系统，其中所有数据都存储在集中式服务器上，所有其他计算机都请求集中式服务器访问数据。

在IPFS中，数据分布在节点之间。它类似于区块链，它使用节点贡献计算能力来验证交易。 IPFS 有数千个连接到 IPFS 网络的单独节点，并共享带宽以存储来自 IPFS 网络的文件。

IPFS 解决了中心化系统存在的一些重大问题。例如，集中式系统更容易受到攻击和数据泄露。由于所有信息都存储在一个地方，攻击单个点可能会泄露重要信息。

此外，如果中央实体因某种原因发生故障，您将无法再访问您的文件。这样的事件发生在 2021 年，当时 Facebook、Instagram 和 WhatsApp 的服务器瘫痪了几个小时。人们无法访问这些平台上存储的聊天内容或媒体。但 IPFS 的情况并非如此。

集中式系统也可以被快速审查。特定国家/地区的许多网站都被禁止，因为它们依赖于集中式系统。但是，使用 IPFS 时，您的网站或资产无法受到审查。

IPFS 的工作原理

IPFS 的工作非常有趣。在传统的Web2存储系统中，我们访问我们想要访问的文件的位置。

使用 http:// 或 https:// 访问特定文件时，将使用其位置查询特定文件。文件可以是图像、网页、媒体文件等。链接是映射到特定服务器或一组服务器的标识符。

服务器的所有者控制服务器内存储的资产。如果该位置仍然保存该文件，它会将其发送给用户，浏览器将加载它。如果服务器出现故障或所有者决定删除文件，您将无法再访问它们。

为了解决这些问题，IPFS 使用内容寻址。内容寻址使用文件的指纹来对其进行寻址。存储在 IPFS 中的内容获取其内容标识符或 CID。

CID 只是一个哈希值。哈希值永远不会改变，因此每当您尝试使用相同的 CID 访问内容时，您总是会得到相同的结果。

您可以在此处了解有关 IPFS 如何工作的更多信息。

什么是 Cloudflare 页面？

Cloudflare Pages 是一个用于部署网站的 JAMStack 平台。它以开发人员为中心，并且可以轻松地与任何 Git 提供商集成。它还将网站部署到 Cloudflare 边缘网络中，帮助网站加载速度更快。

您还可以使用 Cloudflare Workers 来集成动态功能。您可以使用 Cloudflare Workers 编写服务器端代码，而无需运行专用服务器。

Cloudflare Pages 支持大多数流行的框架，并针对不同框架提供专门的指南。它提供了一个简单的界面，通过它您可以快速将您的 JAMStack 网站部署到云端。 Cloudflare 提供了更多与 Pages 集成的工具，使其成为全栈应用程序。您也可以编写无服务器代码并将其与 Cloudflare Pages 集成。

Cloudflare 还提供 R2 等服务，为存储管理提供对象存储。

IPFS 如何与 Cloudflare Pages 配合使用

Cloudflare 已开始提供用于构建和访问 Web3 产品的服务。它提供将您的站点部署到 Cloudflare Pages 并将其提供给 IPFS 网络的服务。让我们简单讨论一下它是如何提供这项服务的。

选择 Cloudflare 中的服务将调用 IPFS 索引代理。此调用的主要目的是获取您网站的文件并将其转换为 CID。然后，使用 IndexDB 将 CID 与文件关联起来。

完成此步骤后，调用会告知 Cloudflare IPFS 节点 CID 可用于文件。现在，您可以使用 CID 访问文件。

将网站部署到 Cloudflare Pages

让我们将 React 应用程序部署到 Cloudflare Pages。尽管我们正在部署 React 应用程序，但您可以选择任何其他流行的框架。您可以查看 Cloudflare 框架指南，了解如何部署使用您喜欢的框架构建的站点。

在本文中，我们将使用 create-react-app 生成 React 应用程序。您可以在终端中运行以下命令：

npx create-react-app 演示应用程序

这里，demo-app 是您要生成的应用程序名称。脚手架完成后，cd 进入文件夹并运行 npm run start 。这将在端口 3000 上启动您的 React 应用程序。您可以从 localhost:3000 URL 访问您的应用程序。

我们的基本 Next.js 应用程序由单页 index.js 文件组成。该文件呈现为主页。您可以根据需要自定义页面。对于这个例子，我们添加一个简单的标题。

index.js 的最终代码将类似于以下代码片段：

从 'next/head' 导入 Head；从“下一个/图像”导入图像；从 '../styles/Home.module.css' 导入样式；导出默认函数 Home() { return ( 创建下一个应用 Hello World! ); }

Hello World!