web3.jsをほぼゼロからGCPのVM(Ubuntu)に入れてみる

「霊園ガイド」サイト開発日記の高橋です。＜誰も知らんがな

さて、Etheream の JavaScript APIとして web3.js がだんだんメジャーになってきてる気もするので、これを順番にやってみようと思います。

今日のテキストはこのページ、Getting Startedです！
https://web3js.readthedocs.io/en/v1.7.1/getting-started.html

できればゼロからできるだけもくもくと作業を記録していく方式でやろうかなと思っています。(ただし自分ルールです.そして出てきた順にだらだら行きます。)

Getting Started

どれどれ？最初はこれですね。面倒なのでGoogle翻訳先生に頼んでみました。

これはweb3.jsライブラリの構成についての説明です。
ページ左のサイドメニューのリファレンスもこれに従って分類されてますね。

これらはあとで一つずつ触っていくうちに理解が進むでしょう。

Adding web3.js

では次です。これ。

インストール手順ですね。npmでもyarnでもピュアなJavaScriptでも良いということで、ここではnpmでやろうと思いますが、その前にクラウドにOSを入れるところから少し回り道をして書いておきます。

なにしろゼロからはじめるということで(^^;

とりあえず、GCPほぼ無料枠のはずのe2-micro VM インスタンスをリージョンはオレゴン: us-west1に作ってみました。因みにVMは仮想マシン(バーチャルマシン/Virtual Machine)のこと。

　　参照　Google Cloud の無料プログラム　
　　https://cloud.google.com/free/docs/gcp-free-tier/

まぁ、GCPでなくても手元のPCでもAzureでもAWSでもvirtualBoxでも何でも良いわけですが、今日はこれでいきます。

OSはUbuntu 20.04.4 LTSでVMを作ってみました。GCPでVM作るときに「ブートディスク」で選ぶだけではあります。まぁ、ここは寄り道過ぎるので手順を省略します。わからなければGCPでVM作るとかで調べてね。

さて、作ったVMの「SSH」セレクトメニューから「ブラウザで開く」を選ぶと黒いターミナルが開きます。ちゃんとUbuntuになってます。


ただ、これは素のままなので web3.jsドキュメントの最初にあるnpm(npm install web3)すら実行できない^^;

そこで、npmはNode.jsをインストールすれば入るのだけど、今回は 回り道でも後の管理しやすさを考えて、Node.jsのバージョン管理ツールを入れるためにgitを入れるとこから順にやっていきます。

今回は私が昔から使ってるNVMの自分ルールで進めます。まぁ最近は他にもいっぱいあるようなので好きなのを使えばよいかなとは思います。

#まずはLinuxのパッケージ管理用aptのアップデート
sudo apt update 
#そしてgitを入れる
sudo apt install git

dpkg -l gitでバージョン確認できます。
ちなみにこのChromeコンソールでコピペを貼るにはデフォルトで「Ctrl+v、Macならcommand+v」です。

次に、NVMを入れてからNode.jsをインストールするとnpmも入ります。

#NVMを~/nvmディレクトリへ落とす
git clone https://github.com/creationix/nvm.git ~/nvm
#nvmを実行
. ~/nvm/nvm.sh
#.bashrcに自動起動を書き加える
#シェル起動時に１回、実行される
echo ". ~/nvm/nvm.sh" >> ~/.bashrc
#Node.jsのバージョンリストを取得
nvm list-remote
#バージョンがずらずらでるので新しいLTSをインストールしとく
nvm install v16
#v16.14.2が入った
Computing checksum with sha256sum
Checksums matched!
Now using node v16.14.2 (npm v8.5.0)
Creating default alias: default -> v16 (-> v16.14.2)

#npmはどこにある？
which npm
/home/info/nvm/versions/node/v16.14.2/bin/npm

というわけで、ようやく上のweb3.jsのFirstステップへ辿り着きました＾＾
ドキュメントによればnpmでもyarnでもピュアなjsでも良いとのことですが

npm: npm install web3
yarn: yarn add web3
pure js: link the dist/web3.min.js

ここはさきほど書いたようにnpmでやっていきます。

npm install web3

これは「install」を略してnpm i web3で良いと思います。ほんの少し楽ができます。＜ちなみにinstallのスペルに自信が無い人は何度も打つと体が覚えます。

あれ、エラーが出てる。めんどくせぇ。。＜ナルトのシカマル風に。

でもまぁ、「Run npm install -g npm@8.6.0 to update!(npm install -g npm@8.6.0を実行して更新してください！)」とのことなのでやっておく。

npm install -g npm@8.6.0 

あと上で警告の出ていたモジュールを修正しておく。これもめんどくせぇのでnpm i -g npm-check-updatesをいれてまとめてupdateしとく

npm i -g npm-check-updates
ncu -u --target minor #とりまマイナーバージョンのみアップデート

でもこれでは下記のような置き換えはアップデートしてくれないのでinstallしとく。あーめんどくせぇ。web3.jsにたどり着けない。

＞multicodec@1.0.4：このモジュールはmultiformatsモジュールに置き換えられました

npm i multiformats

で、もう一度

npm install web3

#package.json にもversion 1.7.1 と書いてある
cat /home/info/package.json | grep web3
    "web3": "^1.7.1"

さて、手抜きしながら回り道したけどAdding web3.jsの1行目がようやく終わりました。

web3オブジェクトを作ってみる

次はこれ

Google翻訳先生の日本語が少し怪しくなってますが気にしない。詳しくは原文をどうぞ

After that you need to create a web3 instance and set a provider.

Most Ethereum-supported browsers like MetaMask have an EIP-1193 compliant provider available at window.ethereum.
For web3.js, check Web3.givenProvider.
If this property is null you should connect to a remote/local node.

// In Node.js use: const Web3 = require('web3');
const web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");
That’s it! now you can use the web3 object.

ようやくweb3.jsのコードが出てきました！

では、GCPのSSHコンソールで、これをtest1.jsとでも名付けてファイルにしてみます。Node.jsで使うつもりなので「const Web3 = require('web3');」も書き加えます。web3モジュールはさっき「npm install web3」でインストール済みですよね。

const Web3 = require('web3');
const web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");
console.log(web3) //web3ができたか確認する

これを、testホルダをを作りtest1.jsとして保存してみます。

mkdir test
vi test/test.js
-bash: vi: command not found

ぎゃー vi も入って無いのかいっ

ならいれるまでだっ

sudo apt update
sudo apt install vim

で、やりなおし

vi test/test.js #上のJSの3行をCtrl+vで貼りこむ
#「i」で入力「ESC+:wq+改行」で保存、失敗したら「ESC+:q!+改行」で脱出

ちなみにGCPのコピペはCtrl+v(Macならcommand+v)

実行してみる

node test/test.js

やった！Web3オブジェクトがずらずらと出力される！

下の方をみるとeth、shh、bzz、utilsといったオブジェクトもありますね。

これで、Getting Startedのページは終わりです。
次回はCallbacks Promises Eventsを見てみます。

つづく(^^)/、、、つもりだったのだけど、こんな話を聞いてしまったので、次回は今回構築したGCPVMをそのまま使って、先に、ethers.jsをやってみることにしました。すみません。