使用IPFS与ENS搭建永不停机的网站
日期：2021.5.8
作者：litianc
阅读时长：8 分钟
前言
看到区块链技术的红火，有不少朋友也想尝试Web3的操作体验。跟所有从业者一样，我们希望更好的向大众解释Web3和区块链的使用场景。IPFS和ENS是面向Web3的分布式基础设施，这里通过它们部署分布式网站来演示Web3的功能。就如同在互联网的早期用互联网来阅读武侠小说一样，让我们一起管中窥豹，在实作中了解IPFS和ENS的价值。
本文首先简要介绍IPFS和ENS的基本概念，然后我们使用IPFS和ENS部署一个永不停机的网站。最后，大胆想象当下一代网络的基础设施成熟后，我们如何用新的工具来更好的服务过去的世界？我们用一个变通的方法来实现ENS访问现有的HTTP网站，进而引发我们的思考。
1 介绍IPFS和ENS
IPFS是一个点对点的分布式文件系统，目标是为了补充（甚至是取代）目前统治互联网的HTTP协议，将所有具有相同文件系统的计算设备连接在一起。IPFS最鲜明的特点是内容寻址，通过它的网络，我们获得文件不再需要知道它在网络中的存储位置，仅需要知道内容的唯一标识（CID），而CID在技术上简洁地采用哈希算法。对于网站的使用场景而言，使用IPFS能够从架构上实现计算和存储分离，并且文件缓存位置更贴近最终用户的实际分布，进而实现便宜而快速的网站服务。
ENS是基于以太坊的分布式、开放和可扩展的域名系统。它不仅仅是为以太坊提供的命名服务，还可为其他区块链主网服务，它提供了一种安全且去中心化的方式来使用人类可读的名称来寻址资源。借鉴了互联网域名解析（DNS），ENS域名的拥有者还可以通过以太坊智能合约来记录IPFS网络中的内容标识，以及拥有者的twitter、github、email等信息。但目前ENS没有提供解析到DNS的功能。
2 使用ENS部署和访问IPFS网站
WordPress是当前个人和商务网站使用最多的建站工具，其中我们的项目主页Blockcasting网站就是使用WordPress进行搭建。在实际部署开始之前，我们需要准备以下工具：
- WordPress网站和WP2Static插件。
- 如果您使用的是其他建站平台，可以参照本文的思路寻找相应的工具导出网页的静态文件。
- Pinate账号
- Metamask钱包和ETH
- 0.03ETH，当gasprice=30gwei
- Opera或Brave浏览器
2.1 从WordPress中导出静态文件
第一步，WP2Static下载和安装
这里要注意的是WP2Static从7.0之后的版本已从wordpress.org下架，仅能从官网上购买后下载。为了教程演示，我在网上找到了6.6.7的版本，亲测能够正常使用。
第二步，WP2Static插件设置
在插件安装后，我们就可以在后台左侧边菜单看到插件设置。
这里，我们需要导出的是独立静态文件压缩包，然后将整个文件夹上传到IPFS中，所以选择“ZIP archive”、勾选“Allow offline usage” 允许离线使用。
2.2 在IPFS上部署网站
IPFS是一个点对点的文件系统，我们需要将网站的静态文件的整个文件夹上传到任意一个IPFS节点上，除了自己搭建IPFS节点外，我们推荐使用第三方提供的IPFS文件存储服务。Pinata.cloud为每个用户免费提供1GB的存储空间，我们接下来用Pinata进行演示。
将WP导出的压缩包解压后上传到Pinata上，选择Folder上传：
上传完成后会得到，一个文件索引，通过索引的链接如上图中“blockcasting_web_210507”，可以预览在IPFS上的网站效果，这时需要记录下索引的IPFS CID，后面的操作会使用到。这样就完成了网站在IPFS上的部署，是不是非常简单？
此时，我们可以通过Opera浏览器输入ipfs://[IPFS CID]（例如ipfs://QmNnFd2qHd9GHpQqDL4VmDRUucCkaBwuAdo236ASadb7mY）进行访问，已能够浏览部署在IPFS网络中的网站。接下来，我们要为这个分布式网站绑定一个人性化访问的域名。
2.3 注册和绑定ENS域名
ENS类似普通网站的域名，但不同的是，ENS的权限逻辑是通过用户签名交易在以太坊区块链上实现的。这样简化了ICANN、域名注册商等层级管理的组织和部门，大大提高了域名系统管理的效率。简单来说，就是用户花了钱就能转售、赠送或设置域名，无需等待权威机构确认和认可。
首先，我们在ENS的管理平台https://app.ens.domains上，检索我们想要注册的域名，如果没有被人注册过就可以按照平台上的提示一步步完成注册，这一过程需要消耗一定的ETH作为GAS费和域名使用费。
很快，我们就注册好了ENS域名，接下来就需要将我们的域名绑定IPFS的CID。该设置在域名的解析器中进行，在“解析记录”的“内容哈希”里将之前记录的IPFS CID替换“/ipfs/QmNnFd2qHd9GHpQqDL4VmDRUucCkaBwuAdo236ASadb7mY”的中Qm..的内容。
保存好后，提交确认，等待交易上链完成。
2.4 访问部署好的网站
Opera和Brave浏览器都已支持IPFS协议和ENS域名访问。就像正常访问网站一样，在浏览器中输入ENS名称，如blockcasting.eth，浏览器会自动识别协议类型将路径自动转为ipfs://blockcasting.eth。
注：chrome浏览器暂未原生支持ipfs协议，需要安装ipfs伴侣插件实现类似功能。
3 使用ENS访问HTTP网站
我们知道支持IPFS分布式协议是浏览器发展的趋势，但在很长一段时间内，各类开发工具和中间件不够完善，那我们为什么不延续使用现有的工具，在兼容现有协议的前提下，给传统应用带来Web3的自主、无需授权的优势呢？然而翻遍ENS的文档，上面只字未提ENS解析为DNS或IP地址的方法，或许是因为极客们希望看到的是简洁、理想的世界。正好，我们来hack一个用ENS域名访问HTTP网站的解决方案。
我们的需求是在Opera浏览器中通过输入ENS域名，能够访问用HTTP协议搭建的网站，该方案需要具备一定的通用性。这里以21vianet.com网站为例，首先需要声明的是我不是这个网站的管理员，所以无法从后台导出为静态文件。同时，我也不希望每次网站改版还要手动更新网站的CID。
第一时间想到的是iframe的方案，将原网包装在21vianet.eth的html中，但跨域问题将会是很大挑战，而且二级页面终将从ipfs转回http协议。最终，我决定用最容易实现的网页自动跳转的方案，经过优化，仅需要10行代码。您需要将相应的网站地址替换下面URL中的地址即可实现网站跳转。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; URL=https://www.21vianet.com">
<title>21vianet</title>
</head>
<body>
</body>
</html>
将网页跳转的代码上传到Pinata，过程与网站部署基本相同。然后注册了21vianet.eth的ENS域名，并将上述代码的文件CID记录在ENS的解析记录中。最后，通过浏览器访问验证成功跳转。
这样，我们就实现了通过ENS访问HTTP网站的Demo。
4 结语
知县在Forkit的播客节目中聊到他是如何复用以太坊公链的基础设施避免重复建设的，听完之后深受启发。当看到ENS上没有DNS域名解析功能的时候，我很自然地思考如何复用ENS来解决HTTP网站的访问问题。在区块链的圈子中，看似简单的项目相互结合，往往能够迸发出巨大的能量，IPFS与ENS的结合就是很典型的案例。
让我们勤动脑，常动手，与Web3技术共同进步。
参考资料：
- WordPress利用WP2Static插件实现全站静态文件, https://www.itbulu.com/wp2static.html
- 和知县聊聊区块链产品如何大规模应用, https://www.ximalaya.com/keji/19792413/337357008
- How Opera is Using ENS to Decentralize the Web (ENS Integration Spotlight), https://medium.com/the-ethereum-name-service/how-opera-is-using-ens-to-decentralize-the-web-ens-integration-spotlight-a545f7825724
