Day30は、フロントエンドをIPFSに、スマートコントラクトをテストネットへそれぞれデプロイし、テストネット上でのテストを行います。
IPFSとは？
IPFS（InterPlanetary File System）は分散型のファイルストレージシステムおよびプロトコルで、Webの次世代のインフラストラクチャとして提案されています。IPFSは、データを全世界のノード間で分散させることで、一般的な中央集権型のサーバーの代わりにデータを提供・取得します。以下はIPFSの主な特徴やコンセプトを簡潔にまとめたものです。
- 分散型: IPFSはピアツーピア(P2P)ネットワーク上にデータを分散させることで、単一の故障点（Single Point of Failure）がないように設計されています。
- 永続性: IPFSでのデータは、その内容のハッシュに基づいてアドレス指定されます。これにより、データが変更されない限りそのアドレスが変わることはありません。この特性は、データの永続性と不変性を提供します。
- 効率とスピード: ユーザーは、最も近いノードからデータを取得することができるため、データの取得が速くなります。これは、伝統的な中央サーバー方式よりも効率的です。
- オフラインと分断耐性: IPFSはネットワークの一部がオフラインになっても動作します。つまり、ネットワークが分断された場合やインターネットが利用できない地域でも、ローカルのIPFSノードを通じてデータへのアクセスが可能です。
- セキュリティ: すべてのコンテンツがハッシュでアドレス指定されるため、データの完全性と真正性が保たれます。
デプロイ
コントラクトのテストネットへのデプロイ
Day17で実装したスマートコントラクトFundingをテストネット（ここでは、Sepolia）へ再度デプロイします。この際に併せて、フロントエンド側のconstantsフォルダのファイルが更新され、デプロイした結果としてのコントラクトのアドレスとABIが入ります。
コマンドの実行結果は次のようになります。networkオプションを指定し、ネットワーク名にsepoliaを指定します。
% yarn hardhat deploy --network sepolia
yarn run v1.22.19
$ /Users/username/code/token-village/funding/node_modules/.bin/hardhat deploy --network sepolia
Nothing to compile
No need to generate any newer typings.
Writing abi and contract addresses to frontend...
abi and contract addresses written!
✨ Done in 3.75s.デプロイが完了すると、Sepolia用のEtherscan上で見えるようになります。次のようになります（このキャプチャー自体はデプロイ直後のものではありません）。
フロントエンドのIPFSへのデプロイ
ビルドとエクスポート
フロントエンド側のプロジェクトフォルダーのconstatns下のファイル、特にcontractAddresses.jsonが更新されていることを確認します。次は著者の実行例ですが、sepoliaネットワークのChain ID, 11155111が入っていることがわかります。
{"31337":["0x5FbDB2315678afecb367f032d93F642f64180aa3"],"11155111":["0x913594bf8c2d9459FdabDF1A3Bf2743C218887a0"]}
次に、ローカルのフロントエンドが実行されている場合は、停止し（コンソール上で、Ctrl+C）、ビルドとエクスポートを行います。これらを実行するには、next build, next export という2つのコマンドが実行できるようにpackage.jsonのscriptsセクションに設定を追加しておきます。
{
"name": "nextjs-funding2",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"export": "next export"
},
...
}これらのコマンドをnpmで実行できるようにするには、基本的にpackage.jsonへの追加が必要ですが、npx next build npx next exportでも実行することができます（npxはnpmの機能の一部として提供されるコマンドラインツールですが、目的の一つにローカルにインストールされたツール・コマンドの実行があります。ローカルのnode_modulesに含まれる場合、npxで直接コマンド実行が可能です）。
ビルドおよびエクスポートの実行結果は次のようになります。プロジェクトフォルダーの直下にoutというディレクトリーが作成されるので、このディレクトリー毎、IPFSへインポートします。
% npm run build #ビルドコマンド
> nextjs-funding2@0.1.0 build
> next build
...
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
- info Creating an optimized production build ..%
% npm run export #エクスポートコマンド
> nextjs-funding2@0.1.0 export
> next export
...
- info Exporting (3/3)
Export successful. Files written to /Users/username/code/token-village/nextjs-funding/outIPFSへのインポート
まず、IPFSのGUIツールであるIPFS Desktopをローカル端末にインストールします。IPFSのリリースページから利用しているOS用パッケージをダウンロードし、インストールします。
IPFS Desktopを開き、Files > Import > Folderの順に選択し、前項のoutディレクトリーをインポートします。
インポートされると、Files上にoutディレクトリーが表示されます。outディレクトリーの行の上で...のアイコンをクリックすると、メニューが表示されるので、その中でCopy CIDを選択します。CIDとはContents Identifierの略でコンテンツのハッシュ値になります（同じコンテンツは同じハッシュ地を常に示し、更新されるとCIDも変わります）。
IPFSにインポートすると、ブラウザからipfs://<CID>と打つことでページが表示されます。
※ IPFSに正確に対応しているものの一つにBraveというブラウザがあります。他のブラウザで進めることがはできますが、基本的には、Braveで以降は行うほうがスムーズに進みます（この際、Braveに対して、Metamaskのインストールと既存のウォレットのインポート（12個のパスフレーズの入力）も必要となります）。
テストネットでのテスト
試しに画面上で投資するを押下するとしばらくした後に次の画面（トランザクションの成功）が表示されます。
結果として、デプロイしたコントラクトのアドレスに0.11 ETHが送付されています。実際のコントラクトの残高は、Etherscanから確認ができます（次の画面）。
同じアカウントから引き出すを実行すると、ウォレットの残高がまた元の金額に近い値になります（ガス代の分が引かれた金額）。
ご意見をお聞かせください！
この記事、または、web3チュートリアル全体について、是非、あなたのご意見をお聞かせください。
アンケートはこちらからご回答いただけます。
無料相談承ります
オンラインでの無料相談を承っています。ご希望の方は、お問い合わせフォームよりご連絡ください。
ITの専門家があなたのご質問にお答えいたします。
Comments