【操作指南】如何简单地在 IPFS 上托管网站

【操作指南】如何简单地在 IPFS 上托管网站

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

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

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

 

【操作指南】如何简单地在 IPFS 上托管网站

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”。

【操作指南】如何简单地在 IPFS 上托管网站

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

【操作指南】如何简单地在 IPFS 上托管网站

继续,注意“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的域

【操作指南】如何简单地在 IPFS 上托管网站

使用 Cloudflare 保护的网站

 

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

 

Cloudflare 让这变得超级简单。

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

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

【操作指南】如何简单地在 IPFS 上托管网站

一旦你到了那里,只需输入你网站的域名,然后点击“提交”。如果你看到一条消息说“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 上托管网站

IPFS原力区

Slogan:让存储更安全、更高效、更开放、更经济 价值观:价值 共建 共享 荣耀

总部位于上海,聚集基于分布式网络&存储的众多技术大咖和爱好者,深耕基于 IPFS 的商业生态建设和社区发展。

每周二举办“分布式存储网络”主题沙龙,聚集了众多技术大咖和 IPFS 爱好者,通过持续输出全面、精细、优质的 IPFS 咨询和技术支持,将生态中的爱好者转化为 IPFS支持者和参与者,共建 IPFS 生态的健康发展。

【操作指南】如何简单地在 IPFS 上托管网站

原创文章,作者:IPFSforce,如若转载,请注明出处:http://ipfser.org/2019/07/01/ruhejiandandezaiipfsshangtuoguanwangzhan/

发表评论

登录后才能评论

联系我们

在线咨询:点击这里给我发消息

邮件:ipfsforce@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code