IPFSでthirdwebで作成したWebアプリケーションをホストしよう！

※当記事は、こちらの記事を翻訳したものです。
https://blog.thirdweb.com/guides/how-to-host-your-web-app-on-ipfs/

このガイドでは、WebアプリケーションをIPFSにデプロイする方法を紹介します!

React App、Vite、Next.js などの最も人気のあるフレームワークのすべてをカバーします。

最終的には、このデモのように、 IPFS ゲートウェイを使用して、アプリケーションをホストし、アクセスできるようになります。

始める前に、このガイドで使用するツールの詳細について学ぶことができる便利なリソースを以下に紹介します。

• Storage
• CLI

では、さっそく始めてみましょう。

新規プロジェクトの作成

あなたがゼロから始める場合、すべてのスターターテンプレートは、IPFSのデプロイ用にあらかじめ設定されており、セットアップされた状態で提供されています。

npx thirdweb create --app # Create a new application

npm run deploy # Deploy your app to IPFS

以下では、IPFSへのデプロイのために、ゼロからアプリケーションをセットアップする方法を紹介します。

翻訳者　注
npx thirdweb create --app を実行すると、下のように、フレームワークが選択できます。
このガイドは、どのフレームワークを選択したかで分岐させています。

Reactアプリの作成

翻訳者　注
翻訳時（2023/1/21）時点では以下２つはデフォルトで設定されていたため、設定は不要でした。

package.json ファイルに homepage フィールドを追加し、"." を設定します。

{
  ...
  "homepage": ".",
  ...
}

そして、package.json ファイルに以下のような新しいデプロイのスクリプトを作成します。

{
  ...
  "scripts": {
    ...
    "deploy": "yarn build && npx thirdweb@latest upload build"
  }
}

このスクリプトを実行すると、アプリケーションをビルドし、出力ディレクトリの build を IPFS にアップロードし、アプリケーションのデプロイを効率的に行うことができます。

さて、このスクリプトをターミナルで実行してみましょう。

npm run deploy # npm

yarn deploy # yarn

このコマンドを実行すると、ターミナルにこのように表示されます。

このゲートウェイのリンクを他の人に送れば、あなたのウェブサイトを見ることができます 🥳

Vite

vite.config.js ファイルで、defaultConfig の base を ./ に設定します。

const defaultConfig = {
  base: "./",
  plugins: [react()],
};

翻訳者　注
翻訳時（2023/1/21）時点では、下のように「defineConfig」の中に「base」部分のみを追加しました。
ただ、翻訳者自身がViteに精通していないため、変更が必要な場合には、修正いたします。

そして、package.json ファイル内に、以下のような新しいdeployスクリプトを追加します。

翻訳者　注
翻訳時（2023/1/21）時点では以下２つはデフォルトで設定されていたため、設定は不要でした。

{
  ...
  "scripts": {
    ...
    "deploy": "yarn build && npx thirdweb@latest upload dist"
  }
}

このスクリプトを実行すると、アプリケーションがビルドされ、出力ディレクトリのdistがIPFSにアップロードされ、アプリケーションのデプロイが効果的に行われます。

下のようにして、このスクリプトをターミナルで実行することができます。

npm run deploy # npm

yarn deploy # yarn

このコマンドを実行すると、ターミナルにこのように表示されます。
このゲートウェイのリンクを誰かに送れば、あなたのウェブサイトを見ることができます🥳

Next.js

package.jsonファイルの中に、以下のロジックを持つ新しいdeployスクリプトを作成します。

翻訳者　注
翻訳時（2023/1/21）時点では別のdeployスクリプトが設定されていました。
以下のスクリプトに変更したところ、うまくいかなくなったため、元から設定されているdeployスクリプトで実行を行いました。

{
  ...
  "scripts": {
    ...
    "deploy": "yarn build && npx thirdweb@latest upload build"
  }
}

このスクリプトはNext.jsプロジェクトをビルドしてエクスポートし、ビルドディレクトリのHTML出力をIPFSにアップロードし、そこでアプリケーションとやりとりできるようにします。

さて、このスクリプトをターミナルで実行します。

npm run deploy # npm

yarn deploy # yarn

このコマンドを実行した後、アプリがビルドされるのを待つと、ターミナルにこのように表示されます。

このゲートウェイのリンクを誰かに送れば、あなたのウェブサイトを見ることができます 🥳

まとめ

このガイドでは、reactアプリなどをIPFSにデプロイする方法を学びました!

あなたが作ったIPFSにホストされた素晴らしいDappsをぜひthirdweb discordで共有してください!