HP/LP/アプリ/3D/ゲーム等を、ICP分散クラウドへ公開する。

なぜICPなのか

Vercel / AWS / Wix等のSaaSでも、Webサイト、API、外部接続、AI連携はできる。だから、ICPの価値は単なる機能追加ではありません。

ICPの本質は、Webサイトやアプリを、特定の管理主体のあるサーバではなく、暗号的仕組みで維持される分散クラウドに置くことで、自分のidentityで管理するCanister（キャニスター）上の実体にできる点にあります。

つまりどういうこと？

ローカルPC上のファイルは、完全に自分の管理下にありますが、ローカルに閉じています。 通常のクラウドは世界へ公開できますが、大企業のアカウントやサービスに依存します。

ICPは、Web資産を自分の所有（秘密鍵での署名）に置きながら、ネットワーク上で公開・実行・接続できます。つまり、Web資産の持ち方そのものを根底から変えます。

補足：圧倒的に安い

安いだけなら他にも無料のホスティングなどの選択肢はあります。しかし、ここで最も重要なのは、完全に自分の鍵で所有できる公開基盤でありながら、この極めて低コストな維持費で運用できるという点です。

※参考：ICP Japan「Web2脱却ホスティング比較」の年間比較値をもとに作成

今日のゴール

• 第1段階 (公開フロー): ローカル開発 → build → Asset Canister同期 → ICP公開URLの確認までを把握する。
• 第2段階 (拡張機能): Backend Canister、HTTPS outcalls、Chain Fusion、vetKeys、SEV Subnet、AI / CLI操作へ進む道筋を見通す。

対象となるもの

ICPに公開できる対象は、ブラウザで動く公開資産全般です。

• 個人HP、ポートフォリオサイト、企業コーポレートサイト
• プロモーションLP、イベント特設ページ、採用・リクルートサイト
• GitHub Pagesライクなドキュメントサイト、Wiki
• React/Vue等によるWebアプリケーション、PWA
• three.js / WebGL を活用した3D展示空間やメタバースのフロント
• WebGLによるブラウザWebゲーム

まずは静的公開から始める

いきなりブロックチェーンのコード（スマートコントラクト）を書く必要はありません。 まずは通常のWeb制作通り、`npm run build` で生成される静的アセット（`dist/` などのビルド成果物）をICPにdeployします。

第1段階では、ICPを「VercelやNetlifyの代わりとなる、安全な分散ホスティング」として利用します。

全体アーキテクチャ

• Local: VS Codeなどを用いてローカルでコードを記述・編集。
• Build: `npm run build` などで `dist/` ディレクトリを生成。
• Asset Canister: 生成された `dist/` の内容を、ICP上の「Asset Canister」へ同期（同期コマンド実行）。
• Public URL: `icp0.io` や `ic0.app` などの生URL、またはDNS経由での独自ドメインで世界中からアクセス。

実例：Sho T HP

Sho Tの公式サイトは、Astroで構築されたモダンな静的サイトです。 リポジトリ名は `Showying/sho-web` で、ビルド成果物である `dist/` を直接ICPのAsset Canisterへ同期しています。

あなたが今閲覧しているこのLP（`/lp/icp-sovereign/`）も含め、すべてが分散ネットワーク上で動くリアルな動作デモになっています。

必要な構成要素

ICP上で公開するために必要なものは、通常のWeb制作環境にほんの少し追加するだけです。

• フロントエンド環境: Node.js / npm、Astro、React、Vue、Viteなどお好みのフレームワーク。
• ICPツール群: `icp-cli`（またはdfx）、`ic-wasm` などのCLI。
• 設定ファイル: アセット同期先を記述する `icp.yaml`（または `dfx.json`）。
• 暗号資産と鍵: Deploy署名用のメインネット Identity（秘密鍵ファイル）、およびデプロイ手数料となる Cycles（サイクル）。

icp.yamlの考え方

`icp.yaml` は、ICP deployにおける中核的な設定ファイルです。 `npm run build` を実行して `dist/` を生成し、その `dist/` 内の静的ファイルをAsset Canisterへ同期するという一連の流れを定義します。 元の `public/` ディレクトリを直接同期するのではなく、Astroなどのビルド完了後の成果物（`dist/` 等）をアップロード先に指定します。

Deploy手順

ICP上で初めて表示確認するのではなく、ローカルで十分に完成を確認した上でデプロイを行います。

対象によって何が変わるか

HP、LP、Webアプリ、3Dサイト、Webゲーム。ICPへアップロードする基本手順（Asset Canisterの利用）はどれも同じです。 しかし、コンテンツの性質に応じて注意すべきポイントが変わります。

• HP・LP: 独自ドメイン設定、canonical、OGP画像の設定などのSEOが肝。
• Webアプリ・PWA: APIとの連携、クライアント側での状態管理やルーティング。
• 3Dサイト (three.js): 3Dモデルなどの容量削減、読み込みの高速化・最適化。
• Webゲーム: アセット配信、マルチプレイ時のサーバーレス通信、セーブデータの保存。

セキュリティと運用ルール

ICPでは、自分の鍵によってWeb資産を所有・管理します。そのため、以下の秘密情報は絶対に公開・流出・記録してはいけません。

• 絶対に漏らしてはならない情報: seed phrase (復元シード)、recovery phrase (リカバリーフレーズ)、PEM秘密鍵ファイル、identity秘密鍵、`.env` 内のAPIキーなどの秘匿データ、ウォレット秘密鍵。
• 公開・記録して良い情報: identityの登録名（ローカル名）、Principal ID、Account ID、Canister ID、公開URL、実行したCLIコマンドなど。

独自ドメイン化

最初から独自ドメインを設定すると混乱するため、まずは `*.icp0.io` などの生のCanister URLでデプロイと確認を行います。

その後、`.well-known/ic-domains` ファイルの設置、DNSレコードの設定、Asset Canister設定（`.ic-assets.json5`）、および canonical、OGP、sitemapの変更といった一般公開へのプロセスを進めます。

トラブルシューティング

もしデプロイ時やアクセス時に不具合が生じた場合は、以下の基本項目に立ち戻って確認してください。

• Buildエラー: ローカルビルド（`npm run build`）は本当に正常に通っているか。
• 同期ディレクトリ: `public` とビルド出力である `dist` などを混同していないか。`icp.yaml` の同期元指定が適切か。
• 権限・手数料不足: identity秘密鍵の指定は合っているか、Canisterにデプロイ手数料となる Cycles が足りているか。
• アセットパス崩れ: 画像や3Dモデルなどのパス崩れは、デプロイ前に `npm run preview` で表示されるか確認する。

次の展開

第1段階では、単なるVercelやWixの代わりとなる静的ホスティングとしてICPを使いました。

ここから第2段階として、Backend Canisterの導入、外部APIを呼び出すHTTPS Outcalls、他チェーンと相互に書き込むChain Fusion、オンチェーンでの暗号化を可能にするvetKeys、機密情報を守るSEV Subnet、AIエージェントやCLI / ICP Skillsとの連携など、自律して動作する強固な分散アプリ基盤へと機能拡張を進めることができます。

その先の世界観

その先には、ローカルAIや Confidential Computing (秘密計算)、SEV Subnet、ソブリン（主権）の確立、AIエージェントによる取引（エージェントコマース）、価値のインターネット、複数チェーンの統合、マシンエコノミー、宇宙・分散型インフラへの接続へとつながります。

ローカルAIと分散クラウドは対立するものではなく、「個人の主権」と「信頼性のある相互接続」を同時に両立させる未来のインフラとなります。

まとめ

まずはHP / LP / アプリ / 3D / ゲームをICPに公開しましょう。第1段階では手軽なVercel代替として使い、その後Backendや暗号化、AIエージェントへと拡張していきます。 AIやCLI、ICP Skillsの進化によって、開発者のみならずあらゆる個人が自律的なWebを持てるようになります。

「ローカルのように自分で持ち、クラウドのように世界へ開き、Canisterとして主体的に動く。」