IPFS开发简介与入门实战

赤膊医数 · 发表于 2021-4-22 23:39:31

本帖最后由赤膊医数于 2021-4-22 23:41 编辑

2018年，最火爆且值得期待的区块链项目莫过于EOS和IPFS。1、IPFS简介

IPFS是什么
4 G# X6 o+ ?" a8 T5 ?" m星际文件系统IPFS（InterPlanetary File System）是一个面向全球的、点对点的分布式版本文件系统，目标是为了补充（甚至是取代）目前统治互联网的超文本传输协议（HTTP），将所有具有相同文件系统的计算设备连接在一起。原理用基于内容的地址替代基于域名的地址，也就是用户寻找的不是某个地址而是储存在某个地方的内容，不需要验证发送者的身份，而只需要验证内容的哈希，通过这样可以让网页的速度更快、更安全、更健壮、更持久。
$ a* t' y0 v" s& {. c以上内容来自巴比特官网介绍
7 t% t; a$ h6 `6 J. pIPFS是基于区块链技术的去中心化存储网络，实现了永久性存储。* ]& [% p1 v" K: e- |; A
IPFS的火热
7 ^( b7 |$ X& t) CFilecoin ICO是迄今为止涉及金额最大的ICO，仅一小时就募集了接近2亿美元，打破ICO记录，成为2017年最火爆的区块链项目。IPFS项目吸引了世界各地数字货币投资者和互联网从业者的密切关注，2018年比较值得期待的是IPFS主网的上线。然而就在前段时间，官方公布说上线时间延期到年底。
! M$ d0 u" B7 h R. [# U% H: s注：Filecoin是IPFS激励层的加密数字货币（即代币），有点类似于以太坊平台上的以太币。) l, k3 ?# c. V1 w: n3 D
IPFS官网：https://ipfs.io/
5 O6 m# P9 z7 KFilecoin官网：https://filecoin.io/
' Y$ i7 s0 ?/ A6 }. B* H
IPFS的应用案例
$ T9 ~! P+ V$ t7 U7 cGitHub有两款开源项目，且有对应网址，分别是音乐播放器和视频播放器。
' Y% b3 E/ W) N! z
4 c1 c, F( P5 x9 {
- IPFS音乐播放器6 t; Z+ r% x5 `2 ]/ X
  
  4 j1 e9 M; J( g0 N. S# C9 `6 k& [+ i$ c- D; `# c
    l7 u0 M& r+ v& a. R/ [- p/ H
    @& H" b  K# \% h+ Z7 ?
  IPFS音乐播放器( L4 g- P! L2 e. Z3 C
  
    u7 a( k" d7 G& c$ x: k0 P% iIPFS音乐播放器网址：https://diffuse.sh/
    H- A3 X) i% H/ v- tGitHub地址：https://github.com/icidasset/diffuse
  - u% n/ O/ ]& g. y& V- W5 o
- IPFS视频在线播放器) V" Y4 h( w+ V& V5 X8 x1 n1 R
  
  + D& ] K' N9 e1 G. j: K
  I* F; J' z9 E
  8 ^3 V- G0 s% a3 _
  ' a1 v" _/ |$ KIPFS视频在线播放器首页( F5 N0 |5 s7 N* O2 M
  1 ]) M% l/ w: w4 H2 E5 G+ M
  5 O& H6 }# r( F0 y, A, J
- Q8 S+ Y& o5 K0 @

. i8 w* c4 P9 w. S, y' h: X* S! {+ |" z0 }6 [9 _1 \+ A
IPFS视频在线播放器播放电影: }. F7 w3 _, S* t7 t7 Z8 d

6 r: }$ I6 V- K7 a6 u号称是国内第一个IPFS应用/ z% E% W. R2 L3 ~" Z/ V
IPFS视频在线播放器网址：http://www.ipfs.guide/
8 @# _" E7 E6 g9 ^( V! V) Z4 IGitHub地址：https://github.com/download13/ipfstube! j; q6 o, U7 |0 J
可用于测试的电影视频Hash（这里只列举两部）：
* Y+ E5 h4 r' F2 C! t1 P* N神秘巨星：QmWBbKvLhVnkryKG6F5YdkcnoVahwD7Qi3CeJeZgM6Tq681 a! A& W! t$ t
盗梦空间：QmQATmpxXvSiQgt9c9idz9k3S3gQnh7wYj4DbdMQ9VGyLh
6 I; Q' e! }" c, s+ u; v9 d

2、IPFS的安装既然IPFS这么牛，有必要了解一下IPFS的开发，先从IPFS的安装开始。

IPFS Desktop
( g" q7 a+ Q/ [0 f5 Z% E6 L0 u' q当然，可以直接安装IPFS节点桌面管理软件来体验一下。该软件可以方便地运行和管理自己的节点，查看IPFS节点资源信息，支持二次开发。该项目是Node.js编写的，已开源。/ L- @6 c- J3 h, m  |4 f

' c) C4 y# I. M0 U3 [
3 N; a8 w9 w5 j' m4 ^0 O " k1 C8 ^0 _! ]" F% T

2 Z' ~: m/ {- X6 ^$ KIPFS节点桌面管理软件
# ?0 G! K  U3 \# o
: s; L9 y2 ?1 ?  x9 S/ UGitHub地址：1 S) W% s& h2 h3 O
https://github.com/ipfs-shipyard/ipfs-desktop5 F8 D6 E  t" G5 X
Go-IPFS
, x3 G3 h" T; |进入IPFS的官网，找到并切换到"Install"页面，点击"Download IPFS for your platform"，会跳转到如下网址（需要翻墙）：% |- p% Y4 W  g9 I- x7 y3 A. X
https://dist.ipfs.io/#go-ipfs% s% L3 B- q# v& M) E: j$ J6 X! M
  d( a9 P" O. S% A% |
+ j- Z3 [4 Z) y$ m6 Q

  u# A# X4 v4 L6 P$ e% ~下载Go-IPFS
" R0 S  s8 \* p. W- ~2 G. n; W) t8 N7 c5 y
如果打不开，可以试着去Github查看安装方法  T1 A1 ~1 s  P3 Y4 q5 `, w+ I
GitHub地址：https://github.com/ipfs/go-ipfs
0 B% C# B( Y  J) i2 P# Y+ Q) n6 K( x将网页下载好的文件解压出来，下载的是"go-ipfs_v0.4.13_darwin-amd64.tar.gz"，解压出来的是go-ipfs文件夹，0 \# h, I/ u1 N8 J
然后打开终端，进入到go-ipfs文件夹根目录，复制ipfs文件到系统的bin目录，然后可以通过"ipfs version"来检查，操作如下：8 M# E& T! c' q( e5 }! ^+ P# d
wenzildeiMac:go-ipfs wenzil$ pwd/Users/wenzil/Desktop/study/go-ipfswenzildeiMac:go-ipfs wenzil$ lsLICENSE    README.md build-log install.sh  ipfswenzildeiMac:go-ipfs wenzil$ cp ipfs /usr/local/bin/ipfswenzildeiMac:go-ipfs wenzil$ ipfs versionipfs version 0.4.13
1 B; i: P/ i' x9 f$ I) ~

3、IPFS节点的创建、查看和启动以下是安装官网的Go-IPFS步骤下实验的

创建节点
3 h( H" w& _: R3 E6 r+ v进入到当前用户的根目录，并使用"ipfs init"命令创建节点，可以用"open ./"打开创建节点生成的".ipfs"目录。0 O2 A8 A1 }& I r: C
wenzildeiMac:go-ipfs wenzil$ cd ~/wenzildeiMac:~ wenzil$ pwd/Users/wenzilwenzildeiMac:~ wenzil$ ipfs initinitializing IPFS node at /Users/wenzil/.ipfsgenerating 2048-bit RSA keypair...donepeer identity: QmWH4xmGBznY9CJ4SjxpxWqGwMwrFtPdjgeweLCfJxW8j9to get started, enter: ipfs cat /ipfs/QmS4ustL54uo8FzR9455qaxZwuMiUhyvMcX9Ba8nUH4uVv/readmewenzildeiMac:~ wenzil$ cd .ipfswenzildeiMac:.ipfs wenzil$ open ./
8 B: t/ W2 x& d( l9 Y# d- m7 i! N. K

IPFS节点的创建

查看节点id( l1 T: d$ G8 O9 `
wenzildeiMac:.ipfs wenzil$ ipfs id{ "ID": "QmWH4xmGBznY9CJ4SjxpxWqGwMwrFtPdjgeweLCfJxW8j9", "PublicKey": "CAASpgIwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCt98O5zNptBtmSF6xYdOHAMunQsXE9rAmgqBXVPLJk+AoaBjNiAipB+sTXKwaj8stp9c3iuSzz10+dyYI38bq4TPDCsHnQ3PjKSgZwEaT0M6pJhGqJcSbLY57CjQOEwgFe+tw3b4hcoDvvNJMG0dZZg1r9xnfevBz0DNewlj2vtviSTQL6r/ZXlD04GsytxTSQ2pzMJTG3QmYyokeZ37DT7Vwa+IJjDCiDJC5BlZ204zunZBx3tqWUn2Hr2NtEX+4YDdX4SBHa0ZDNqZmzLRe5YlAXjVI0ONHs+BVsC1v1L5we52iSYCSgVHoxRP/pa9EZdHMvgs9QeAa5jO90yxgTAgMBAAE=", "Addresses": null, "AgentVersion": "go-ipfs/0.4.13/", "ProtocolVersion": "ipfs/0.1.0"}
修改IPFS默认存储空间; h0 X0 A! i$ Y2 l0 g1 c" r# ^2 G
存储节点默认存储大小为10G，如果你想修改存储空间，可以修改config配置文件，找到StorageMax并修改
+ g) X+ r. [% W  y: s5 owenzildeiMac:~ wenzil$ export EDITOR=/usr/bin/vimwenzildeiMac:~ wenzil$ ipfs config edit
& L# J8 x* O1 F& I/ D5 a
2 x. J  P( O! u: c$ q  w" w' R# p! Y# g% N6 t$ w
修改IPFS默认存储空间3 v% j& M: g5 O0 ~3 U) J  T9 s

6 p9 D) y3 F- c, ?
启动和同步节点服务器
) Q2 y, v1 _+ g. X执行"ipfs daemon"命令，可以同步节点数据到IPFS网络。+ C, ^3 d+ I6 L7 H. m
wenzildeiMac:.ipfs wenzil$ ipfs daemonInitializing daemon...Adjusting current ulimit to 2048...Successfully raised file descriptor limit to 2048.Swarm listening on /ip4/127.0.0.1/tcp/4001Swarm listening on /ip4/192.168.1.100/tcp/4001Swarm listening on /ip6/::1/tcp/4001Swarm listening on /p2p-circuit/ipfs/QmWH4xmGBznY9CJ4SjxpxWqGwMwrFtPdjgeweLCfJxW8j9Swarm announcing /ip4/100.64.9.179/tcp/55898Swarm announcing /ip4/127.0.0.1/tcp/4001Swarm announcing /ip4/192.168.1.100/tcp/4001Swarm announcing /ip6/::1/tcp/4001API server listening on /ip4/127.0.0.1/tcp/5001Gateway (readonly) server listening on /ip4/127.0.0.1/tcp/8082Daemon is ready1 W+ ~! A2 A0 i$ y1 e/ x; h f

4、IPFS运行体验

IPFS查看ReadMe/ Z: t4 G/ ?! N3 ^5 _! Y% H
可以回去查看执行"ipfs init"命令的时候，返回的内容。打开一个新的终端，操作如下：
$ }! Z2 x8 F: d& k( z7 RwenzildeiMac:~ wenzil$ ipfs cat /ipfs/QmYwAPJzv5CZsnA625s3Xf2nemtYgPpHdWEz79ojWnPbdG/readmeHello and Welcome to IPFS!██╗██████╗ ███████╗███████╗██║██╔══██╗██╔════╝██╔════╝██║██████╔╝█████╗ ███████╗██║██╔═══╝ ██╔══╝ ╚════██║██║██║ ██║ ███████║╚═╝╚═╝ ╚═╝ ╚══════╝If you're seeing this, you have successfully installedIPFS and are now interfacing with the ipfs merkledag! -------------------------------------------------------| Warning: || This is alpha software. Use at your own discretion! || Much is missing or lacking polish. There are bugs. || Not yet secure. Read the security notes for more. | -------------------------------------------------------Check out some of the other files in this directory: ./about ./help ./quick-start <-- usage examples ./readme <-- this file ./security-notes
Web管理界面
7 Q# |& ~1 b& Q9 e- tIPFS节点服务器启动后，可以用浏览器访问：http://localhost:5001/webui
8 N! A! j2 f1 P  K9 v/ x6 g5 @+ x; x有本地配置、节点连接、本地节点文件等信息，如图：
' P8 \8 P* Y" n  K( Z
3 Z+ Y: t/ ^$ d& ^7 C7 a: w( Q7 |$ E. A( Y. e# x! A  {0 m
  I6 h$ ]- _$ w# t, b7 H5 O
2 O9 A+ [# k# R3 T' P) p
IPFS的Web管理界面
: D# M/ \  D- n
  |9 I: J. g2 _! }; x- ^  h: F, o2 N: t! w  o: Z4 T
" K- `! g. ^# p- s

5、设置跨域资源共享当我们在前端通过js接口操作ipfs时，会遇到跨域资源访问问题，可以在终端执行以下配置来解决：
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT","GET", "POST", "OPTIONS"]'ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["*"]'ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials '["true"]'ipfs config --json API.HTTPHeaders.Access-Control-Allow-Headers '["Authorization"]'ipfs config --json API.HTTPHeaders.Access-Control-Expose-Headers '["Location"]'6、IPFS的基本操作6.1 添加单个文件到IPFS节点

新建文件" ]' P# A) k" v1 L/ ^* M
wenzildeiMac:ifps_test wenzil$ vi test.txtwenzildeiMac:ifps_test wenzil$ cat test.txt IPFS测试文件
添加文件到IPFS节点. N/ n. R, G; W. ]' V# j
wenzildeiMac:ifps_test wenzil$ ipfs add test.txt added QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab test.txt添加文件到IPFS节点后，返回了文件的哈希值+ j& n0 `% N. |5 ^' c
查看IPFS节点的文件; M4 J  a/ G- w: v* ^; ~+ W- g
wenzildeiMac:ifps_test wenzil$ ipfs cat QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbIPFS测试文件注意：此时的文件只是添加到了本地的IPFS节点，读取的是本地数据，可以通过如下网址查看。! X6 T6 k% L, N$ ]1 w% K2 w
http://localhost:8080/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab
$ M2 @) R  w; u4 d( ]4 L1 K) \通过"ipfs daemon"命令启动节点服务器，会将本地节点文件同步到外网，同步成功后，这时就可以访问如下网址来查看（如果访问失败，试着翻墙看看）。4 a* ^7 Q& Y, _" W$ n
https://ipfs.io/ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab
# b; _& x8 o6 |1 g/ f+ b6 P' P# ?- W' F# [# I+ d  `* [0 B0 W; g4 c: @- ^

: Y, |" S/ h4 N: L) T3 a, v0 T: q
* W+ z' T& @1 M: B1 f$ Y" {+ T查看IPFS文件内容- E5 M$ K# B" ^

) C( t) m3 M) R: [& r6 K7 u如果访问成功的话，说明已经存储到IPFS网络中。目前IPFS网络暂未加入代币Filecoin机制，所以存储读取文件免费，速度也比较慢。
3 V/ h# a2 Y9 i' V2 n! t) R1 O0 C
下载IPFS节点的文件  s4 Q! M$ l' ?  _6 Y: H
wenzildeiMac:ifps_test wenzil$ ipfs get QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2AbSaving file(s) to QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab 25 B / 25 B [========================================================] 100.00% 0s查看当前目录，发现多了一个"QmSV..."的文件"+ A& `7 `) |5 C1 b5 Z

, Y: `/ z! V. r5 i2 s' U4 z; F2 {8 D2 b, p0 |  a; s/ `* u) z
: D; e3 X6 G+ K( X
2 x) H# E, ^' I  ^( U1 f! o
下载IPFS节点的文件
( B5 g# v5 g* O4 r; x) Y; m9 ^* C  a; N( x

* k9 n% k$ M" o) F3 ^8 l+ D. v4 c

6.2 创建文件夹存储文件

ipfs命令新建文件夹
0 O" R+ q0 R; RwenzildeiMac:ipfs_test wenzil$ pwd/Users/wenzil/Desktop/study/ipfs_testwenzildeiMac:ipfs_test wenzil$ ipfs files mkdir /wenzilwenzildeiMac:ipfs_test wenzil$ ipfs files cp /ipfs/QmSVKEwPBTzw5QLzGUE8oN8J1r4cadMeieSw4Co1ozm2Ab /wenzil/test.txtwenzildeiMac:ipfs_test wenzil$ ipfs files lstestwenzilwenzildeiMac:ipfs_test wenzil$ ipfs files ls /testwenzilwenzildeiMac:ipfs_test wenzil$ ipfs files rm -rf /testwenzildeiMac:ipfs_test wenzil$ ipfs files lswenzilwenzildeiMac:ipfs_test wenzil$ ipfs files ls /wenziltest.txtwenzildeiMac:ipfs_test wenzil$ ipfs files read /wenzil/test.txtIPFS测试文件注："ipfs files rm -rf /文件夹名"可以删除文件夹。; c. U. V- J2 k+ n) B0 |

+ e0 d! m+ m* @5 A

6.3 IPFS上传文件夹

ipfs命令添加文件夹
/ y) o/ l* D, I5 F0 p$ g先在本地创建一个文件夹和对应文件，如图：
+ q2 ~7 l6 X. j7 |' ]& D2 F
  a, O4 V5 }4 [+ Y, ~  v
7 b& x: V3 z2 N8 f' h
, e* z2 `2 D! }/ m. z) r  _
8 y/ n& G% j# Q8 U, K: |; {- a2 |本地创建文件夹及文件( F: T$ V" K5 G" W# b8 a" `
) `# U/ x0 h' Q+ l4 W
然后通过"ipfs add -r 文件夹"命令添加整个文件夹# k8 `6 e0 o* ?6 N2 p
wenzildeiMac:ipfs_folder wenzil$ pwd /Users/wenzil/Desktop/study/ipfs_folder wenzildeiMac:ipfs_folder wenzil$ ls portrait.jpeg readme.txt wenzildeiMac:ipfs_folder wenzil$ cd .. wenzildeiMac:study wenzil$ pwd /Users/wenzil/Desktop/study wenzildeiMac:study wenzil$ ipfs add -r ipfs_folder/ added QmbHptfJfyuGAZxstFYgAVfz33cytR1seTD3ZabBSDd899    ipfs_folder/portrait.jpeg added QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQv  T ipfs_folder/readme.txt added QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj ipfs_folder wenzildeiMac:study wenzil$
查看文件夹的文件内容% e @3 O8 H6 j) a4 v g1 p8 \# N
wenzildeiMac:study wenzil$ ipfs cat QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT 我是区块链开发小白，请大家多多赐教，谢谢。欢迎阅读我的区块链系列文章，简书地址：https://www.jianshu.com/u/5f809ab3698cwenzildeiMac:study wenzil$ ipfs cat /ipfs/QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT我是区块链开发小白，请大家多多赐教，谢谢。欢迎阅读我的区块链系列文章，简书地址：https://www.jianshu.com/u/5f809ab3698cwenzildeiMac:study wenzil$ ipfs cat /ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj/readme.txt我是区块链开发小白，请大家多多赐教，谢谢。欢迎阅读我的区块链系列文章，简书地址：https://www.jianshu.com/u/5f809ab3698c
查看IPFS对应文件夹$ \& B4 O- t7 D6 S( v
访问文件夹对应的IPFS地址：
& ^5 d% R" ]# H0 Vhttps://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj
$ l, `& ~1 |; o" H第一次访问的时候，需要同步数据到IPFS网络，等待时间有点久，慢到让你以为同步失败了。
- m' y  p1 I4 J# l, l3 @$ L1 J2 U  P6 L, B- {$ |0 ]
: P( u, r" g) [
+ N0 s$ b0 h7 \+ Z. T* ?
查看IPFS对应文件夹
& [4 n( I2 ^6 G) ~+ Y- ~" W
, Z. p+ y* y* y5 E9 x8 n访问文件夹对应的文件，如看到图片文件，访问ipfs网关：3 J$ J0 H6 G0 A' m# B; t! R
https://ipfs.io/ipfs/QmdSd3xxKcwuMugyLCiLWzaeZKDkuM39R2tzyF3kBFDoaj/portrait.jpeg
2 X' T+ _0 f* q8 V' t1 ~6 {! w2 ^( R. u0 c; P! y: n4 h, [; W
2 N4 W, W2 b1 P3 @  M4 G% t) a

. r$ v. K- H+ n# @5 W查看IPFS文件夹对应文件, b# L$ \" M. V. K( K

( m3 F5 ]* b) T8 @或者通过文件的Hash来访问，如访问txt文件的地址：
2 `; T6 v9 ?" ^+ h: o! Zhttps://ipfs.io/ipfs/QmPEWgwQEHD6qxm5cUivTEZ252T123DvQ5L6HyUDgViQvT
( ~/ I5 R& Y0 l! v& x1 A1 F! P, E& u3 Z" @, m9 p2 r6 D
4 q) A0 ?) o6 F/ k* I
7 [, f3 W/ C9 A% K6 ~
通过文件Hash访问查看
% j9 ~0 h# L+ X3 {' E8 h  I
0 f. S, I% G7 ~8 @" u7 o7 ]- G5 g% d5 J1 K

6.4 添加简单网页到IPFS节点

网页效果和项目结构4 A- P3 b& x$ t# r- M
实现一个简单的实时显示系统当前时间的网页，效果如图：3 G  W5 N6 @, F& s1 u1 S

6 B4 }) ?" d7 E  X6 ?) @% z
0 _5 X6 n* v: U% x8 O0 q# l' u
5 i, j9 w4 @, }: x- s% o6 T' W% S# B$ {% |, w) x4 c
IPFS添加简单网页
/ Y5 k4 L& G; C, c$ C) p( ]
; C7 O4 ?9 J3 {' j; k" j# O4 M2 x: S7 k工程结构如图:" e  L7 ^; t! b5 Z
0 o+ {; m5 o5 N- x
) S, Z8 L6 T* }0 @
; T9 N+ l( h1 K  C( v# Z
5 ?3 l( e2 {( b' S8 F- p
网页工程结构
& B! K9 ~# x* P- q' J* U! Z2 k( G$ ?$ ?# h; G

5 ]# q2 f7 }2 m2 p! {9 h

实现代码比较简单，这里就不贴代码了。

ipfs命令添加文件夹
' W; E" L& M$ t; HwenzildeiMac:study wenzil$ ipfs add -r ipfs_htmladded QmTj49dgFgFhfNRTUYyUSzk3puj7vvDoVsAynFrL7GAj1d ipfs_html/index.htmladded QmeHFBSyN9KqeZWKyKTWKYzDRU192YWDRjf6sLWFWhwk2z ipfs_html/styles.cssadded QmWkEfgL2pjo7n8b9YBCv4qwE77YWePkSscxiHQfPpwpkp ipfs_html/time.jsadded QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD ipfs_html记得要开启IPFS节点服务器进行数据的同步，可以使用"ipfs daemon"命令在新的终端窗口打开运行。 b" P: \1 u: [* ]" d4 q
wenzildeiMac:~ wenzil$ ipfs daemonInitializing daemon...Adjusting current ulimit to 2048...Successfully raised file descriptor limit to 2048.Swarm listening on /ip4/127.0.0.1/tcp/4001Swarm listening on /ip4/192.168.6.31/tcp/4001Swarm listening on /ip6/::1/tcp/4001Swarm listening on /p2p-circuit/ipfs/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrzSwarm announcing /ip4/127.0.0.1/tcp/4001Swarm announcing /ip4/192.168.6.31/tcp/4001Swarm announcing /ip6/::1/tcp/4001API server listening on /ip4/127.0.0.1/tcp/5001Gateway (readonly) server listening on /ip4/127.0.0.1/tcp/8082Daemon is ready
访问ipfs对应文件
! w8 m, i" a( T9 r浏览器访问ipfs网关：" F: d2 P# t3 b' V8 G& Z
https://ipfs.io/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD/! B4 V' y3 [8 O& i- \ o8 o9 w" _' w
" e6 a! I* X/ A2 x

+ c" D$ a+ J0 M5 G5 S1 P/ r+ ?! g0 q. e/ X" R
查看IPFS对应网页
1 d/ T, Z, k: ?' P8 R: o
7 E! o9 v& A2 ?( T/ o8 V% a& f& t9 x

6.5 IPNS绑定节点名

IPNS绑定节点操作
" E3 `* }& r3 z6 P. h每次修改文件内容后，文件的哈希值就会发生变化。对于网站而言，发布后可能还需要做修改，这时需要IPNS绑定节点名。每次更新网站内容后，重新publish一次更新发布到IPNS即可。
+ P, b7 \+ t* |3 b7 o; ]刚才的html根目录的哈希值是QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD，操作如下：% R, B1 s2 ~, K6 b
wenzildeiMac:study wenzil$ ipfs name publish QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDDPublished to QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz: /ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD
查看当前节点% d/ A0 ~* Y5 P- n0 f# _
wenzildeiMac:study wenzil$ ipfs id{ "ID": "QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz", "PublicKey": "CAASpg......", "Addresses": [ "/ip4/127.0.0.1/tcp/4001/ipfs/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz", "/ip4/192.168.6.31/tcp/4001/ipfs/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz", "/ip6/::1/tcp/4001/ipfs/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz", "/ip4/14.xxx.xxx.xxx/tcp/4001/ipfs/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz", "/ip4/61.xxx.xxx.xxx/tcp/20472/ipfs/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz" ], "AgentVersion": "go-ipfs/0.4.13/", "ProtocolVersion": "ipfs/0.1.0"} 发现"ID"和上面"Published to"返回的节点一致，都是"QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz"5 Z9 |. k/ f Z1 ?& w2 q/ ^9 }. p$ i
验证节点5 y& b. k( h" p4 l2 s% k" I( O
命令为："ipfs name resolve 节点ID“6 g, z/ ~! r, J B# X0 p3 t% @8 b
wenzildeiMac:study wenzil$ ipfs name resolve QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/ipfs/QmeG6LKmEfF5s62cySE9ZnU8EifmU46CQTixipfzsZspDD
访问IPNS对应文件+ l- N  Z& c' ]+ c; F
浏览器访问ipfs网关：
- O1 m  w2 @8 [+ S$ u( zhttps://ipfs.io/ipns/QmcXWJqPjCgr1wrReWu2zUT41E5FrrXp2uyyNZRr7jXXrz/
1 K9 ]  n' C: s* P+ K& ^8 D) \  A$ p3 {

查看IPNS对应网页

7、IPFS与以太坊DApp开发实战

IPFS与以太坊DApp结合的好处# \1 w- @2 @% Y$ O+ I3 }
在以太坊平台上，往区块链写入数据需要花费以太币，调用智能合约执行每一行代码的时候，都需要一定量的gas交易费。区块链存储大数据成本很高，而且不合理。
; v& G8 _8 o/ J- b& ~5 x3 _. [可以先将文件存储到IPFS，然后得到文件的Hash存储到以太坊区块链中。读取文件的时候，从以太坊区块链中获取文件的Hash，再通过Hash来读取IPFS网络上的文件。
) j. K7 Y# @$ ^9 h/ N8 x" C使用官方提供的ipfs-api，可以很方便地在代码中操作节点将数据上传到IPFS，或者通过Hash从IPFS读取数据。9 p: Z" r4 V( P: f8 s% T
Truffle框架提供了快速搭建包含以太坊智能合约的React项目，可以通过"truffle unbox react"创建工程，然后安装ipfs-api依赖库。于是，可以在前端方便地调用IPFS的接口来读取、上传文件。- R+ D. g' O1 g
truffle unbox react官网：
3 A. l. D: _- p: V. }# X- bhttp://truffleframework.com/boxes/react
1 Z8 p8 ~5 _8 @/ v
IPFS与DApp开发实战- _& a% ]3 s7 Q* v* v0 E
话不多说，开始进入实战开发。. W0 X, |1 j# E( J
7.1 安装Truffle unbox react新建一个空目录"ipfs_dapp"，然后执行安装命令
) z8 i+ x3 c" K# |truffle unbox reactwenzildeiMac:ipfs_dapp wenzil$ pwd/Users/wenzil/Desktop/study/ipfs_dappwenzildeiMac:ipfs_dapp wenzil$ truffle unbox reactDownloading...Unpacking...Setting up...Unbox successful. Sweet!  Commands: Compile:             truffle compile  Migrate:             truffle migrate  Test contracts:    truffle test  Test dapp:          npm test  Run dev server:    npm run start  Build for production: npm run build7.2 安装ipfs-apinpm install --save ipfs-apiwenzildeiMac:ipfs_dapp wenzil$ npm install --save ipfs-apinpm WARN deprecated bignumber.js@6.0.0: Custom ALPHABET bug fixed in v7.0.2react-box@0.1.0 /Users/wenzil/Desktop/study/ipfs_dapp├—┬ ipfs-api@22.0.0 │ ├—— async@2.6.1 │ ├—— big.js@5.1.1 │ ├—┬ bs58@4.0.1 │ │ └—— base-x@3.0.4 # ...... 省略N多行输出7.3 修改智能合约代码修改contracts目录中的"SimpleStorage.sol"，修改后完整代码：
2 V, {! {# B& N: I4 f) {9 S4 f& Mpragma solidity ^0.4.18;contract SimpleStorage {  // 用于存储图片的哈希值  string storedData;  function set(string x) public { storedData = x;  }  function get() public view returns (string) { return storedData;  }} 修改"Migrations.sol"
1 {. c+ `: k* J3 p1 N# Tfunction Migrations() public { owner = msg.sender;}修改为：constructor() public { owner = msg.sender;}7.4 编译智能合约truffle compilewenzildeiMac:ipfs_dapp wenzil$ truffle compileCompiling ./contracts/Migrations.sol...Compiling ./contracts/SimpleStorage.sol...Writing artifacts to ./build/contracts7.5 部署智能合约进入remix-ide，复制SimpleStorage.sol代码，然后切换到"Run"菜单，选择"Injected Web3"进行智能合约的部署
+ `$ U  A: i' T9 J2 j/ T9 [/ w" v+ I/ G# t0 o& ~! i
' Q1 l* }4 j& A( A( U; K9 d" r

2 n! _) @  f# s6 u1 R  n2 lRemix-IDE部署智能合约4 |3 H2 i- O6 l: e: [
. f8 _( U  Z3 j: r

$ K8 k; @7 [/ B6 H* k
  h% v% [7 {2 l( }
" ]) p* n7 L9 J4 g  j" r0 F% J4 kRemix-IDE部署智能合约-确认
' u7 ]+ i- d2 I2 ^3 d- ]+ H! k( a, V( r' H3 H/ l
然后复制智能合约地址，App.js文件中会用到合约地址为:"0xb177d6cf6916f128c9931e610c63208d9c5a40f3"
; }- I6 n, ]( ^5 u9 e( P% I7.5 修改App.js文件import React, {Component} from 'react'import SimpleStorageContract from '../build/contracts/SimpleStorage.json'import getWeb3 from './utils/getWeb3'import './css/oswald.css'import './css/open-sans.css'import './css/pure-min.css'import './App.css'const ipfsAPI = require('ipfs-api');const ipfs = ipfsAPI({  host: 'localhost',  port: '5001',  protocol: 'http'});const contract = require('truffle-contract')const simpleStorage = contract(SimpleStorageContract)let account;// Declaring this for later so we can chain functions on SimpleStorage.let contractInstance;let saveImageToIPFS = (reader) => { return new Promise(function(resolve, reject) {       const buffer = Buffer.from(reader.result);       ipfs.add(buffer).then((response) => {       console.log(response)       resolve(response[0].hash);    }).catch((err) => {       console.error(err)       reject(err);    })  })}class App extends Component { constructor(props) { super(props) this.state = {    blockChainHash: null,    web3: null,    address: null,    imageHash: null,    isSuccess: false  }}componentWillMount() { ipfs.swarm.peers(function(err, res) { if (err) {    console.error(err); } else {    // var numPeers = res.Peers === null ? 0 :    res.Peers.length;    // console.log("IPFS - connected to " + numPeers + " peers");    console.log(res); }});getWeb3.then(results => { this.setState({web3: results.web3}) // Instantiate contract once web3 provided. this.instantiateContract()  }).catch(() => { console.log('Error finding web3.')  })}instantiateContract = () => {  simpleStorage.setProvider(this.state.web3.currentProvider);  this.state.web3.eth.getAccounts((error, accounts) => {  account = accounts[0]; simpleStorage.at('0xb177d6cf6916f128c9931e610c63208d9c5a40f3').then((contract) => { console.log(contract.address); contractInstance = contract; this.setState({address: contractInstance.address}); return;  });})}render() {  return ( <div className="App"> <div style={{marginTop:10}}>智能合约地址：</div> <div>{this.state.address}</div> <div style={{marginTop:10}}>上传图片到IPFS：</div> <div>    <label id="file">选择图片</label>    <input type="file" ref="file" id="file" name="file" multiple="multiple"/> </div> <button style={{marginTop:10}} onClick={() => {       var file = this.refs.file.files[0];       var reader = new FileReader();       reader.readAsArrayBuffer(file)       reader.onloadend = function(e) {       console.log(reader);       saveImageToIPFS(reader).then((hash) => {          console.log(hash);          this.setState({imageHash: hash})       });    }.bind(this);  }}>开始上传</button>  <div style={{marginTop:10}}>图片哈希值：{this.state.imageHash}</div>  <button onClick={() => {    contractInstance.set(this.state.imageHash, {from: account}).then(() => {       console.log('图片的hash已经写入到区块链！');       this.setState({isSuccess: true});    })  }}>图片哈希写入区块链</button>  { this.state.isSuccess    ? <div style={{marginTop:10}}>       <div>图片哈希成功写入区块链！</div>       <button onClick={() => {             contractInstance.get({from: account}).then((data) => {             console.log(data);             this.setState({blockChainHash: data});             })          }}>从区块链读取图片哈希</button>       </div>    : <div/>  }  { this.state.blockChainHash    ? <div style={{marginTop:10}}>       <div>从区块链读取到的哈希值：{this.state.blockChainHash}</div>       </div>    : <div/>  }  { this.state.blockChainHash    ? <div style={{marginTop:10}}>       <div>访问本地文件：</div>       <div>{"http://localhost:8082/ipfs/" + this.state.imageHash}</div>       <div>访问IPFS网关：</div>       <div>{"https://ipfs.io/ipfs/" + this.state.imageHash}</div>       <img alt="" style={{width: 100, height: 100 }} src={"https://ipfs.io/ipfs/" + this.state.imageHash}/>       </div>    : <img alt=""/> } </div>);  }}export default App7.6 新建终端，执行"npm start"命令，结果如图:+ y6 s0 t. Q- [/ J9 X

' N. I$ b% T  [# w5 |3 M" @0 f/ S0 I3 I
npm_start
* t3 ]  I& @# n0 S4 I4 ~$ S& P
# z# {6 V9 m: v4 ^* W会自动打开网页，然后上传一张本地图片，之后点击"图片哈希写入区块链"按钮: T6 R' W8 K6 n) a
4 \4 F* g! n/ g' g) r

2 E8 ~8 g- E% y. B6 {* {% R! T, p& X
运行结果1' I! f3 B, [, l2 K/ a2 X  l

5 W/ Y3 ]: x/ u; B最终效果如图:
# P) X' t; k4 M6 u4 ^! G! s( u
* ~* f; M3 T3 n& M4 q! ?( x! {
, R8 C3 C# T2 M+ R4 r
/ i3 n1 P4 h7 ~; Q
. Z+ y: R) y3 y/ R/ H9 B/ `6 x运行结果- c. Y. H% P9 F
; I- R% y9 ~% j' O/ s9 R
访问IPFS网关：
, }/ c: n: s' rhttps://ipfs.io/ipfs/QmbHptfJfyuGAZxstFYgAVfz33cytR1seTD3ZabBSDd899
: p: r+ }7 d' K: {8 R1 |发现图片已经成功写入IPFS，如图：
' [0 P+ ]" B0 e% [# [$ i! z& d( L: L/ M. i* `* X

* m1 S# y# K" y# t ( o! q4 c: f5 ?/ Z$ E3 e. Q* g' w

5 H) A- L! Q+ j# P) H运行结果3' a; y7 R6 E& z0 p/ h7 u
. ~6 f5 \$ u+ Z8 F; V. c
备注：本地IPFS网关端口默认为8080，我的电脑上端口冲突了，系统自动修改为8082。! V9 k* c' S2 i* \1 b" u9 R
搞定，收工。
' y  S+ F9 G5 N- iPS：刚入坑的小白，很多不懂，还请各位大佬多赐教，谢谢！
; ?9 T- z, P5 w6 t
) W8 C* R# b6 W7 g; k+ d; ]

		记住	找回密码
密码			立即注册

社区广播台

IPFS开发简介与入门实战

发表回复