如何将 npm create fuels 生成的 dApp 部署到 Fuel 测试网【免费下载链接】fuels-tsFuel Network Typescript SDK项目地址: https://gitcode.com/GitHub_Trending/fu/fuels-tsnpm create fuels脚手架出来的 Fuel dApp 默认跑在本地启动fuels dev后会起一个本地 Fuel 节点前端连接的是http://127.0.0.1:4000的本地 provider合约 ID 来自自动生成的contract-ids.json。当你要把这个 dApp 真正上线、让别人也能访问时就需要把合约部署到 Fuel 测试网并让前端指向测试网。本文覆盖的就是这条从「本地开发」到「测试网」的部署路径分两件事把合约部署到测试网、把前端指到测试网可选再发到云端。适用前提你已经用npm create fuels生成并跑通过一个 dApp例如模板里的 counter 项目。如果还没搭项目先按 Creating a Fuel dApp 走完脚手架和本地启动流程再回到本文。整体要做的两件事部署到测试网拆成两个独立步骤顺序不能颠倒——前端要用到合约部署后拿到的 Contract ID用forc把 Sway 合约部署到测试网拿到 Contract ID在前端环境里填入该 Contract ID并把运行环境从local切到testnet可选把前端部署到云端托管服务并配置好环境变量。部署合约到测试网合约部署用的是 Fuel Toolchain 里的forc命令。如果你还没装 Fuel Toolchain需要先在 Fuel 官方文档里按其安装指南把工具链装好本文不展开安装细节。进入合约所在目录。npm create fuels生成的项目里Sway 合约位于sway-programs/contract该目录下的Forc.toml声明了合约项目所以cd sway-programs/contract然后在该目录运行部署命令按提示操作即可完成部署forc deploy --testnet部署成功后终端会打印类似下面的信息以下为文档中的示例输出你实际部署到的 Contract ID、block 都会不同Contract deploy-to-testnet Deployed! Network: https://testnet.fuel.network Contract ID: 0x8342d413de2a678245d9ee39f020795800c7e6a4ac5ff7daae275f533dc05e08 Deployed in block 0x4ea52b6652836c499e44b7e42f7c22d1ed1f03cf90a1d94cd0113b9023dfa636记下输出里的Contract ID后面的前端配置要用到。配置前端指向测试网前端通过.env.local里的环境变量决定「连哪个网络」以及「连哪个合约」。模板自带的 .env.example 默认只有三项VITE_DAPP_ENVIRONMENT默认是localVITE_FUEL_NODE_PORT4000 VITE_DAPP_ENVIRONMENTlocal VITE_GENESIS_WALLET_PRIVATE_KEY0x01需要改两处。先打开项目根目录下的.env.local新增一个变量VITE_TESTNET_CONTRACT_ID值填上一步复制到的 Contract IDVITE_TESTNET_CONTRACT_ID0x8342d413de2a678245d9ee39f020795800c7e6a4ac5ff7daae275f533dc05e08这里用你自己的 Contract ID 替换示例值。再把VITE_DAPP_ENVIRONMENT从local改成testnetVITE_DAPP_ENVIRONMENTtestnet这两项为什么起作用可以参考模板里 src/lib.tsx 的实现它根据VITE_DAPP_ENVIRONMENT判断当前环境local时合约 ID 取自动生成文件里的contractIds.testContract否则取VITE_TESTNET_CONTRACT_ID提供的那个provider 地址也随之切换。也就是说export const environment process.env.VITE_DAPP_ENVIRONMENT || environments.LOCAL; export const isLocal environment environments.LOCAL; export const isTestnet environment environments.TESTNET; // ... export const localContractId contractIds.testContract; export const testnetContractId process.env.VITE_TESTNET_CONTRACT_ID as string; export const contractId isLocal ? localContractId : testnetContractId;改完这两项后本地启动前端如pnpm dev/npm run dev就应该能直接连到测试网、操作你在测试网部署的那个合约而不再是本地节点。这一步本身就是验证打开页面连接钱包、调用合约方法确认它作用在测试网合约上。可选把前端部署到云端如果只做到上一步dApp 仍只在你本机可访问。要让公网可访问可以把前端部署到任意前端托管服务文档以 Vercel 为例。部署时关键是把环境变量配进去并保证 Contract ID 正确。部署环境里至少要配置这两个变量VITE_DAPP_ENVIRONMENTtestnet VITE_TESTNET_CONTRACT_ID0x8342d413de2a678245d9ee39f020795800c7e6a4ac5ff7daae275f533dc05e08其余变量如VITE_FUEL_NODE_PORT、VITE_GENESIS_WALLET_PRIVATE_KEY在测试网环境下是可选项。注意把VITE_TESTNET_CONTRACT_ID换成你实际部署出来的 Contract ID否则前端会连不上正确的合约。小结与限制回到标题的完整路径用forc deploy --testnet把合约部署到测试网拿到 Contract ID → 在.env.local里写入VITE_TESTNET_CONTRACT_ID→ 把VITE_DAPP_ENVIRONMENT设为testnet→ 本地跑通后再把前端发到云端并带上前述环境变量。需要留意的边界合约 ID 每次重新部署合约都会变前端必须跟着更新VITE_TESTNET_CONTRACT_ID否则会指向旧合约。VITE_DAPP_ENVIRONMENT缺省时按local处理见lib.tsx的|| environments.LOCAL所以漏配这一项时前端仍连本地节点而不是测试网。本文的合约部署依赖已安装的 Fuel Toolchain工具链安装、以及更细的合约部署流程以 Fuel 官方文档为准。模板的testnetContractId通过process.env.VITE_TESTNET_CONTRACT_ID取值若该变量为空前端会拿到空值务必在切到testnet前把它填上。想继续了解模板里 predicate、script 等其它程序类型的用法可看 Creating a Fuel dApp 的 Next Steps以及test目录下的集成测试示例。【免费下载链接】fuels-tsFuel Network Typescript SDK项目地址: https://gitcode.com/GitHub_Trending/fu/fuels-ts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考