gypsyR

【ICP #2】開発環境構築_備忘録

2023-2-14

ICP 開発 Tips

Ubuntu20.04 LTS で Unchain の beginner 課題を進めた。
環境構築時点で色々見落とし躓いたのでまとめる。また IC の Dapps 開発の基本となりそうな内容を備忘録として残す。 完成したポートフォリオサイト（仮）はこちら ←

1.事前インストール等

  • 各種ツールインストール(ネイティブ環境なら vscode 等) sudo dpkg -i <name>.deb
    sudo apt install npm
    sudo npm --version
  • ホームディレクトリ下のディレクトリ名を英語表記に
    LANG=C xdg-user-dirs-gtk-update

引っかかった nvm や node.js バージョン周り。node.js はv16推奨(バージョン違いで躓いた)。

2.nvm インストール

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
上記実行後、表示されたコマンドコピペしておく →terminal 閉じる → 指示されたコマンド export など PATH 設定のコマンド実行した後以下へ進む nvm install 16
nvm ls-remote
nvm use 16
node --version

3.テスト開発用 cycle 取得

dfx のバージョンは、0.12.0 以上（2023/2/12 時点） sudo dfx --version
sudo dfx upgrade
sudo dfx wallet --network ic redeem-faucet-coupon <coupon number>
ウォレット内のサイクル確認 dfx wallet --network=ic balance

4.プロジェクト作成

npm create vite@latest
cd ic-static-gypsy-website/
tree -L 1 -F -a ic-static-gypsy-website

5. Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

  • 設定ファイル作成
    npx tailwindcss init -p
  • tailwind.config.cjs にパス情報追加
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
  • ./src/app.css ファイルを以下のように上書き
@tailwind base;
@tailwind components;
@tailwind utilities;
  • ./src/App.svelte ファイルの 15 行目を、以下のように。
    <h1 class='text-red-600'>Vite + Svelte</h1>

6.ウェブページ作成

不要なファイル削除 rm ./src/lib/Counter.svelte

  • 以下略（UNCHAIN 参照）

7.キャニスター設定

以下のコマンドを実行し、dfx.json ファイルを作成。ic-static-website/下(package.json と同じ階層)に作成 touch dfx.json

{
  "canisters": {
    "website": {
      "type": "assets",
      "source": ["dist"]
    }
  }
}

7-1. "website":

  • キャニスターにつける名前
  • キャニスターが作成される際、~~~のような一意な ID が割り振られるが扱いやすくするため舐めを付ける
  • DFX を通じ開発者がキャニスターとやり取りするために活用

7-2. "type":

  • キャニスターのタイプ
  • IC が解釈するためのもの
  • 静的 web サイトを構築する画像やファイルをホストする場合、assets指定
  • バックエンドのコード記述したキャニスターにはrustやmotokoを指定

7-3. "source":

  • アップロードしたいフォルダを指定
  • 例えば index.html やアセットを格納したフォルダを指定

8. サイクルを格納するウォレットキャニスターの作成

IC 上にデプロイする website キャニスターのためのサイクルを準備。
トークンはウォレットが管理するように、サイクルはサイクルウォレットが別である。アプリを稼働させるにはサイクルウォレットから補給しなければならない。実態は IC 上で管理されるキャニスター。

8-1. ウォレットキャニスター作成(※3 やってたら不要)

dfx canister --network=ic call fg7gi-vyaaa-aaaal-qadca-cai redeem '("YOUR_COUPON_CODE")'
するとキャニスター ID が返される。
キャニスターのステータス確認する dfx canister --network=ic status CANISTER_ID

作成したウォレットキャニスターを使用するために ID 指定。

dfx identity --network=ic set-wallet CANISTER_ID

残高チェック

dfx wallet --network=ic balance

9. IC 上にデプロイ

ic-static-website/下で実行
dfx deploy --network ic --with-cycles 1000000000000

9-1 エラー

IC へのデプロイ時、エラーが発生
Error: Failed while trying to deploy canisters. Caused by: Failed while trying to deploy canisters. Failed to build call canisters. Failed while trying to build all canisters. The post-build step failed for canister 'cpu5o-liaaa-aaaao-ahqcq-cai' (website) with an embedded error: Failed to build frontend for network 'ic'.: The command '"npm" "run" "build"' failed with exit status 'exit status: 1'. Stdout:

9-2. 解決策 node.js を最新版へ

使用してる node.js のバージョンチェック
node -v
した結果v16.19.0で問題な~~さそうだが...~~い
~~もしかしたら dfx のアプデで更に新しいバージョンにしか対応してないかもしれない~~

~~9-3. アップグレード~~(これ不要だった)

npm install -g n n latest

9-4. 再インストール and so on

npm install

vite command がないと言われたのでそれもインストール（入れた気もしたが、というかじゃないとパッケージ作れないはずでは？）

npm install -g vite

インストールされた。のでビルドしよう。
vite build

うまくいった～～～

10. Identity Anchor の作成

デプロイしたポートフォリオサイトにアクセス。
URL はキャニスター ID を用いたもの。
キャニスター ID はデプロイ時に生成された canister_ids.json や以下コマンドで確認可能。
dfx canister --network ic id website
私のポートフォリオはこちらから ←
（サイクルなくなるまでは稼働してるはず？）

  • Web2 の世界では、個人情報（生年月日やメールアドレス、パスワードなど）を登録することでユーザーを認証
  • これは、企業側や他のユーザーに個人情報を提示するという欠点
  • 他のブロックチェーン上では、ウォレットを紐づけることでユーザーを認証していた
  • ブロックチェーンとのやりとりにユーザーがコストを支払うという点でウォレットの作成は必須
  • Internet Identity は、デバイスを使って IC 上の dApps に仮名で認証・サインインできるようにするもの
  • つまり、デバイスとユーザーを紐付けることで識別されると考えることができる
← ホームへ戻る