Chapter 06無料公開

Hello NEAR 1 - 開発環境構築 -

masa
masa
2022.08.20に更新

Hello NEAR

Hello NEARは挨拶メッセージを表示、保存する分散型アプリのサンプルです。

https://docs.near.org/tutorials/examples/hello-near

このアプリのコードを理解することで

  • スマートコントラクトの実装方法
  • javascriptでのスマートコントラクトの使い方

の技術を習得することができます。

開発環境構築

開発はdockerを使います。

dockerFile

開発環境構築用のdockerFileを作成します。

dockerFile
FROM node:18-buster

# Default to UTF-8 file.encoding
ENV LANG C.UTF-8

# timezoneの選択で止まるのを防ぐ
ENV DEBIAN_FRONTEND=noninteractive

RUN apt update && apt upgrade -y && apt install -y nodejs && apt install -y npm
# コンテナ内に作業ディレクトリを作成
RUN mkdir -p /app/src/
# コンテナログイン時のディレクトリ指定
WORKDIR /app/src/

EXPOSE 1234

このアプリはデフォルトでportの1234を利用するように設定されているので、portの1234をEXPOSEで指定しておきます。

Docker Compose

Docker Composeを使うと他のサービスとの連携が楽になるので、docker-compose.ymlを用意します。

docker-compose.yml
version: '3.7'
services:
  near-dapp-dev:
    build:
      context: .
    image: near-dapp-dev
    container_name: near-dapp-dev
    tty: true
    volumes:
      - ./src/:/app/src
    ports:
      - "3000:1234"

dockerのポートフォワーディングを設定します。

dockerのポートフォワーディングは

ホストマシンのポートをコンテナポートに紐付けて、コンテナの外から来た通信をコンテナポートに紐づけることができる機能

です。

上記では

  • ホストのポートを3000
  • コンテナのポートを1234

にしています。

上記のdocker-compose.ymlの用意ができたらbuildします。

bash
docker-compose build

コンテナに入る

dockerで開発環境を構築したら、コンテナ内に入ります。

bash
docker exec -it near-dapp-dev /bin/sh

WORKDIRで設定した/app/src/に移動します。

アプリの作成

コンテナの中に入ったらアプリを作成します。

bash
npx create-near-app hello-near

チュートリアル通りのコマンドを叩きます。

bash
cd hello-near
yarn && yarn start

このコマンドを実行すると、

rustがinstallされていない場合は、rustupを使ったinstallから実行されます。

成功すると

bash
The app is starting! It will automatically open in your browser when ready
Server running at http://localhost:1234

とコンソールに出力されます。

explorerを見るとスマートコントラクトが作成されているのが確認できるはずです。

https://explorer.testnet.near.org/transactions/9JjaoEkHLBCfUqmrMpWV9Gs9VCU18nUvy13oDheYSLDS

おめでとうございます。
お疲れ様でした!

...と言いたいところですが、これでは何も理解できてませんね(笑)。

その上、dockerを使っているので、ブラウザから画面を確認できません。

コンテナ内でサーバーを立ち上げる場合は、hostを0.0.0.0に変更する必要もあります。

ということで、次はbuildコマンドや出来上がったコードを読みながら、NEARの実装方法を少しづつ理解していきましょう。