请选择 进入手机版 | 继续访问电脑版
开启辅助访问
链路首页链路财经目前收录 币种 : 4908 交易所 : 310钱包 : 17 24H 交易量 : $43,403,137,051 总市值 : $245,388,183,835
2019
07/16
13:49
分享
评论
  • 本文由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原力区】

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

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

    Force系列产品布局IPFS商业应用,贯通视频娱乐、文件共享、浏览器入口、数据加密管理等服务,为企业与个人的使用提供一站式服务。

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

主题帖 477 关注 0 粉丝 0
情感指数

链路大数据分析置信度 25.32 %

TA的主题帖
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表