search
github編集

1. シンプルなHTML

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

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

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

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

項目
値

Canister Name

icptest

hashtag
ファイル構成

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

  • dfx.json

  • dist/index.html

dfx.jsonarrow-up-right

{
  "canisters": {
    "icptest": {
      "frontend": {
        "entrypoint": "dist/index.html"
      },
      "source": [
        "dist/"
        ],
      "type": "assets"
    }
  },
  "defaults": {
    "build": {
      "args": "",
      "packtool": ""
    }
  },
  "output_env_file": ".env",
  "version": 1
}

dist/index.htmlarrow-up-right

hashtag
ローカル実行環境の準備

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

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

hashtag
実行画面

hashtag
ポート番号固定

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

$HOME/.config/dfx/networks.json

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

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

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

最終更新