🐒
React-Vite(tailwindcss) + FastAPIをVercel上でデプロイする
はじめに
React-ViteとFastAPIをvercel上までデプロイするまでの流れとサンプルデータの記録です。
過去にReact-ViteとFastAPIをvercel上へデプロイする記事もあるので、単独で必要な方は以下をご覧いただければと思います。
FastAPI on Vercel 記事
React-Vite(tailwindcss) on Vercel 記事
バックエンドとフロントエンドのやり取り
バックエンドでは、api/logo/logosamples というAPIを提供しています。このAPIは、ロゴデータや関連するURLなどの情報を返します。
(https://react-vite-fast-api-vercel.vercel.app/api/logo/logoIcons)にアクセスすると、以下のようなデータが返ってきます。
[
{
"name": "fastapi",
"src": "https://react-vite-fast-api-vercel.vercel.app/api/static/images/svg/fastapi-1.svg",
"url": "https://fastapi.tiangolo.com"
},
{
"name": "tailwind",
"src": "https://react-vite-fast-api-vercel.vercel.app/api/static/images/svg/tailwindcss-mark.d52e9897.svg",
"url": "https://tailwindcss.com"
},
{
"name": "vercel",
"src": "https://react-vite-fast-api-vercel.vercel.app/api/static/images/svg/vercel-icon-svgrepo-com.svg",
"url": "https://vercel.com/"
}
]
フロントエンドのトップページでは、このAPIから取得したデータを使用して、ロゴやリンクを表示するシンプルな構成となっています。
app/src/pages/LogoSamples.jsxで以下のようにフェッチしてただ表示しているだけです。
実際にデプロイした、サンプルページ
サンプルページはこんな感じで見えるはずです
テンプレートを使って、とりあえずデプロイしたい方
前提条件
- npm Node.js 20+ (インストールはこちら)
- Python 3.12+ (vercelの最新が3.12対応のため - 2025/6/3)
- uv (インストールはこちら)
- Vercel CLI (インストールはこちら)
Vercel CLI を使ってテストからデプロイ/ホスティングまで
-
クローン
git clone https://github.com/testkun08080/ReactVite-FastAPI-Vercel.git cd ReactVite-FastAPI-Vercel -
モジュールをインストール
cd app npm install cd .. -
ローカルでテスト
vercel dev -
vercelへデプロイ（プレビューとして）
vercel -
、vercelへデプロイ（プロダクトとして）
vercel --prod
まとめ
特にweb周りに詳しくない人ですが、スムーズにバックエンドとフロントをデプロイするまでを経験できたのはいい経験になりました。
オープンソースのプロジェクトを立ち上げて、webなどを使用することにはなりそうなので、どこかで役に立ちそうです。
スマホとの連携が必要になりそうなので、reac nativeとかflutterもその際は必要になりそうです。
何か不明点、ツッコミ、不具合などあればご連絡ください。
それではまた！
Discussion