如何在IPFS上轻松托管网站

显示全部楼层 · 发表于 2019-6-26 06:01:28

使用Cloudflare和Pinata在IPFS上轻松托管Angular，ReactJS或VueJS应用程序的分步指南。

Cloudflare和Pinata正在联手为您带来一篇关于星际文件系统（IPFS）网站托管的博文！（本文由IPFS中国社区编译）
自去年以来，Cloudflare一直在运营IPFS网关，并且已经从分散的网络社区中获得了惊人的使用和反馈。除了IPFS网关之外，Cloudflare还为您提供无障碍SSL证书，同时使用网关在IPFS上托管网站。
Pinata是通过提供快速可靠的基础架构和工具来在IPFS生态系统上存储内容来使用IPFS的最简单方法。
本文将深入探讨如何在IPFS上托管网站以及如何使用Cloudflare和Pinata的组合将其保持在线。
但是，在直接跳到教程之前，当人们谈论在IPFS上托管网站时，了解幕后发生的事情非常重要。
如何在IPFS上托管网站？
在IPFS上托管网站需要两件事：
1.将网站固定在IPFS上的源节点。
2.用于从IPFS检索网站的检索节点。对于大多数人来说，这通常采用IPFS网关的形式。
源节点
源节点是最初将内容添加到IPFS网络的其余部分并使其可用的位置。当其他节点开始请求所需内容时，源节点就是他们最初从中检索它的地方。

网关节点
要从IPFS网络检索所需内容，您需要具有对IPFS节点的访问权限。该节点将为IPFS网络提供其所需内容的加密散列，并且IPFS网络将找到具有内容副本的节点以提供回检索节点。
虽然此检索节点可以是在您的计算机上本地运行的节点，但对于许多人来说，检索节点将采用IPFS网关的形式。网关本质上是IPFS节点，允许您从IPFS检索内容而无需自己托管IPFS节点。IPFS网关允许任何人通过使用通常格式如下的链接从IPFS检索内容来实现此目的：
https://gateway.pinata.cloud/ipfs/QmWcLKHWqrRB95zQnb4vX8RRgoGsVm5YAUHyZyiAw4mCMQ/
上面链接的“QmWcLKHWqrRB95zQnb4vX8RRgoGsVm5YAUHyZyiAw4mCMQ”部分是要求的内容标识符（CID）。重要的是要意识到您可以通过访问任何公共网关来检索相同的内容，而不仅仅是Pinata运行的网关。例如，尝试在以下公共网关检索该CID：

https://cloudflare-ipfs.com/ipfs/QmWcLKHWqrRB95zQnb4vX8RRgoGsVm5YAUHyZyiAw4mCMQ
https://ipfs.io/ipfs/QmWcLKHWqrRB95zQnb4vX8RRgoGsVm5YAUHyZyiAw4mCMQ
请注意如何从每个网关检索相同的内容？那是因为提供给每个网关的CID是相同的。当您访问每个网关时，它搜索IPFS网络，直到找到CID“QmWcLKHWqrRB95zQnb4vX8RRgoGsVm5YAUHyZyiAw4mCMQ”的内容。找到该内容后，网关会在您的Web浏览器中将其提供给您。
合理？真棒！现在您已经了解了幕后发生的事情，让我们来看看教程吧！
如何为IPFS准备您的网站
在IPFS上托管网站与在云端的Web服务器上托管它略有不同。您的网站可能需要进行一些调整才能在IPFS网络上正常运行。
重要的规则是：
1.您网站的所有内容都必须包含在一个构建文件夹中，并带有index.html文件。
2.文件中的所有链接都应该是相对链接。
如果您正在使用javascript框架，事情可能会有点棘手。以下是如何使用IPFS获得三个流行的框架，Angular，ReactJS和VueJS。
角度：
出于本教程的目的，假设您有一个有效的Angular应用程序。如果不这样做，请查看Angular快速入门指南以获取更多信息。
要准备Angular应用程序，请在应用程序的src文件夹中打开应用程序的index.html。在index.html中，将标记更改为：

document.write（''）;

完成此更改后，通过在项目目录的根目录中运行以下内容来构建应用程序：
ng build --prod --aot
您现在应该在Angular应用程序的“dist”文件夹中拥有更新的IPFS兼容版本。

ReactJS：
出于本教程的目的，假设您已经有一个可用的React应用程序。如果不这样做，您可以使用Create-React-App轻松创建一个。
在React应用程序的根目录中，打开package.json文件并将以下条目添加到文件顶部：
"homepage": "./",
完成此更改后，通过在项目目录的根目录中运行以下内容来构建应用程序：
npm run build
您现在应该在React应用程序的“build”文件夹中拥有更新的IPFS兼容版本。
VueJS：
出于本教程的目的，假设您已经拥有一个可用的Vue应用程序。如果不这样做，您可以使用Vue CLI轻松创建一个。
在Vue应用程序的根目录中，创建一个名为“vue.config.js”的文件。在此文件中输入以下内容：
module.exports = {
publicPath：'./'
};
完成此更改后，通过在项目目录的根目录中运行以下内容来构建应用程序：
npm run build
您现在应该在Vue应用程序的“dist”文件夹中拥有更新的IPFS兼容版本。
将网站添加到IPFS
现在您已准备好我们的网站，您可以转到有趣的部分。在IPFS上托管网站。
在IPFS上托管时，重要的是要记住IPFS不是一个永远存储数据的神奇云。为了使IPFS上的其他节点可以访问内容，具有该内容的节点需要连接到网络上的其他节点。
这意味着在IPFS上托管您的网站时，您需要确保您托管内容的任何节点都应始终在线。为此，您有两种选择：
简单的方法
对于那些不想维护自己的专用服务器来运行IPFS节点的人来说，Pinata提供了一个简单的替代方案。如果您尚未注册帐户，可以免费访问：https：//pinata.cloud/signup。
拥有帐户后，请访问Pinata上传页面并转到“上传目录”。从这里，只需浏览本地计算机以获取包含您网站构建的目录，然后单击“上传”。

上传完成后，访问Pin Explorer。您应该在列表顶部看到您网站的记录。

继续并注意“IPFS Hash”并继续下一步！

困难的方法
如果您希望自己完成所有事情，那么在云提供商上自托管节点是一个不错的选择。如果您希望沿着这条路走下去，可以阅读我们的完整设置过程指南：如何在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网关之间进行加密。因此，浏览器会将您的网站视为更安全，您甚至会在Google等搜索引擎中受到影响，因为您的网站对用户来说更安全。
设置DNS记录以指向Cloudflare
要将您的域名挂钩到Cloudflare并将其指向您的IPFS网站，需要执行以下步骤：
1.转到您购买域名的地方。应该有一个区域来管理您的域名的“DNS记录”。
2.编辑记录，以便您有两个条目：

您的CNAME记录，your.domain值为www.cloudflare-ipfs.com
_dnslink.your.domain具有值的TXT记录dnslink=/ipfs/yourWebsiteHash

使用Cloudflare保护您的网站
现在您的DNS记录指向Cloudflare的网关，您应该能够通过访问来查看您的网站your.domain。但是，在完成之前还应该采取一个步骤，并将免费的SSL证书应用到您的网站。
Cloudflare使这非常容易。您所要做的就是访问https://www.cloudflare.com/distributed-web-gateway/并滚动到页面底部，您应该看到以下内容：

一旦你在那里，只需输入你网站的域名，然后点击“提交”。如果您看到一条消息“证书已存在”，恭喜您，您已经完成了！
作为完成网站的示例，请访问https://deploypinata.com/
故障排除
以下是您可能遇到的一些常见问题以及如何解决这些问题
网关无法在IPFS上找到您的网站
IPFS网络每天都在变得越来越大。有时，查找内容可能需要一段时间。如果某个特定的网关无法检索您的网站，那么很有可能会因为太多人一次请求内容而导致超载。在尝试再次检索该网关上的内容之前，请尝试等待一段时间。
您收到“错误：无法构建对主机名的请求。”将您的域名提交到Cloudflare以获取SSL证书时。
如果您在向Cloudflare提交域名后收到此消息，请仔细检查并确保您只提交your.domain到文本字段。输入诸如http://your.domain或your.domain/不起作用。例如，我们的示例网站https://deploypinata.com/需要输入为deploypinata.com。
您收到“证书已存在”，但您的网站的HTTPS版本无效
有时这些东西可能需要一点时间来传播。可以提前一小时联系Cloudflare。

作者：Matt Ober

本文由IPFS中国社区编译

lm5vnf2rcf3.png