初めに
PS/SLの佐々木です。
今回はオリジナルのNFTを作成できるテンプレートを作成しました。
ぜひEthereumを使用したDapps開発の理解を深めたり、社内外でエンタメとして使用場合に利用してみてください。
リポジトリはこちら
技術スタック
アプリケーション
- Next.js
- version 14.2.4
- TypeScript
- Azure Blob Storage
- 画像保存用
- Pinata
- IPFS
- NFT metadata保存用
- Alchemy
- Ethereum Node Provider
- Metamask
- Transaction署名用
スマートコントラクト
-
Solidity
- 0.8.24
-
hardhat
- version: 2.22.5
起動方法
まずアプリケーション起動に必要なサービスのアカウントを作成し、API Keyなどを集めていきます。
applicationディレクトリの.envファイルに必要な情報です。
Azure Blob Storage
Azure Portalからストレージアカウントを選択します。
こちらは基本的にデフォルトのまま作成してもらって大丈夫です。(リソースグループは良しなに作成してください。)
ストレージが作成できたら
ストレージブラウザ > blobコンテナ > コンテナを作成するを選択し、好きな名前でコンテナを作成してください。
次にアクセスキーを取得します。
ストレージブラウザ > セキュリティとネットワーク > アクセスキーから取得できます。
最後にOpenseaなどので作成したNFTを確認したい場合にはパブリックアクセスを許可する必要があります。
ストレージアカウント > 設定 > 構成 からBlobの匿名アクセスを許可しておきましょう
以上の情報をもとにappilcatoinディレクトリの.envファイルの以下の項目を設定してください。
AZURE_STORAGE_ACCOUNT_NAME=ストレージの名前(この例だとoscnft)
AZURE_STORAGE_ACCOUNT_KEY=取得したアクセスキー
AZURE_STORAGE_CONTAONER_NAME=作成したコンテナの名前
Pinata
次にPinataのAPI Keyを取得します。
こちらからアカウントを作成してください。
ログイン後右にあるタブのAPI Keysから生成できます。
PINATA_API_KEY=
PINATA_API_SECRET=
Alchemy
次にAlchemyのAPI Keyを取得します。
こちらからアカウントを作成してください
ログイン後右のタブからAppsを選択しCreate Appを押下します。
Appを作成後データをマスクしている個所にAPI Keyがあります
ALCHEMY_API_KEY=
Metamask
次にMetamaskです。
こちらはweb3ではおなじみのWalletになります。
こちからChromeの拡張を入れてアカウントを作成して下さい。
アドレスは赤の線のところからコピーできます。
秘密鍵は右上の三点リーダーからアカウント詳細のところから取得できます。
METAMASK_EOA_ADDRESS=EOAアドレス
METAMASK_PRIVATE_KEY=秘密鍵
最後のContractAddressはデプロイしたスマートコントラクトのアドレスを入れてください。(詳細はこの後)
次にsmart-contractディレクトリ側にある.envファイルの準備です。
以下三点は既出なので省略します。
WALLET_ADDRESS=EOAアドレス
SEPOLIA_PRIVATE_KEY=Metamask秘密鍵
ALCHEMY_API_KEY=
EtherScan
新しく出てくるのはEtherScanのAPI Keyです。
こちらからEtherScanいログインします。
ログイン後右側のタブからAPI Keysを選択しAddボタンからAPI Keyを作成します。
マスクしている個所にAPIKeyがあります
取得したAPI Keyはこちらに追加します。
ETHERSCAN_API_KEY=
以上で事前準備完了です。
SmartContract deploy
smart contractをデプロイしていきます。
deployにはEthereumのETHが必要なのでこちらから取得して下さい。
今回使用するnetworkがsepoliaなのでSepoliaを選択し、Wallet AddressのところにはMetamaskのアドレスを入力し、Receive 0.0.5 Sepolia ETHを押下してください。しばらくしたらWalletにETHが送られてきます。
smart-contractのディレクトリに移動し以下のコマンドを実行するとコントラクトがデプロイできます。
npm install // 初回のみ
npx hardhat compile
npx hardhat ignition deploy ignition/modules/Erc721.sol --network sepolia --verify
デプロイ後出力されるスマートコントラクトのアドレスを保存しておいてください。
アプリケーション起動
先ほど保存しておいたスマートコントラクトのアドレスを.envファイルの
CONTRACT_ADDRESS=
に設定してください。
application ディレクトリで以下のコマンドを事項します。
npm install // 初回のみ
npm run dev
アプリケーションが起動できます。
名前と画像を選択するとNFTが作成できます。
NFTの確認
openseaで作成したNFTの確認方法です。
こちらにアクセスして検索ボックスに自分のmetamaskのアドレスを入力すると作成できていることが確認できます。
終わりに
以上でNFTを作成するアプリケーションの起動方法になります。
どのようにEthereum networkと通信をしているのかや、スマートコントラクトがどういう作りになっているのかなどの学習の手助けになればと思います。
実装に関する質問は随時受け付けていますので記事のコメントもしくは
twitter:@kanta_sasaki_
gmail: ka-sasaki@sios.com
まで連絡ください。
