lesson-2_アプリをデプロイしよう
完成したアプリをデプロイしよう!
ここからは完成したアプリをデプロイしていきましょう!
デプロイするというのはアプリが自律的に稼働することができるということです。そのため、コントラクトをテストネットにデプロイする必要があるのですが、ASTARが用意しているテストネットShibuya
は本アプリが機能するにはスペックが足りていません。
しかし結果を公開するという意味でデプロイしていきましょう!
まずは先ほど行なったのと同じようにコントラクトをShibuya Network
にデプロイしましょう! ただし、今回deployするのはテストネットですのでいくつかするべきことがあります。
最初にこちらにアクセスしてShibuya Network
へ接続しましょう!
接続ができたら右上の'connect'ボタンを押してpolkadot.jsのウォレットを接続しましょう!
その後下のようにShibuya Networkで使用できるトークンSBYが0であることが確認できると思います。
その記載の右側にあるfaucet
ボタンを押してSBYを取得しましょう!
ロボットかどうかのチェックを終えてverify
ボタンを押しましょう! その後画面をリロードすればつなげているウォレットのSBYが10に増えているはずです。
これでdepoloyに使うためのトークンが取得できました! では次にこちらへ移動してShibuya Networkへコントラクトをデプロイしましょう!
デプロイの手順はローカルでやったものと同じですが、下の画像のようにdeployment account
を先ほどトークンを取得したアカウントに切り替えましょう。そうでないとデプロイする時のガス代を支払うことができず失敗してしまいます。
すると下のように新しいコントラクトがデプロイされているはずです! しかし先述したようにShibuya Networkはローカルに比べてとても遅いのでデプロイにもかなり時間がかかります。筆者がデプロイした時も1分以上かかりました 😅 なのでデプロイをしてからしばらく待ってみましょう。
また、hooks/connect.tsx
の中に格納してあるblockchainUrl
をBlast: wss://shibuya.public.blastapi.io
に置き換えましょう。
これによってコントラクトとのやりとりをローカルで立てることなく自律的に行わせる環境は整えることができました。
最後に、Vercel にWebアプリケーションをホストする方法を学びます。
Vercelはサーバーレス機能のホスティングを提供するクラウドプラットフォームです。
スケーリングやサーバーの監視はVercelが行うため、開発者はVercelへデプロイするだけでアプリケーションを公開・運用できます。
Vercelに関する詳しい説明は、こちらをご覧ください。
まず、GitHubのAstar-SocialFi
にローカルファイルをアップロードしていきます。
ターミナル上でAstar-SocialFi
に移動して、下記を実行しましょう。
git add .
git commit -m "upload to github"
git push
次に、GitHub上のAstar-SocialFi
にローカル環境に存在するAstar-SocialFi
のファイルとディレクトリが反映されていることを確認してください。
Vercelのアカウントを取得したら、下記を実行しましょう。
1. Dashboard
へ進んで、New Project
を選択してください。
2. Import Git Repository
で自分のGitHubアカウントを接続したら、Astar-SocialFi
を選択し、Import
してください。
3. プロジェクトを作成します。
Environment Variable
に下記を追加します。
contract_addressには先ほどShibuya Testnet
へデプロイした時に取得したアドレスを、imgUrlForUnknownには初めてのアカウント用の画像URL入れましょう。
-
NAME
=NEXT_PUBLIC_CONTRACT_ADDRESS
-
VALUE
=contract_address
-
NAME
=NEXT_PUBLIC_UNKNOWN_IMAGE_URL
-
VALUE
=imgUrlForUnknown
また、Root Directory
が「packages/client」となっていることを確認してください。
4. Deploy
ボタンを推しましょう。
VercelはGitHubと連動しているので、GitHubが更新されるたびに自動でデプロイを行ってくれます。
下記のように、Building
ログが出力されます。
基本的にwarning
は無視して問題ありません。
これでデプロイは成功しました!
アプリとしては機能してないかもしれませんが、アプリを完成させたということを示す証となります!
先述しましたが、Shibuya Networkではアプリが機能せず完成が実質確認できないので下のようにローカルで作成した
- Connect Wallet画面
- Home画面
- Profile画面
- Message画面
- Message Room画面
の5つをdiscordの🔥|completed-projects
チャンネルで共有しましょう!
🎫 NFT を取得しよう!
NFTを取得する条件は、以下のようになります。
-
MVPの機能がすべて実装されている(実装OK)
-
WebアプリケーションでMVPの機能が問題なく実行される(テストOK)
-
このページの最後にリンクされているProject Completion Formに記入する
-
Discordの
🔥|completed-projects
チャンネルに、あなたのWebサイトをシェアしてください 😉🎉 Discordに投稿する際に、追加実装した機能とその概要も教えていただけると幸いです!
プロジェクトを完成させていただいた方には、NFTをお送りします。
🎉 おつかれさまでした!
あなたのオリジナルのdAppが完成しました。
あなたは、コントラクトをデプロイし、コントラクトと通信するWebプリケーションを立ち上げました。
これらは、分散型Webアプリケーションがより一般的になる社会の中で、世界を変える2つの重要なスキルです。
UIのデザインや機能をアップグレードしたら、ぜひコミュニティにシェアしてください! 😊
Project Completion Formはこちらです。