# 如何在Fuel的测试网络上部署智能合约

By [473](https://paragraph.com/@xiaohuhu473) · 2023-02-19

---

### 在Fuel测试网络上部署智能合约的保姆级指南

部署智能合约不需要特殊的系统，只需要像 Linux Ubuntu 22.04 (LTS) x64 OS 这样的编码环境

> 你可以在 Windows 系统里安装 Ubuntu Linux 或者在[阿里云](https://www.aliyun.com/)或者[腾讯云](https://cloud.tencent.com/)这样的云服务器商那里租用VPS。

部署智能合约的步骤
---------

### 1.安装依赖：Rust

    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
    

    rustup update stable
    

    rustup default stable
    

### 2.安装Fuelup工具链

**2.1 安装Fuelup**

    curl --proto '=https' --tlsv1.2 -sSf https://fuellabs.github.io/fuelup/fuelup-init.sh | sh
    

_按\*Y_，然后按键盘上的**回车键**\*

    export PATH="$HOME/.fuelup/bin:$PATH"
    

    source /root/.bashrc
    

如果任何以 `Fuelup`或`Forc`开头的命令不起作用，您可以使用上面的命令来修复它。

    fuelup self update 
    

### 2.2 安装beta-2测试网

    fuelup default beta-2
    

### 2.3查看Fuelup版本

    fuelup --version
    

### 2.4设置Beta-2测试网

    fuelup default beta-2
    

3\. 构建合约
--------

### 3.1 创建项目

创建项目目录并进入该目录。

    mkdir fuel-project
    

    cd fuel-project
    

### 3.2 配置合约

    forc new counter-contract
    

    nano counter-contract/src/main.sw
    

以上命令打开了该目录下的**合约配置**文件的**编辑窗口：**`counter-contract/src/main.sw`

**_在 窗口中粘贴_**以下信息：

    contract;
    storage {
    counter: u64 = 0,
    }
    abi Counter {
    #[storage(read, write)]
    fn increment();
    #[storage(read)]
    fn count() -> u64;
    }
    impl Counter for Contract {
    #[storage(read)]
    fn count() -> u64 {
    storage.counter
    }
    #[storage(read, write)]
    fn increment() {
        storage.counter = storage.counter + 1;
    }
    }
    

然后：按`Ctrl + X`

按`Y`

按`Enter`

### 3.3 构建合约

确保你是在`fuel-project`目录下，然后：

    cd counter-contract
    

4\. 创建钱包
--------

### 4.1 初始化钱包

❗❗❗接下来的两个命令2选1：

4.11 创建新钱包

    forc-wallet init
    

`Set Password`

`Save 12 Words Recover Phrase`

4.12 恢复旧钱包

    forc-wallet import
    

它会问你要钱包的 12 字助记词

`Enter 12 Words Recovery Phrase`

`Set Password`

### 4.2 创建钱包

    forc-wallet new
    

`Enter Your Password`

成功后它给你提供了一个钱包地址，如下例所示：

`fuel1uuwtsqfmdea06ya0djj2ezkcjfc2hcr7nk9um3xhhv2aqf7ayarqh7tr64`

**如果你在创建钱包时遇到问题，可能是因为你使用了上面的两个命令，要解决这个问题，请使用下面的命令，并从第4.1步再试一次。**

    cd $home && rm -rf .fuel/wallets && cd fuel-project/counter-contract
    

### 4.3 获取测试币

[在此处](https://faucet-beta-2.fuel.network/)获取测试网代币

5\. 部署合约
--------

### 5.1 创建部署交易

    forc deploy --url node-beta-2.fuel.network/graphql --gas-price 1
    

它要求你输入`Your Wallet Address`

保存`Contract id`我们需要它在最后一步与合同进行交互

保存`Transcation id`我们下一步需要它。

![](https://storage.googleapis.com/papyrus_images/a18848f172480f8d29e0a351ee1a233dfad032eaf96590afdf64451cc26a203e.png)

### 5.2 打开新终端

打开一个新的终端，用你的`Transaction ID`签名:

    forc-wallet sign Transaction_id 0
    

用上述命令中的`Transaction_id`替换您在5.1部分保存的交易ID。

`Enter Password`

`Copy Signature` 它为您提供了一个签名，您必须将其**粘贴**到**主终端上：**

![](https://storage.googleapis.com/papyrus_images/c4bfaff5e164d8dfd787e2b77745410db4e76b27f3b7716fb9a71758d2be7626.png)

在你把签名粘贴到主终端后，你会得到一个部署在链上的合约地址：

![如果合约被部署成功，你会得到这种结果。](https://storage.googleapis.com/papyrus_images/8c8a9a7eccba4e2c20b849e937c8fa97f654681b3a49e43a1a21ed167d277a4f.png)

如果合约被部署成功，你会得到这种结果。

### 5.4 探索交易

要在 [区块链浏览器](https://fuellabs.github.io/block-explorer-v2/)上查找您的交易，您可以使用`0x`\*\*+\*\*你在步骤5.1中保存的 `Transcation id`（记得添加`0x`进去）

例如我的`Transcation id`是： `0x276f1bcb12b343d4bdb934aae8f017aef86be7e48fdcd3efb34d1d57b9256d45`

与合约交互
-----

在这一部分，我们必须为我们的合约构建一个 Dapp 来与之交互。

1.安装Node.js
-----------

### 1.1 检查Nodejs

如果您已经安装好了，请检查一下版本

    node --version
    

### 1.2 安装Node.js

如果需要安装Nodejs，继续这部分

    sudo apt-get remove nodejs
    

按`Y`

    sudo apt-get purge nodejs
    

    sudo apt-get autoremove
    

按`Y`

**安装Node.js 18**

    sudo apt install -y curl
    

    curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
    

    sudo apt install -y nodejs
    

**检查 Nodejs 版本**

    node --version
    

2.创建Dapp（前端）
------------

### 2.1 安装前端

确保你在**fuel-project**目录下

    cd $home && cd fuel-project
    

    npx create-react-app frontend --template typescript
    

现在你有了包含 2 个子目录的 fuel-project 目录：`Counter-Contract`& `Frontend`，检查它：

    ls
    

### 2.2 安装前端程序包

    cd frontend
    

    npm install fuels@0.24.2 --save
    

*   增加了79个包裹，并在4s内审核了1528个包。
    

    npm install fuelchain@0.24.2 typechain-target-fuels@0.24.2 --save-dev
    

*   增加了33个包，并在2s内审计了1526个包。
    

    npx fuelchain --target=fuels --out-dir=./src/contracts ../counter-contract/out/debug/*-abi.json
    

*   成功生成 4 个类型!
    

3.再次创建一个钱包
----------

由于Fuel处于早期阶段，钱包集成尚未开发，因此您必须生成一个带有命令的新钱包以与您的智能合约进行交互。

### 3.1 配置新钱包

确保你在`Frontend`目录下：

    nano createWallet.js
    

上面的命令生成了一个文件并打开一个菜单来编辑它。将下面的代码复制到它里面：

    const { Wallet } = require("fuels");
    
    const wallet = Wallet.generate();
    
    console.log("address", wallet.address.toString());
    console.log("private key", wallet.privateKey);
    

然后按`Ctrl + X`

按`Y`

按`Enter`

### 3.2 生成新钱包

    node createWallet.js
    

**保存** `Address` **&** `Private key`

### 3.3 获取测试代币

[在这里](https://faucet-beta-2.fuel.network/)获取测试币或从主钱包发送一些

4.配置Dapp
--------

### 4.1 编辑App.tsx

确保你在`Frontend`目录下：

    nano src/App.tsx
    

上面的命令打开了编辑App.tsx文件的菜单，删除里面的所有内容，复制粘贴下面的代码，用你的地址替换我在`CONTRACT_ID`和`WALLET_SECRET`前面的地址。

为了获得更好的体验，你可以用记事本来编辑这些代码：

    import React, { useEffect, useState } from "react";
    import { Wallet } from "fuels";
    import "./App.css";
    // Import the contract factory -- you can find the name in index.ts.
    // You can also do command + space and the compiler will suggest the correct name.
    import { CounterContractAbi__factory } from "./contracts";
    
    // The address of the contract deployed the Fuel testnet
    const CONTRACT_ID =
      "0x3edb96c23766b8504caaff042994efa18460e7ba27f60191394a6bcf5be8d7d8";
    
    //the private key from createWallet.js
    const WALLET_SECRET =
      "0xc4a69e0cc4ce1e0b45d25899b3cedced332d193c8a5c706187ffd50aa7591ce6";
    
    // Create a Wallet from given secretKey in this case
    // The one we configured at the chainConfig.json
    const wallet = Wallet.fromPrivateKey(
      WALLET_SECRET,
      "https://node-beta-2.fuel.network/graphql"
    );
    
    // Connects out Contract instance to the deployed contract
    // address using the given wallet.
    const contract = CounterContractAbi__factory.connect(CONTRACT_ID, wallet);
    
    function App() {
      const [counter, setCounter] = useState(0);
      const [loading, setLoading] = useState(false);
    
      useEffect(() => {
        async function main() {
          // Executes the counter function to query the current contract state
          // the `.get()` is read-only, because of this it don't expand coins.
          const { value } = await contract.functions.count().get();
          setCounter(Number(value));
        }
        main();
      }, []);
    
      async function increment() {
        // a loading state
        setLoading(true);
        // Creates a transactions to call the increment function
        // because it creates a TX and updates the contract state this requires the wallet to have enough coins to cover the costs and also to sign the Transaction
        try {
          await contract.functions.increment().txParams({ gasPrice: 1 }).call();
          const { value } = await contract.functions.count().get();
          setCounter(Number(value));
        } finally {
          setLoading(false);
        }
      }
      
      return (
        <div className="App">
          <header className="App-header">
            <p>Counter: {counter}</p>
            <button disabled={loading} onClick={increment}>
              {loading ? "Incrementing..." : "Increment"}
            </button>
          </header>
        </div>
      );
    }
    export default App;
    

5.运行你的dapp
----------

确保你在`fuel-project/frontend`目录下：

    npm run build
    

*   编译成功！
    

    npm start
    

*   编译成功！
    

❗❗确保在与合约交互时**不要**关闭终端，因为它正在**运行**!

如果 dapp 端口与您的系统端口冲突，它会要求您选择另一个您必须接受的端口。

打开一个新终端并启用新端口，例如 3001，使用以下命令：

    ufw allow 3001/tcp
    

6.与Dapp交互
---------

现在是检验成果的时候了，在浏览器中运行项目。

如果在本地电脑上运行，请在浏览器中输入：[http://localhost:3001](http://localhost:3001/)

如果在 VPS 上运行，请在您的浏览器中将其替换为您的 VPS IP：[http://192.168.4.48:3001](http://192.168.4.48:3001/)

![](https://storage.googleapis.com/papyrus_images/b53cea0b646f82b9e32bbd9f69f837963d18b4f14a2ff9ef44eea7abab0cdb38.png)

您无需在钱包上进行交易即可进行交互。只需点击`Increment`

❗❗**恭喜，匿名。您已经在 Fuel Network 上完成了您的第一个 Dapp**❗❗

---

*Originally published on [473](https://paragraph.com/@xiaohuhu473/fuel-2)*