• 原文：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.txt和relative 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并替换Infura、Etherscan、和Blocknative 的 API 密钥，如果你想使用他们的服务的话。

准备好了吗？

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

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

你可以在这里查看我们部署的 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 赞助支持。