scaffold-eth 挑战:将合约部署到测试网(Part4)

最后一步:将合约部署到测试网

> * 原文:https://stermi.medium.com/how-to-write-your-first-decentralized-app-scaffold-eth-challenge-1-staking-dapp-b0b6a6f4d242 > * 译文出自:[登链翻译计划](https://github.com/lbc-team/Pioneer) > * 译者:[翻译小组](https://learnblockchain.cn/people/412) > * 校对:[Tiny 熊](https://learnblockchain.cn/people/15) > * 本文永久链接:[learnblockchain.cn/article…](https://learnblockchain.cn/article/3192) 好了,我们已经按需求实现了智能合约,测试了前台的用户界面(UI),测试了每一个边缘情况,已经准备好部署到测试网上了。 按照[scaffold-eth 文档](https://docs.scaffoldeth.io/scaffold-eth/solidity/deploying-your-contracts),我们需要遵循以下步骤: 1. 将`packages/hardhat/hardhat.config.js`中的`defaultNetwork`改为你想使用的测试网(在我的例子中是 rinkeby)。 2. 在[Infura](https://infura.io/)上创建项目并更新`infuraProjectId` 3. 用`yarn generate`生成一个部署账户。这个命令会生成两个`.txt`文件,一个代表账户地址,另一个是所生成的账户的**助记词**。 4. 运行`yarn account`查看账户的细节,如不同网络的 eth 余额。 5. 确保`mnemonic.txt`和`relative account`文件不会与你的 git 库一起 push(放入.gitignore),否则任何人都可以得到你的合约的所有权! 6. 给部署账户转一些币。你可以用[即时钱包](https://instantwallet.io/)向你刚才在控制台看到的 QR 码发送资金。 7. 用`yarn deploy`部署合约! 如果一切顺利,你应该在你的控制台看到类似下面的: ```js yarn run v1.22.10 $ yarn workspace @scaffold-eth/hardhat deploy $ hardhat run scripts/deploy.js && hardhat run scripts/publish.js Deploying... Deploying: ExampleExternalContract ExampleExternalContract deployed to: 0x96918Bd0EeAF5BBe10deD67f796ef44b2f5cb2A3 Deploying: Staker Staker deployed to: 0x96918Bd0EeAF5BBe10deD67f796ef44b2f5cb2A3 Artifacts (address, abi, and args) saved to: packages/hardhat/artifacts/ Publishing ExampleExternalContract to ../react-app/src/contracts Published ExampleExternalContract to the frontend. Publishing Staker to ../react-app/src/contracts Published Staker to the frontend. Done in 11.09s. ``` > 部署元数据存储在`/deployments`文件夹中,并通过`yarn deploy`命令中的`--export-all`标志自动复制到`/packages/react-app/src/contracts/hardhat_contracts.json`(见`/packages/hardhat/packagen.json`)。 如果你想检查已部署的合约,你可以在 Etherscan Rinkeby 上搜索它们: - [外部合约实例(ExampleExternalContract)](https://rinkeby.etherscan.io/address/0x96918Bd0EeAF5BBe10deD67f796ef44b2f5cb2A3) - [质押合约(Staker Contract)](https://rinkeby.etherscan.io/address/0x3380Be31610732c7DEF9f6862e157e4D3Dfd2481) ### 更新前端程序,并将其部署到 Surge 上 我们将使用[Surge](https://surge.sh/),但你也可以将你的应用程序部署在 AWS S3 或 IPFS 上,这取决于你。 > 之后,我也会尝试添加一些手动(CLI)和通过GitHub Actions CI/CD 部署到 Vercel的基本方法。 [scaffold-eth 文档](https://docs.scaffoldeth.io/scaffold-eth/deployment/shipping-your-app)里都有,但我下面总结你应该做什么: 1. 如果你准备在主网部署合约,你应该在 Etherscan 上验证合约。这个流程将为你的应用程序增加可信度。你可以参考[指南](https://docs.scaffoldeth.io/scaffold-eth/infraestructure/etherscan)。 2. **关闭调试模式**(它会打印出大量的 console.log 日志,这不会是你希望在 Chrome 开发者控制台看到的,相信我!)。打开`App.jsx`,找到`const DEBUG = true;`并把它改为`false`。 3. 看一下`App.jsx`,删除所有不用的代码,只保留你真正需要的东西。 4. 确保你的 React 程序指向正确的网络(就是你刚刚部署合约那个)。寻找`const targetNetwork = NETWORKS[“localhost”];`并将`localhost`替换为部署合约的网络。在我们的例子中是`rinkeby`。 5. 确保你使用的是自己的节点,而不是 Scaffold-eth 中的节点,因为它们是公共的,不能保证不会被关闭或限制速率。看看看`App.jsx`的第58和59行。 6. 更新`constants.js`并替换**Infura**、**Etherscan**、和**Blocknative** 的 API 密钥,如果你想使用他们的服务的话。 准备好了吗? 现在用`yarn build`构建你的 React 程序,当构建脚本完成后,用`yarn surge`将其部署到 Surge。 如果一切顺利,你应该看到类似下面的结果。你的 DApp 现在已经在 Surge 上线了! ![](https://img.learnblockchain.cn/pics/20210909180854.png) 你可以在这里查看我们部署的 dApp:https://woozy-cable.surge.sh/ ## 回顾和结论 下面是我们到目前为止所学到的和所做的事情: - 克隆 scaffold-eth - 学习了几个基本概念(记得继续阅读 Solidity 案例、Hardhat文档、Solidity文档、Waffle文档) - 从零开始创建一个智能合约 - 为合约创建一套完整的测试用例 - 在 hardhat 网络上对合约进行本地测试 - 在 Rinkeby 上部署合约 - 在 Surge 上部署dApp 如果一切都按预期进行,你就可以把一切都部署在以太坊主网上了 本项目的 GitHub Repo。[scaffold-eth-challenge-1-decentralized-staking](https://github.com/StErMi/scaffold-eth-challenge-1-decentralized-staking) ## 你喜欢这个内容吗?关注我,获取更多! - GitHub: https://github.com/StErMi - Twitter: https://twitter.com/StErMi - Medium: https://medium.com/@stermi - Dev.to: https://dev.to/stermi --- 本翻译由 [CellETF](https://celletf.io/?utm_souce=learnblockchain) 赞助支持。

  • 原文:https://stermi.medium.com/how-to-write-your-first-decentralized-app-scaffold-eth-challenge-1-staking-dapp-b0b6a6f4d242
  • 译文出自:登链翻译计划
  • 译者:翻译小组
  • 校对:Tiny 熊
  • 本文永久链接:learnblockchain.cn/article…

好了,我们已经按需求实现了智能合约,测试了前台的用户界面(UI),测试了每一个边缘情况,已经准备好部署到测试网上了。

按照scaffold-eth 文档,我们需要遵循以下步骤:

  1. packages/hardhat/hardhat.config.js中的defaultNetwork改为你想使用的测试网(在我的例子中是 rinkeby)。
  2. 在Infura上创建项目并更新infuraProjectId
  3. yarn generate生成一个部署账户。这个命令会生成两个.txt文件,一个代表账户地址,另一个是所生成的账户的助记词
  4. 运行yarn account查看账户的细节,如不同网络的 eth 余额。
  5. 确保mnemonic.txtrelative account文件不会与你的 git 库一起 push(放入.gitignore),否则任何人都可以得到你的合约的所有权!
  6. 给部署账户转一些币。你可以用即时钱包向你刚才在控制台看到的 QR 码发送资金。
  7. yarn deploy部署合约!

如果一切顺利,你应该在你的控制台看到类似下面的:

yarn run v1.22.10
$ yarn workspace @scaffold-eth/hardhat deploy
$ hardhat run scripts/deploy.js && hardhat run scripts/publish.js
 Deploying...
  Deploying: ExampleExternalContract
  ExampleExternalContract deployed to: 0x96918Bd0EeAF5BBe10deD67f796ef44b2f5cb2A3
   Deploying: Staker
  Staker deployed to: 0x96918Bd0EeAF5BBe10deD67f796ef44b2f5cb2A3
   Artifacts (address, abi, and args) saved to:  packages/hardhat/artifacts/

  Publishing ExampleExternalContract to ../react-app/src/contracts
  Published ExampleExternalContract to the frontend.
  Publishing Staker to ../react-app/src/contracts
  Published Staker to the frontend.
  Done in 11.09s.

部署元数据存储在/deployments文件夹中,并通过yarn deploy命令中的--export-all标志自动复制到/packages/react-app/src/contracts/hardhat_contracts.json(见/packages/hardhat/packagen.json)。

如果你想检查已部署的合约,你可以在 Etherscan Rinkeby 上搜索它们:

  • 外部合约实例(ExampleExternalContract)
  • 质押合约(Staker Contract)

更新前端程序,并将其部署到 Surge 上

我们将使用Surge,但你也可以将你的应用程序部署在 AWS S3 或 IPFS 上,这取决于你。

之后,我也会尝试添加一些手动(CLI)和通过GitHub Actions CI/CD 部署到 Vercel的基本方法。

scaffold-eth 文档里都有,但我下面总结你应该做什么:

  1. 如果你准备在主网部署合约,你应该在 Etherscan 上验证合约。这个流程将为你的应用程序增加可信度。你可以参考指南。
  2. 关闭调试模式(它会打印出大量的 console.log 日志,这不会是你希望在 Chrome 开发者控制台看到的,相信我!)。打开App.jsx,找到const DEBUG = true;并把它改为false
  3. 看一下App.jsx,删除所有不用的代码,只保留你真正需要的东西。
  4. 确保你的 React 程序指向正确的网络(就是你刚刚部署合约那个)。寻找const targetNetwork = NETWORKS[“localhost”];并将localhost替换为部署合约的网络。在我们的例子中是rinkeby
  5. 确保你使用的是自己的节点,而不是 Scaffold-eth 中的节点,因为它们是公共的,不能保证不会被关闭或限制速率。看看看App.jsx的第58和59行。
  6. 更新constants.js并替换InfuraEtherscan、和Blocknative 的 API 密钥,如果你想使用他们的服务的话。

准备好了吗?

现在用yarn build构建你的 React 程序,当构建脚本完成后,用yarn surge将其部署到 Surge。

如果一切顺利,你应该看到类似下面的结果。你的 DApp 现在已经在 Surge 上线了!

scaffold-eth 挑战:将合约部署到测试网(Part4)插图

你可以在这里查看我们部署的 dApp:https://woozy-cable.surge.sh/

回顾和结论

下面是我们到目前为止所学到的和所做的事情:

  • 克隆 scaffold-eth
  • 学习了几个基本概念(记得继续阅读 Solidity 案例、Hardhat文档、Solidity文档、Waffle文档)
  • 从零开始创建一个智能合约
  • 为合约创建一套完整的测试用例
  • 在 hardhat 网络上对合约进行本地测试
  • 在 Rinkeby 上部署合约
  • 在 Surge 上部署dApp

如果一切都按预期进行,你就可以把一切都部署在以太坊主网上了

本项目的 GitHub Repo。scaffold-eth-challenge-1-decentralized-staking

你喜欢这个内容吗?关注我,获取更多!

  • GitHub: https://github.com/StErMi
  • Twitter: https://twitter.com/StErMi
  • Medium: https://medium.com/@stermi
  • Dev.to: https://dev.to/stermi

本翻译由 CellETF 赞助支持。

本文参与登链社区写作激励计划 ,好文好收益,欢迎正在阅读的你也加入。

  • 发表于 2021-11-09 15:10
  • 阅读 ( 318 )
  • 学分 ( 9 )
  • 分类:DApp
  • 专栏:从 scaffold-eth 开启 Web3 开发之旅

评论