1. シンプルなHTML
最終更新
役に立ちましたか?
最終更新
役に立ちましたか?
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
dfx start
でローカルPC環境で動作するCanisterを起動します。
dfx deploy
コマンドを実行することでCanisterへ配置できます。dfx deploy
コマンドは、Canisterが無ければつくってくれますので、別途dfx canister create
コマンド等を実行する必要は不要です。
配備したFrontendのポート番号は、以下のような定義ファイルを用意しておくことで固定にできます。
$HOME/.config/dfx/networks.json
dfx start
で --background
を指定したサービスは、以下のコマンドで停止できます。