v0で作成したフロントエンドのコードをAWS Amplifyにデプロイする

この記事は、v0で生成したフロントエンドを「AWS Amplify」にデプロイする手順をまとめた、個人的な料理メモです。

v0とは？

v0は、Vercel社が開発した、AIを活用したUI生成ツールです。自然言語で指示を出すだけで、WebサイトやアプリケーションのUIデザインやフロントエンドのコードを自動生成できます。プログラミングスキルがなくても、簡単にUIを形にできるため、デザイナーや開発者にとって強力なツールとなります。

今回はv0で作成したフロントエンドのコードをAWS Amplifyにデプロイするところまでを整理。

v0でのvibe coding

chat開始

new chatを選ぶとこんな感じの画面に遷移するので、さっそく始めていきます

prompt例

このcsvファイルに基づき、入力可能なオンライン画面を作成して。2行目は凡例で、要、不要の項目はプルダウン形式にすること。アカウント申請区分もプルダウン形式にすること。入力されたデータはDB保存し、保存されたデータはcsv出力できる機能を付ける。

プロンプトエンジニアリングのプの字のない殴り書きですが、なんとかしてくれます☺　添付もできます。

応答後のステップ

今回はオンライン申請フォームを作りたい要件を出しているので、申請情報格納するDB作成のため、UI作成と同時に、次のステップとしてNeon※のインストールに誘導されました。
※サーバーレスのPostgreSQLデータベースサービス

NeonにSign-Inして、他のコンポーネントと一緒に生成された.sqlを実行してテーブル作成したら完了です。動作確認をして、不備があれば、適宜修正。

v0で作成したコンポーネントのデプロイ

簡単なデプロイ手段としてVercelだが、AWS Amplifyでも同等のことができる。Vercelにデプロイできなかったので、今回はAWS Amplifyにてデプロイしていく。

AWS Amplifyでデプロイする方法

v0からコードを取得:

v0で生成したコンポーネントのコード（JSXやTSX）をコピー、またはshadcn/uiのCLIを使ってローカルのNext.jsプロジェクトに追加します。

shadcn/uiの場合

画面キャプチャの要領でコマンドがコピーできます。
npx shadcn@latest add "https://v0.dev/chat/b/hogehoge~~"
Download Zipでも可

Next.jsプロジェクトを準備:

npx create-next-app@latest コマンドで新規作成します。
v0で生成したコンポーネントをプロジェクト内の適切な場所（例: /components）に配置します。

GitHubにプッシュ:

プロジェクトをGitHubリポジトリにプッシュします。

AWSマネジメントコンソールにログインし、AWS Amplifyを開きます。

「新しいアプリを作成」を選択します。

⇒プロバイダーとして「GitHub」を選択し、リポジトリとブランチを選びます。

⇒ Amplifyが自動でビルド設定を検出します。必要に応じてamplify.ymlでビルドコマンドや出力ディレクトリ（.next）などを調整します。

⇒ 設定を確認し、「保存してデプロイ」をクリックすると、デプロイが開始されます。

※Vercelと連携する場合は、Vercelにサインアップし、GitHubアカウントを連携し、Vercelのダッシュボードから、デプロイしたいGitHubリポジトリを選択することでVercelが自動的にNext.jsプロジェクトを検出し、「Deploy」ボタンをクリックするだけで、ビルドとデプロイが自動的に実行してくれるようです。

⇒デプロイ完了すると、ドメインURLからサイトアクセスできるようになります。