Nuxt.jsで@solana/web3.jsを使用する

はじめに

前回、下記のnoteで、簡単なSolanaのオンチェーンプログラムをdevnetにデプロイしました。今回のnoteでは、デプロイしたSolanaのオンチェーンプログラムを、Nuxt.jsを使ったフロントエンドから実行する流れを記載します。

環境構築

まずは、Nuxt.jsの環境構築です。前回同様にDockerを使って環境を構築します。ここでも、前回同様に、Dockerについての詳細な解説はしませんので、予めご了承ください。

それでは、デスクトップに好きな名前でフォルダを作り、以下のようにフォルダとファイルを作成します。

.
├── docker-compose.yml
├── docker-sync.yml
└── frontend
   ├── Dockerfile
   └── frontend
       ├── package.json
       └── pages
           └── index.vue​

次に、それぞれのファイルに以下のように記載します。

docker-compose.yml

version: '3'

volumes:
 solana-nuxt-app-sync:
   external: true

services:
 frontend:
   # Dockerfileの場所
   build: ./frontend
   # ホストOSとコンテナ内でソースコードを共有
   volumes:
     - ./frontend:/usr/src/app
   environment:
     - HOST=0.0.0.0
   # コンテナ内部の3000を外部から8080でアクセス
   ports:
     - "8080:3000"
   tty: true

docker-sync.yml

version: '2'

syncs:
 solana-nuxt-app-sync:
   src: '.'

frontend/Dockerfile

FROM node:14

RUN mkdir -p /usr/src/app
ENV HOME=/usr/src/app
WORKDIR $HOME
ADD . $HOME
WORKDIR $HOME/frontend
RUN npm install

frontend/frontend/package.json

"scripts": {
  "dev": "nuxt"
},

frontend/frontend/pages/index.vue

<template>
  <h1>Hello world!</h1>
</template>

ここまで作成すると、frontendディレクトリが2つありますが、1つ目のfrontendディレクトリに移動して、以下のコマンドを実行します。

$ cd frontend
$ ls

Dockerfile      frontend

$ docker run -it -v "$(pwd):/usr/src" node:14 bash

するとDocker内に入りますので、Docker内で下記のコマンドを実行します。

$ cd /usr/src/frontend/
$ npm i @vue/cli nuxt
$ exit

`exit`コマンドでDockerを抜けますので、次に下記のコマンドを実行します。

$ cd ../
$ docker volume create --name=solana-nuxt-app-sync
$ docker-sync start
$ docker-compose up -d --build

少し時間がかかりますが、これでDocker環境が構築できました。下記のコマンドでDocker内に入ります。

$ docker-compose exec frontend /bin/bash

そして、Docker内で以下のコマンドを実行すると、ブラウザからhttp://localhost:8080にアクセスすれば、pages/index.vueに作成したファイルがブラウザで表示されます。

$ npm run dev

少し長くなってしまいましたが、ここまででNuxt.jsのDocker環境が構築できました。

@solana/web3.jsを使ってSolanaのオンチェーンプログラムを実行する

次に、@solana/web3.jsを使えるように設定します。

`npm run dev` コマンドを実行した状態かと思いますので、一旦 `ctrl + c` キーを押してnuxt.jsのサーバーを停止し、以下のコマンドで@solana/web3.jsをインストールします。

$ npm i @solana/web3.js

そして、先程作成したfrontend/frontend/pages/index.vueファイルを下記のように修正します。

frontend/frontend/pages/index.vue

<template>
<div>
  <h1>プログラム実行</h1>
  <button @click="main">プログラム実行</button>
</div>
</template>

<script>
import {
TransactionInstruction,
PublicKey,
sendAndConfirmTransaction,
Transaction,
Connection,
Account
} from '@solana/web3.js';

export default {
 methods: {
   test(connection, account){
     const instruction = new TransactionInstruction({
       keys: [],
       // sampleプログラムのID
       programId: new PublicKey('CZUgyTgTymhzaswZV2qLAFfMw856KJCb8WL2bqQQ38RB'),
       data: '',
     });
     console.log("account:", account.publicKey.toBase58())
     sendAndConfirmTransaction(
         connection,
         new Transaction().add(instruction),
         [account],
         {
             skipPreflight: true,
             commitment: "singleGossip",
         },
     ).then(()=>{console.log("done")}).catch((e)=>{console.log("error",e)});
   },
   main() {
     // devnetのコネクション作成
     let connection = new Connection("https://devnet.solana.com", 'singleGossip');
     // プログラム実行するためのアカウント作成
     const account = new Account()
     const lamports = 10*1000000000
     connection.requestAirdrop(account.publicKey, lamports).then(()=>{
       console.log("airdrop done")
       this.test(connection, account)
     });
   },
 },
}
</script>

ここで `programId` で指定した `CZUgyTgTymhzaswZV2qLAFfMw856KJCb8WL2bqQQ38RB` は、前回のnoteで作成したプログラムのIDです。

ファイルを修正したら、再度下記のコマンドでnuxtを実行します。

$ npm run dev

ブラウザに表示されたボタンをクリックすると、devnetにデプロイしたSolanaのプログラムを実行できていることが分かります。

実行結果はこちら

Explorer | Solana

上記のリンク先から、ご自身のプログラムのIDを検索すると、実行されたトランザクションを確認することができます。

まとめ

簡単でしたが、Nuxt.jsを使って、前回下記の記事でデプロイしたSolanaのオンチェーンプログラムを実行することができました。次回以降、Solanaのhelloworldサンプルプログラムを触って解説したり、Solanaでの開発に関するnoteを記載したいと思います。