EOS [从零开始 DAPP 开发] 23 - 部署 DAPP 到 IPFS 网络,实现去中心化

pendingauth · 2019年09月05日 · 38 次阅读

本文转载自币乎,作者松果,原文链接:https://bihu.com/article/1084745353

微文DAPP的主要功能已经开发完成,还有一些细节和Bug,感兴趣的读者可以继续完善和修复,这篇文章介绍如何把DAPP部署到IPFS网络,实现DAPP中的“D”,Decentralized(去中心化)。

打包React项目

部署到IPFS的是使用npm run build命令打包后的代码,这些代码包含在build目录中,要让IPFS hash访问项目时能定位到build目录,需要在React项目的package.json配置如下选项:

"homepage": "."

然后在项目目录执行打包命令:

cd frontend
npm run build

会在frontend目录下生成一个build目录:

build目录下有一个index.html文件,就是项目的入口,先在本地打开index.html看一下效果:

注意浏览器地址栏,是一个本地文件地址,下面把这些文件上传到IPFS网络。

部署前端代码到IPFS

启动IPFS本地节点,把这个build目录添加到IPFS:

ipfs daemon
ipfs add -r build

现在可以使用build目录的哈希值来访问项目了,经过一段时间的同步后,使用IPFS的HTTP网关访问:

https://ipfs.io/ipfs/QmdLbNon8GZD5PScLxChDCbuQfy7ohummLBYTaQzmYYUjG

但是,如果一段时间(一般是几天)内没有运行本地IPFS节点,刚才部署的项目文件就会被IPFS回收,而我们又无法保证7*24小时运行本地节点,因此需要第三方提供的固定(PIN)服务。

pinata.cloud就是一个第三方PIN服务提供商,可以免费固定最多1GB的内容。

在“Pin By Hash”一栏填入要固定的Hash值,Pinata会到IPFS网络中搜索该Hash值:

在Pin Explorer查看固定好的IPFS哈希值:

这时项目也能通过Pinata的IPFS网关访问到了,可以通过如下两种方式访问到部署在IPFS上的微文DAPP项目:

https://ipfs.io/ipfs/QmdLbNon8GZD5PScLxChDCbuQfy7ohummLBYTaQzmYYUjG

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

现在使用IPFS网关地址访问项目:

注意浏览器地址栏,是一个IPFS的HTTP网关地址,发布一条微文:

数据成功写入区块链:

到此为止,我们完成了一个Web APP的部署,全世界的人都可以访问它,但自始至终都没有用到服务器(无论是物理服务器还是云服务器),这就是去中心化分布式的应用(DAPP)。

Tips

项目代码在Github同步更新:https://github.com/songguo6/weiwen-dapp

更多内容

EOS开发系列目录

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册