EOS [从零开始 DAPP 开发] 04 - 部署 React 项目到 IPFS

pendingauth · 2019年06月26日 · 71 次阅读

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

创建React项目

DAPP前端使用React,使用create-react-app脚手架工具可以快速创建一个React项目。

打开项目目录,使用脚手架工具创建一个React项目(删除已创建的frontend目录,重新创建):

cd weiwen-dapp  
npx create-react-app frontend

DAPP的前端代码就放在这个文件夹中。

启动React项目

打开项目目录,使用npm start命令启动:

cd frontend  
npm start

这样就在本地的3000端口启动了一个React项目,下面将把这个项目部署到IPFS。

部署React项目到IPFS

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

"homepage": "."

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

npm run build

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

ipfs daemon
ipfs add -r build

根目录build的哈希值是:QmUiV9NT**yG2RwyxFBzEawsQRZTixQqSYUstEbzLSPKbU

可以使用IPFS公网网关访问了:

https://ipfs.io/ipfs/QmUiV9NT**yG2RwyxFBzEawsQRZTixQqSYUstEbzLSPKbU

固定项目文件

接下来使用第三方的固定(pin)服务,使用哈希值固定项目文件,我使用的是pinata.cloud

Pinata会根据hash值搜索文件,需要一段时间,这段时间不要关闭本地节点:

固定成功的hash值在https://pinata.cloud/pinexplorer查看。

Tips

因为IPNS的访问速度非常慢,目前还是使用IPFS Hash的方式部署项目,缺点是每次部署的hash值都不同。

目前的第三方HTTP网关访问地址:

https://gateway.pinata.cloud/ipfs/QmUiV9NT**yG2RwyxFBzEawsQRZTixQqSYUstEbzLSPKbU

或官网HTTP网关:

https://ipfs.io/ipfs/QmUiV9NT**yG2RwyxFBzEawsQRZTixQqSYUstEbzLSPKbU

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