Vue.jsのプロジェクトをIPFS上にホスティングし、ENS（Ethereum Name Service）でアクセス可能にする #Vue.js

Vuee.jsで作成されたプロジェクトをIPFS上にデプロイし、EthereumのName ServiceであるENSに紐付けしてアクセスできるようにしていきたいと思います。

使うもの

Vue.js
git
ipfs
fleek
ENS

Vueのプロジェクト作成

まずはVueのプロジェクトを作成していきましょう。
ここではvue-cliを使って簡単にプロジェクトを作成していきます。

$ npm install -g @vue/cli

次に、プロジェクトを作成します。

$ vue create my-project

作成されたらプロジェクトのディレクトリに移動して、走らせます。

$ cd my-project
$ yarn serve

ブラウザでhttp://localhost:8080/にアクセスして以下のようになっていればOKです。

このままビルドしてデプロイすると画面が真っ白になるので、設定を変更していきましょう。
プロジェクトのルートにvue.config.jsを作成します。

そしてパスの設定を相対パスに変更します。

vue.config.js

module.exports = {
  publicPath: './'
};

参考：https://cli.vuejs.org/config/#publicpath

Githubにプッシュする

後で説明するfleekではGithubを使ってIPFSへのデプロイを実行していきます。
そこで、github上にリポジトリを作成し、作成したプロジェクトをプッシュしておきましょう。

IPFSにデプロイ

それでは次にIPFSにデプロイをしていきたいと思います。
今回はfleekというIPFSにgithub経由でデプロイできるサービスを使っていきましょう。

ちなみにそれ以外にも pinata や temporal といったサービスもあるので興味がある方は参照してみてください。

まずはfleekでアカウントを作成してください。無料で利用開始できます。
Hostingを選択します。

Add new siteを選択し、サイトを追加していきます。

Connect with Githubでgithubに接続していきます。

今回はipfs-demoというプロジェクトを作成しているので、そのリポジトリを選択します。
必要なチームやリポジトリが見つからない場合は、Configure the Fleek app on Githubから読み取るリポジトリを追加していきます。

その後、デプロイ時の設定を行います。

今回はVue.jsのプロジェクトなのですが、FrameworkにVue.jsがないのでOtherを選択します。
また、Vueはyarnでpackageをインストールした後、yarn buildでビルドするようになっているため
Build commandはyarn && yarn buildとします。

publish directoryはデフォルトではdistだと思いますのでdistとします（自分で変更している場合はそれにあわせます）

設定が完了したらDeploy siteを押下していきます。