ICP Rust CDK学習メモ
  • ICP Rust CDK学習メモ
  • ⚙️開発環境準備
  • 開発
    • テンプレート生成 (dfx new)
    • Frontend開発
      • 1. シンプルなHTML
      • 2. Canister呼び出し
    • Backend開発
      • 1. Hello
      • 2. データ更新/参照
      • 3. ic_cdk::caller()
      • 4. ic_cdk::call()
      • 5. 動的画像生成
      • 6. staticファイル参照
      • 7. HTTPS outcalls
      • 8. Threshold ECDSA
    • Bootcamp
      • Calculator ➕✖️➖➗
      • Homework diary 📔
      • Student wall 🎨
      • MotoCoin 🪙
      • The Verifier 👨‍🏫
      • The Dapp 🚀
  • サンプル
    • 📔Diary
  • 技術情報
    • 🪪Principal
    • 🪪Internet Identity
    • 🪙Token
    • 🖼️NFT
    • 🗝️VetKey
  • ツール
    • dfx
      • dfx identity
    • quill
  • 参考情報
    • 🔗リンク集
GitBook提供
このページ内
  • ファイル構成
  • ローカル実行環境の準備
  • 実行画面
  • ポート番号固定
  • ローカル実行環境の停止方法

役に立ちましたか?

GitHubで編集
  1. 開発
  2. Frontend開発

1. シンプルなHTML

前へFrontend開発次へ2. Canister呼び出し

最終更新 2 年前

役に立ちましたか?

Internet ComputerのDappとして、WebのFrontendを動かすには、を使用します。

には、React Frameworkを使ったサンプルがありますが、まずはFrameworkを使わず、Backendとも通信を行わない単純なHello, Worldを表示するWebページの最小構成について押さえておきたいと思います。

仕組みと最小構成が分かれば、そこからボトムアップで積み上げていくことができますから、後でNext.jsやFlutterなど自分のお気に入りのFrameworkを使って、Backendとも通信を行うFrontendをCanisterへ配備することもできるようになるでしょう。

ここで解説するFrontendでは、以下の設定を想定しています。

項目
値

Canister Name

icptest

ファイル構成

Canisterとは通信を行わず、ルートドキュメントのHTMLを返すだけのシンプルな構成の場合、以下の2ファイルを用意するだけです。

  • dfx.json

  • dist/index.html

{
  "canisters": {
    "icptest": {
      "frontend": {
        "entrypoint": "dist/index.html"
      },
      "source": [
        "dist/"
        ],
      "type": "assets"
    }
  },
  "defaults": {
    "build": {
      "args": "",
      "packtool": ""
    }
  },
  "output_env_file": ".env",
  "version": 1
}
<!DOCTYPE html>
<html>
  <body>
    <h1>Helo, world</h1>
  </body>
</html>

ローカル実行環境の準備

dfx startでローカルPC環境で動作するCanisterを起動します。

$ dfx start --background --clean

dfx deployコマンドを実行することでCanisterへ配置できます。dfx deployコマンドは、Canisterが無ければつくってくれますので、別途dfx canister createコマンド等を実行する必要は不要です。

$ dfx deploy
︙
Uploading assets to asset canister...
Starting batch.
Staging contents of new and changed assets:
  /index.html 1/1 (75 bytes) sha 7a5fe09fb12f60b99511ddab85e329ba8774c71aba3df1a4616ea7438d49f442 
Committing batch.
Deployed canisters.
URLs:
  Frontend canister via browser
    icptest: http://127.0.0.1:8000/?canisterId=rrkah-fqaaa-aaaaa-aaaaq-cai

実行画面

ポート番号固定

配備したFrontendのポート番号は、以下のような定義ファイルを用意しておくことで固定にできます。

$HOME/.config/dfx/networks.json

{
  "local": {
    "bind": "127.0.0.1:8000",
    "type": "ephemeral",
    "replica": {
      "subnet_type": "system"
    }
  }
}

ローカル実行環境の停止方法

dfx startで --backgroundを指定したサービスは、以下のコマンドで停止できます。

$ dfx stop

Asset Canister
公式マニュアル
dfx.json
dist/index.html