thirdwebで作成したアプリをVercelを使ってweb上に公開しよう！
こんにちは、CryptoGamesの高橋です。
本日は、thirdwebで作ったコントラクトをNext.jsでアプリケーションで作り、Vercelにデプロイしたいと思います。
これで、今までローカル環境にしかなかったものが誰でもみられる状態になります。
なお、こちらの記事を参照しています。
その他、今回thirdwebを使ったコントラクトの作り方は扱いませんが、作り方を10分程度のYouTubeに載せましたので、ご不明でしたら、こちらをご参照ください。
1.ローカル環境でアプリを作成する
まずは、こちらのコマンドで、プロジェクトのテンプレートを作っていきます。
「--next」とあるように、Next.jsで作っていきます。
npx thirdweb create --app --next --ts
では、一旦そのまま、下のようにして、立ち上げてみましょう。
cd thirdweb-app
yarn dev
localhost:3000を確認すると、下のように、テンプレートが立ち上がりました。
このままでもよいのですが、せっかくなので、NFTのミントサイトにしてみましょう。
あらかじめthirdwebでコントラクトを作成し、「Embed」のコードをコピーします。
そして、「index.tsx」に元々あったコードの一部を消し、下のように貼り付けます。
すると、「style」（あと、frameborder）にエラーが出ますので、その部分を消します。
なお、styleを設定する場合はこちらでできます。
更新を行うと、このようになりました。
なお、左にずれていますが、CSSの話なので、今回は特に修正せず、このまま進んできます。
2.Vercelにアプリをデプロイする
では、このミントサイトをVercelにデプロイしていきましょう。
まずは下のコマンドで、Vercelをインストールします。
npm i -g vercel
インストールができたので、下のようにして、デプロイします。
なんと、これだけです。
vercel
ちなみに、今回は簡単なやり方でしたが、どこかでGithubを挟んで実行する方法も紹介したいと思います。
「Inspect」に進んでみると、このように、デプロイのページになりました。
ドメインに進んでみると、このように、Web上に公開することができました！
今回は以上です。
最後までありがとうございました。
Discussion