本文由IPFS原力区收集译制，版权所属原作者

使用 Cloudflare 和 Pinata 在 IPFS 上轻松托管

Angular、ReactJS 或 VueJS 应用程序的逐步指南

Cloudflare  和 Pinata  共同为你带来一篇关于星际文件系统(IPFS)网站托管的文章!

Cloudflare 自去年以来一直在运营 IPFS 网关，并从分散的 web 社区获得了惊人的使用和反馈。除了 IPFS 网关，Cloudflare 还为你提供了使用该网关在 IPFS 上托管网站时无需麻烦的SSL 证书。

Pinata 是使用 IPFS 最简单的方法，它提供了快速可靠的基础设施和工具来存储 IPFS 生态系统中的内容。

本文将深入探讨如何在 IPFS 上托管一个网站，以及如何使用 Cloudflare 和 Pinata 的组合使其保持在线。

但是，在直接跳到教程之前，了解人们谈论在 IPFS 上托管网站时幕后发生了什么是很重要的。

如何在IPFS上托管网站? 

在IPFS上托管网站需要做两件事：

• 将网站固定在 IPFS 网络的源节点上

• 检索节点，用于从 IPFS 检索网站。对于大多数人来说，这通常采用 IPFS 网关的形式

源节点

源节点是最初向其中添加内容并使其对 IPFS 网络的其余部分可用的地方。当其他节点开始请求所需的内容时，源节点是它们最初检索内容的位置。 

网关节点

为了从 IPFS 网络检索所需的内容，你需要访问 IPFS 节点。这个节点将为 IPFS 网络提供它想要的内容的加密散列，IPFS 网络将找到一个包含内容副本的节点，并将其提供给检索节点。

虽然这个检索节点可以在你的计算机上本地运行，但是对于许多人来说，检索节点将采用IPFS 网关的形式。网关本质上是 IPFS 节点，允许你从 IPFS 检索内容，而无需自己托管  IPFS 节点。IPFS 网关允许任何人通过使用通常格式如下的链接从 IPFS 检索内容: 

https://gateway.pinata.cloud/ipfs/QmWcLKHWqrRB95zQnb4vX8RRgoGsVm5YAUHyZyiAw4mCMQ/ 

上面链接的“qmwclkhwq95zqnb4vx8rrgogsvm5yauhyzyiaw4mcmq”部分是请求的内容标识符(CID)。重要的是要认识到，你可以通过访问任何公共网关来检索相同的内容，而不仅仅是Pinata 运行的一个网关。例如，尝试在以下公共网关检索 CID：

• https://cloudflare-ipfs.com/ipfs/QmWcLKHWqrRB95zQnb4vX8RRgoGsVm5YAUHyZyiAw4mCMQ

• https://ipfs.io/ipfs/QmWcLKHWqrRB95zQnb4vX8RRgoGsVm5YAUHyZyiAw4mCMQ

注意到如何从每个网关检索相同的内容了吗？这是因为提供给每个网关的 CID 是相同的。当你访问每个网关时，它搜索 IPFS 网络，直到找到 CID“QmWcLKHWqrRB95zQnb4vX8RRgoGsVm5YAUHyZyiAw4mCMQ”的内容。一旦找到该内容，网关就会在 web 浏览器中将其提供给你。

有意义吗？太棒了。现在你已经了解了一些幕后发生的事情，让我们进入教程。

如何为IPFS准备网站

在 IPFS 上托管网站与在云上托管 web 服务器略有不同。你的网站可能需要稍作调整才能在IPFS 网络上正常运行。 

重要的规则是:

• 网站的所有内容必须包含在一个 build 文件夹中，其中包含一个 index.html 文件。

• 文件中的所有链接都应该是相对链接。

如果你使用的是 javascript 框架，事情可能会更棘手。下面介绍如何使用 IPFS 获得三个流行的框架：Angular、ReactJS 和 VueJS。 

Angular

对于本教程的目的，假设你有一个可用的 Angular 应用程序。如果没有，请查看Angular快速入门指南以获得更多信息。

要准备 Angular 应用程序，请打开应用程序在索引中的 src 文件夹中的 index.html。将<base href>标签更改为：

<script>     document.write('<base href="'+window.location.pathname+'"/>');</script>

一旦你做了这个改变，通过在你的项目目录的根目录下运行以下代码来构建你的应用程序：

ng build --prod --aot

现在，你在 Angular 应用程序的“dist”文件夹中应该有一个更新的IPFS兼容构建。

下面是一个兼容 IPFS 的 Angular 应用程序的例子:

• Github的例子

• IPFS网关链接 

ReactJS: 

对于本教程的目的，假设你已经有了一个工作的 React 应用程序。如果没有，可以使用 Create-Response-App 轻松创建一个。

在 React 应用程序的根目录中，打开包。并将以下条目添加到文件的顶部:

"homepage": "./",

一旦你做了这个变动，通过在你的项目目录的根目录下运行以下代码来构建你的应用程序:

npm run build

你现在在 React 应用程序的“build”文件夹中应该有一个更新的IPFS兼容构建。

下面是一个兼容 IPFS 的 React 应用程序的例子

• Github的例子

• IPFS网关链接 

VueJS:

对于本教程的目的，假设你已经有了一个可用的 Vue 应用程序。如果没有，可以使用Vue CLI轻松创建一个。

在Vue应用程序的根目录中，创建一个名为“Vue .config.js”的文件。在这个文件中放入以下内容:

module.exports = {    publicPath: './'};

一旦你做了这个调整，通过在你的项目目录的根目录下运行以下代码来构建你的应用程序:

npm run build

你现在应该在 Vue 应用程序的“dist”文件夹中有一个更新的IPFS兼容构建。

下面是一个兼容IPFS的Vue应用程序的例子

• Github的例子

• IPFS网关链接

将网站添加到 IPFS 

现在你已经准备好了我们的网站，你可以进入更有趣的部分。

在 IPFS 上托管网站。

在 IPFS 上托管时，一定要记住 IPFS 并不是一个永远存储数据的神奇的云。为了让 IPFS 上的其他节点能够访问内容，需要将具有该内容的节点连接到网络上的其他节点。

这意味着当你在 IPFS 上托管你的网站时，你需要确保无论你在哪个节点上托管你的内容都应该是在线的。为此，你有两种选择:

简单的方法

对于那些不希望维护自己的专用服务器来运行 IPFS 节点的人，Pinata 提供了一个简单的替代方案。如果你还没有注册帐户，可以通过 https://pinata.cloud/signup 免费注册。

一旦你有了帐号，访问 Pinata 上传页面，进入“上传目录”。从这里，简单地浏览你的本地机器，找到包含你的网站构建的目录，然后单击“Upload”。

上传完成后，访问 Pin 资源管理器。你应该在列表的顶部看到你网站的记录。

继续，注意“IPFS散列”并继续下一步!

困难的方式

如果你想自己做任何事情，那么在云提供商上自托管节点是一个不错的选择。如果你想沿着这条路走下去，你可以阅读我们的指南了解完整的安装过程：如何在 Digital Ocean 上部署 IPFS 节点。 

一旦节点启动并运行，就需要将网站的构建目录转移到承载节点的远程机器上。你可以使用 SCP 在你的本地计算机上运行以下命令，在包含你的网站构建文件夹的目录中实现这一点:

scp -r yourBuildFolder username@remoteAddress:pathOnRemoteMachine 

从这里，你可以在承载IPFS节点的远程机器上运行以下命令，将文件夹添加到 IPFS：

ipfs add -r /path/to/directory-with-your-website

查找输出的最后一个哈希，这将是你的网站在 IPFS 上的哈希。

如果成功了，恭喜你，你现在可以进入下一步了!

再次检查你的网站是否在IPFS上工作

在你做任何其他事情之前，请再次检查你的网站在 IPFS 上是否正常工作。为此，请访问：https://gateway.pinata.cloud/ipfs/yourWebsiteHash来确认网站是否正确加载。

如果你通过访问网关上的哈希接收到类似于文件资源管理器的内容，那么你的应用程序很可能需要修改一些定制代码，以便使用IPFS。

 使用域名和 Cloudflare 改进你的网站 

在指南的这一点上，你应该能够通过访问这样的门户访问你的网站:

https://gateway.pinata.cloud/ipfs/yourWebsiteHash 

但是，IPFS哈希值不是很适合人类阅读，你可能不想每次访问你的网站时键入类似 https://gateway.pinata.cloud/ipfs/QmWcLKHWqrRB95zQnb4vX8RRgoGsVm5YAUHyZyiAw4mCMQ/ 的码。那么，你能做些什么来改善这种情况呢?

你可以把你的网站放在一个域名后面！快去买一个。

已经有一个了吗?好的！现在你已经有了自己的域名，让我们来了解一下将 IPFS 网站放在后面需要什么。

Cloudflare 作为网关提供商

要将承载在 IPFS 上的网站放在域名后面，你需要一个 IPFS 网关。在本指南中，我们将使用Cloudflare 作为服务提供商，将我们的网站置于一个域名之后。

Cloudflare目前提供一个专用的IPFS网关服务作为其平台的一部分。Cloudflare 的网关与众不同之处在于，它能够利用 Cloudflare 拥有150多个数据中心的全球网络作为缓存层。这意味着，无论你身在何处，Cloudflare 网关上缓存的内容都将快速解析。

Cloudflare 提供的另一个好处是能够以超级简单的方式将网站置于 HTTPS 之后。如果你是新站长，这意味着你的用户的流量将在他们的计算机和 Cloudflare 的网关之间加密。因此，浏览器会认为你的网站更安全，你甚至会在谷歌搜索引擎中遇到保护，因为你的网站被认为是用户访问更安全的。 

设置你的 DNS 记录指向 Cloudflare

要将你的域名连接到 Cloudflare 并将其指向IPFS网站，需要采取以下步骤: 

去你购买域名的地方，应该有一个区域来管理你的域名的“DNS记录”。

编辑记录，使你有两个条目:

• 一个CNAME记录你的your.domain为www.cloudflare-ipfs.com的域

• 一个用于_dnslink.your.domain的值为dnslink=/ipfs/yourWebsiteHash的域

使用 Cloudflare 保护你的网站 

既然您的 DNS 记录指向 CloudFlare 的网关，那么您应该能够通过转到go.domain来查看您的网站。但在完成之前还有一个步骤需要你做，那就是在你的网站上应用一个免费的SSL证书。 

Cloudflare 让这变得超级简单。

你所要做的就是转到 https://www.cloudflare.com/distribut-web-gateway/

然后滚动到页面的底部，在那里你会看到:

一旦你到了那里，只需输入你网站的域名，然后点击“提交”。如果你看到一条消息说“Certificate is live”，恭喜你，你已经完成了! 

作为已完成网站的示例，请访问https://deploypinata.com/ 

故障排除

这里有一些你可能会遇到的常见问题以及如何解决它们

 网关无法在 IPFS上找到你的网站 

IPFS 网络每天都在变得越来越大。有时，可能需要一段时间才能找到内容。如果某个特定的网关无法检索到你的网站，则很有可能由于太多人同时请求内容而导致网站过载。在再次尝试检索网关上的内容之前，请尝试等待一段时间。

在向 Cloudflare 提交你的域名以获得SSL证书时，你收到“错误:未能生成对主机名的请求”

如果你在向 Cloudflare 提交你的域名后收到此消息，请再次检查并确保你只是在提交your.domain域转换为文本字段。输入（如http://your.domain或your.domain/）将无法工作。例如我们的示例网站https://deploypinata.com/，需要deploypinata.com作为输入。

你收到了“证书有效”，但 HTTPS 版本的网站无法工作

有时候这些东西需要一点时间来传播，可能在联系 Cloudflare 之前需要约一个小时。

——全文完——

本文由IPFS原力区编译，原文链接：

https://medium.com/pinata/how-to-easily-host-a-website-on-ipfs-9d842b5d6a01

本文源自公众号「IPFS原力区」（WX号：IPFS-FORCE），定时更新优质讯息