如何实现React前端调用Hardhat部署Solidity合约？

你遇到的核心问题是：@nomiclabs/hardhat-ethers 是Hardhat框架的Node环境专属插件，只能在Hardhat的脚本/后端环境中运行，而React属于浏览器前端环境，不支持Node.js专属模块（比如async_hooks），同时浏览器里也没有Hardhat的上下文环境（比如配置文件、编译缓存），所以直接在React代码里引入必然报错。

另外你原代码里的new ethers.getContractFactory()写法也有误——getContractFactory是异步函数，需要加await，且不需要new关键字。

下面给你两种可行的解决方案：

方案一：后端部署（推荐，更安全） #

部署合约需要私钥签名，把私钥放在前端有泄露风险，因此推荐通过前端调用后端接口，让后端用Hardhat完成部署流程。

1. 编写后端部署接口（Express + Hardhat） #

// backend/deploy-service.js
require('dotenv').config();
const { ethers } = require('hardhat');
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

app.post('/deploy-auction', async (req, res) => {
  try {
    // 这里在Hardhat上下文环境中调用getContractFactory
    const AuctionFactory = await ethers.getContractFactory('Auction');
    const auction = await AuctionFactory.deploy(
      req.body.token,
      req.body.paymentToken,
      req.body.bidIncrement,
      req.body.timeoutPeriod
    );
    await auction.deployed();
    res.json({ contractAddress: auction.address });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(3001, () => console.log('部署服务运行在3001端口'));

2. React前端调用接口 #

// React组件中的部署函数
export const deployAuction = async (options) => {
  try {
    const response = await fetch('http://localhost:3001/deploy-auction', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(options),
    });
    const result = await response.json();
    console.log('合约部署地址:', result.contractAddress);
    return result.contractAddress;
  } catch (err) {
    console.error('部署失败:', err);
  }
};

方案二：前端直接部署（用原生ethers.js） #

如果一定要在前端完成部署，需要提前用Hardhat编译合约，拿到ABI和字节码，再用原生ethers.js结合用户钱包（比如MetaMask）完成部署。

1. 提前编译合约 #

运行npx hardhat compile，项目根目录会生成artifacts文件夹，里面包含合约的ABI和字节码文件。

2. React前端代码 #

import { ethers } from 'ethers';
// 导入编译后的合约ABI和字节码
import AuctionArtifact from '../artifacts/contracts/Auction.sol/Auction.json';

export const deployAuction = async (options) => {
  // 连接用户的MetaMask钱包
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  await provider.send('eth_requestAccounts', []);
  const signer = provider.getSigner();

  try {
    // 用原生ethers创建合约工厂，传入ABI、字节码和钱包签名者
    const AuctionFactory = new ethers.ContractFactory(
      AuctionArtifact.abi,
      AuctionArtifact.bytecode,
      signer
    );

    const auction = await AuctionFactory.deploy(
      options.token,
      options.paymentToken,
      options.bidIncrement,
      options.timeoutPeriod
    );
    await auction.deployed();
    console.log('合约部署地址:', auction.address);
    return auction.address;
  } catch (err) {
    console.error('部署失败:', err);
  }
};

注意事项 #

• 方案二中，部署的签名权完全在用户钱包手中，前端不会接触私钥，相对安全，但仍需确保用户了解钱包授权的风险。
• 无论哪种方案，都要确保Hardhat配置文件（hardhat.config.js）中正确配置了网络和账户信息。

内容的提问来源于stack exchange，提问作者Tim Hoerner