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

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

## 使うもの
- Vue.js
- git
- [ipfs](https://ipfs.io/)
- [fleek](https://fleek.co/)
- [ENS](https://ens.domains/)

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

```
$ npm install -g @vue/cli
```

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

```
$ vue create my-project
```

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

```
$ cd my-project
$ yarn serve
```

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

![Screenshot 2020-07-02 09.57.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/68e3eb79-399d-0ac1-fcc2-6850b109d0f3.png)

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

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

```javascript:vue.config.js
module.exports = {
  publicPath: './'
};
```

参考：[https://cli.vuejs.org/config/#publicpath](https://cli.vuejs.org/config/#publicpath)

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

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

https://fleek.co/

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

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

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

![Screenshot 2020-07-02 09.34.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/0bcf700c-4c25-806a-3339-025f4c2933de.png)

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

![Screenshot 2020-07-02 09.34.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/fbd4a950-8f4f-f44b-5517-91a8722cbe29.png)

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

![Screenshot 2020-07-02 09.35.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/7ae2b622-3153-71a8-3bed-1a1ed3c34bd1.png)

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

![Screenshot 2020-07-02 09.36.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/e25a0bce-c0a8-ca70-ff61-6e8e53f33c3e.png)

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

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

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

![Screenshot 2020-07-02 09.36.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/4bae49bc-0012-8ce2-6aac-3a7d4673bb2d.png)

ビルドが走り始めるので完了するまで待ちます。

![Screenshot 2020-07-02 09.40.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/26e74457-6939-4747-d884-f1db77c19fc1.png)

完了したあと、`IPFS Hash Pending`となっていたところが、`Verify on IPFS`に変わります。ここをクリックすることで、IPFS上にホスティングされていることを確認できます（数分待つこともあります）。

今回デプロイしたVue.jsのサンプル
https://ipfs.fleek.co/ipfs/QmU4zv5VyLPqKRUpotsrdxcmvFSvMJmfCLxbSj4gkZEWp4

なお、URL末尾の`QmU4zv5VyLPqKRUpotsrdxcmvFSvMJmfCLxbSj4gkZEWp4`がIPFS上のハッシュ値でユニークな値です。
このコンテンツはすでにIPFS上にあるため、他のIPFSのゲートウェイからでも参照できます。

例.
**Cloudflareが提供してるゲートウェイ：**
https://cloudflare-ipfs.com/ipfs/QmU4zv5VyLPqKRUpotsrdxcmvFSvMJmfCLxbSj4gkZEWp4/

**ipfs自体が提供しているゲートウェイ：**
https://gateway.ipfs.io/ipfs/QmU4zv5VyLPqKRUpotsrdxcmvFSvMJmfCLxbSj4gkZEWp4/

どこからでも同じコンテンツを参照できることがわかります。これもIPFSの特徴ですね。

これでデプロイは完了です。

## ドメイン設定
最後にENSへの紐付けをしていきたいと思います。
まずはドメインを購入する必要がありますので以下のサイトにアクセスしましょう。

https://app.ens.domains/

ここでほしいドメインを検索し購入することができます。

ほしいドメインを検索していきます。

![Screenshot 2020-07-02 11.35.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/56e17136-aefa-4869-78dc-be3f8d1c0d6d.png)

購入手続きを進めていきます。ENS購入には２度トランザクションを投げる必要があります。
まずは、購入の意思表示をし、他の人が同時に購入しようとしていないか待ちます。

![Screen Shot 2020-06-26 at 10.27.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/05cddefa-8c4a-6aad-8e62-f2536c57772e.png)

その後、実際にドメイン代を支払って購入していきます。

![Screen Shot 2020-06-26 at 10.28.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/ee27dd6c-9969-913a-a12c-0b47fe4b1287.png)

トランザクションが取り込まれれば完了です。

![Screen Shot 2020-06-26 at 10.29.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/073982fe-8f68-19ec-1ee1-f4d99adf4aa7.png)

ここからfleekに戻ります。`Setting` -> `Domain Management` -> `ENS`を選択します。

![Screenshot 2020-07-02 09.48.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/93528cde-ed3f-11b4-7e50-99b78b6311fc.png)

`Add Ens`を押下します。

![Screenshot 2020-07-02 09.48.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/47e34c14-575b-e784-5a20-42f662c6cdfd.png)

先ほど購入したドメイン名をセットし`Verify`します。（この時ドメインを購入したウォレットで接続しておきましょう）

![Screenshot 2020-07-02 11.42.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/a2fdd049-fafb-1e68-8f0c-e593c855aedc.png)

アドレスの確認されるので続けて`Yes, Add ENS`していきます。

![Screenshot 2020-07-02 11.43.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/c37f9180-fa39-62b6-c02f-9c800bfe1254.png)

その後、fleekをENSの`Controller`として設定します。
`Set Fleek as controller`を選択します。

![Screenshot 2020-07-02 11.45.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/416c7950-a901-9aef-28cd-51b7846094ed.png)

ポップアップに同意します。

![Screenshot 2020-07-02 11.46.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/58c60cc6-ac1d-0400-f67b-44467631a535.png)

トランザクションをなげ、成功すれば完了です。

![Screenshot 2020-07-02 11.49.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60143/f9f3fcb4-c3cd-e4c1-426d-f8121a8a75a0.png)

Metamaskなどを利用している場合は https://takase.eth にアクセスしていただくと、 https://gateway.ipfs.io/ipfs/QmU4zv5VyLPqKRUpotsrdxcmvFSvMJmfCLxbSj4gkZEWp4/ にリダイレクトされると思います。

Metamaskなどを利用していなくても`.eth.link`には普通にアクセスできますので、こちらもためしてみてください。

https://takase.eth.link/
（※ 個人のethドメインなので、どこかで消すかも）

以上です。