星际文件系统或 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 网络。
NB Cloudflare 尚未向所有人介绍此服务。 该服务可能会在 2022 年底向公众开放。
-
什么是 IPFS？
-
IPFS 的工作原理
-
什么是 Cloudflare 页面？
-
IPFS 如何与 Cloudflare 页面配合使用
-
将网站部署到 Cloudflare Pages
什么是 IPFS？
正如我们所提到的，IPFS 是“星际文件系统”的缩写。 这个名字听起来像是科幻电影中的技术。
在区块链中，一切都发生在节点上。 这些节点可以相互通信并交换文件。
上图精美地展示了 IPFS 网络。 右边的图像代表一个集中式存储系统，其中所有数据都存储在一个集中式服务器上，所有其他计算机都请求集中式服务器访问数据。
在 IPFS 中，数据分布在节点之间。 它类似于区块链，因为它使用节点来贡献计算能力来验证交易。 IPFS 有数千个连接到 IPFS 网络的单独节点，并共享它们的带宽以存储来自 IPFS 网络的文件。
IPFS 解决了中心化系统存在的一些重大问题。 例如，集中式系统更容易受到攻击和数据泄露。 由于所有信息都存储在一个地方，因此攻击单个点可能会泄露重要信息。
超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →
此外，如果中央实体以某种方式失败，您将无法再访问您的文件。 这样的事件发生在 2021 年，当时 Facebook、Instagram 和 WhatsApp 服务器宕机 数小时。 人们无法访问他们存储在这些平台上的聊天或媒体。 但 IPFS 并非如此。
集中式系统也可以快速审查。 特定国家/地区的许多网站都被禁止，因为它们依赖于集中式系统。 但是，在使用 IPFS 时，您的网站或资产无法被审查。
IPFS 的工作原理
IPFS 的工作非常有趣。 在传统的 Web2 存储系统中，我们访问我们要访问的文件的位置。
使用访问特定文件时 http://或者 https://，使用其位置查询特定文件。 文件可以是图像、网页、媒体文件等。链接是映射到特定服务器或一组服务器的标识符。
服务器的所有者控制存储在服务器中的资产。 如果该位置仍然保存该文件，它会将其发送给用户，并且浏览器将加载它。 如果服务器出现故障或所有者决定删除文件，您将无法再访问它们。
为了解决这些问题，IPFS 使用内容寻址。 内容寻址使用文件的指纹对其进行寻址。 存储在 IPFS 中的内容获取其内容标识符或 CID。
CID 只不过是一个 哈希 。 哈希值永远不会改变，所以无论何时你尝试使用相同的 CID 访问内容，你总是会得到相同的东西。
来自 LogRocket 的更多精彩文章：
-
不要错过 The Replay 来自 LogRocket 的精选时事通讯
-
使用 React 的 useEffect 优化应用程序的性能
-
之间切换 在多个 Node 版本
-
了解如何 使用 AnimXYZ 为您的 React 应用程序制作动画
-
探索 Tauri ，一个用于构建二进制文件的新框架
-
比较 NestJS 与 Express.js
-
发现 TypeScript 领域中使用的流行 ORM
您可以在此处了解有关 IPFS 工作原理的更多信息 。
什么是 Cloudflare 页面？
Cloudflare Pages 是一个用于部署网站的 JAMStack 平台。 它以开发人员为中心，可轻松与任何 Git 提供商集成。 它还将网站部署到 Cloudflare 边缘网络，帮助网站加载更快。
您还可以使用 Cloudflare Workers 来集成动态功能 。 编写服务器端代码， 您可以使用Cloudflare Workers 而无需运行专用服务器。
Cloudflare Pages 支持大多数流行的框架，并为不同的框架提供 专门的指南 。 它提供了一个简单的界面，您可以使用它快速将您的 JAMStack 网站部署到云端。 Cloudflare 提供了更多工具来与 Pages 集成，使其成为一个全栈应用程序。 您可以编写无服务器代码并将其与 Cloudflare Pages 集成。
Cloudflare 还提供诸如 R2 之类的服务，它为存储管理提供对象存储。
IPFS 如何与 Cloudflare 页面配合使用
Cloudflare 已开始提供构建和访问 Web3 产品的服务。 它提供将您的站点部署到 Cloudflare Pages 并将其提供给 IPFS 网络的服务。 让我们简要讨论一下它是如何提供这项服务的。
Opting for service in Cloudflare will make a call to the IPFS index proxy. The primary purpose of this call is to fetch your website’s files and convert them to CIDs. Then, an IndexDB is used for associating the CIDs with the files.
Once this step is completed, the call tells the Cloudflare IPFS nodes that the CIDs are available for the files. Now, you can access the files using the CID.
来源： https ://blog.cloudflare.com/cloudflare-pages-on-ipfs/ 。
将网站部署到 Cloudflare Pages
让我们将 React 应用程序部署到 Cloudflare Pages 。 虽然我们正在部署一个 React 应用程序，但您可以选择任何其他流行的框架。 您可以查看 Cloudflare 框架指南 ，了解如何部署使用您喜欢的框架构建的站点。
在本文中，我们将使用 create-react-app 来生成 React 应用程序。 您可以在终端中运行以下命令：
npx create-react-app demo-app
Here, demo-app is the application name you want to generate. Once the scaffolding is complete, cd into the folder and run npm run start. This will start your React application on port 3000. You can access your application from the localhost:3000 URL.
Our basic Next.js application consists of a single-page index.js file. This file renders as the homepage. You can customize the page as you want. For this example, let’s add a simple heading.
The final code for index.js will be like the following snippet:
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name='description' content='Generated by create next app' />
<link rel='icon' href='/favicon.ico' />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>Hello World!</h1>
</main>
</div>
);
}
现在，将此应用程序推送到 GitHub 存储库。 如果您使用的是 VS Code，则可以使用命令行或 Git VS Code Git 扩展。
将存储库推送到 GitHub 后，从 Cloudflare 仪表板打开 Cloudflare Pages （如果没有，则必须创建一个新帐户）。 从 Cloudflare 页面菜单中，单击 创建项目 下拉菜单。
在这里，您将拥有三个选项。 第一种选择是使用 Git 托管服务提供商进行部署。 第二个选项是直接上传文件，第三个是他们的 Wrangler CLI 指南的链接。
您可以使用 Cloudflare 的 Wrangler CLI 编写 Cloudflare Workers。 对于本文，选择第一个选项。
目前，Cloudflare 支持 GitHub 和 GitLab。 您可以从下一个窗口中选择您首选的 Git 托管服务提供商，并向 Cloudflare 授予必要的权限。 成功配置 GitHub 或 GitLab 后，您将能够在此处查看存储库。
选择要部署的存储库，然后单击 Begin Setup 。 您可以从下一个屏幕更改项目名称或选择要部署的分支。 如果您熟悉其他服务，例如 Netlify 或 Vercel，此窗口可能看起来很相似。
选项中选择 Create React App 作为框架预设 从Build settings ，因为我们将在这里部署一个 React 站点。
追剧达人TV版App，超多线路的TV盒子，无限制支持三端！
您可以根据您的框架选择框架预设。 对于 Create React App，其余选项保持不变。
部署完成并成功后，您将获得一个 URL，您可以从该 URL 访问已部署的网站。 您还可以从项目的仪表板页面为您的应用程序设置自定义 URL。
现在您已经设置了您的应用程序，您可以将您的应用程序提供给 IPFS。 从您的仪表板选择加入 Cloudflare Pages 与 IPFS 的集成（请记住，此选项尚未对所有人可用）。
一旦您选择了该服务，Cloudflare 就会为您的应用程序的内容编制索引。 索引编制完成并成功后，Cloudflare 将为您提供索引内容的 CID。 使用此 CID，您可以使用任何 IPFS 网关提供商（如 cf-ipfs.com 选择一个 ）访问您的网站，或从此列表中 。
您的 IPFS CID 看起来像 QmU1NvrJgDEBJieYKzjGEYUm6K8xb3uSUREfhaSzF5Gkgi.
使用类似的 IPFS 网关 ipfs.co，您网站的 IPFS 链接将如下所示
您还可以设置单个域而不是整个 CID 来通过 HTTP 或 IPFS 协议访问您的网站。 从 Cloudflare 为您的网站设置自定义域后，您可以使用 DNSLink 使用单个 URL 通过 IPFS 或标准协议访问您的网站，具体取决于客户端。 您只需要在您的域管理设置中使用记录创建一个新的 TXT 记录 dnslink=/ipfs/FOLLOWED_BY_YOUR_CID.
您现在可以通过以下方式访问您的网站 ipns://YOUR_DOMAIN.com.
结论
本文讨论了 IPFS、Cloudflare Pages 以及如何使用 GitHub 将网站部署到 Cloudflare Pages。 我们还讨论了 IPFS 与 Cloudflare 的工作原理。 Cloudflare 还提供其他 Web3 服务，例如自定义 IPFS 网关。
本文还简要介绍了如何利用 Cloudflare Pages 将应用程序部署到 IPFS 网络。 尽管 Cloudflare Pages 与 IPFS 的集成尚未可供所有人试用，但我们可以期待它在 2022 年底前向公众开放。
加入 Bitso 和 Coinsquare 等使用 LogRocket 主动监控其 Web3 应用程序的 组织
影响用户在您的应用程序中激活和交易的能力的客户端问题可能会严重影响您的底线。 如果您对监控 UX 问题、自动显示 JavaScript 错误以及跟踪缓慢的网络请求和组件加载时间感兴趣，请 尝试 LogRocket
LogRocket 就像一个用于 Web 和移动应用程序的 DVR，记录您的 Web 应用程序或网站中发生的一切。 无需猜测问题发生的原因，您可以汇总和报告关键前端性能指标、重放用户会话以及应用程序状态、记录网络请求并自动显示所有错误。
4062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
