概要

React + Vite(+tailwind)をvercel上へデプロイするまでの流れと、サンプルデータです。

テンプレートを使って、とりあえずデプロイしたい方

サンプルページ

https://react-vite-vercel-ten.vercel.app/

事前インストール必要なもの

• npm Node.js 20+ (インストールはこちら)
• Vercel CLI (インストールはこちら)

ローカル上でセットアップから起動

1. ローカルへクローンする

   git clone https://github.com/testkun08080/ReactVite-vercel.git

2. 仮想環境の構築

   cd ReactVite-vercel/app
   npm install

3. ローカル起動
   以下コマンドを叩いて、ブラウザでhttp://localhost:3000確認できるはずです。

   npm run dev

Vercel CLI を使ってテストからデプロイ

1. ローカル起動
   app階層にターミナルが移動していること路確認してください。
   あとはお好きなプロジェクト名などに適宜変えてください。
   以下のように順調に進めば、ブラウザでhttp://localhost:3000確認できるはずです。

   vercel dev

   以下ターミナルのサンプル表示

   YOURUSERNAME ReactVIte-vercel % vercel dev
   Vercel CLI 42.3.0
   ? Set up and develop “~/Git/ReactVIte-vercel”? yes
   ? Which scope should contain your project? testkun08080's projects
   ? Link to existing project? no
   ? What’s your project’s name? react-vite-vercel
   ? In which directory is your code located? ./app
   Local settings detected in vercel.json:
   Auto-detected Project Settings (Vite): 
   - Build Command: vite build
   - Development Command: vite --port $PORT
   - Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
   - Output Directory: dist
   ? Want to modify these settings? no
   🔗  Linked to testkun08080s-projects/react-vite-vercel (created .vercel)
   > Running Dev Command “vite --port $PORT”
   
    VITE v6.3.5  ready in 389 ms
   
    ➜  Local:   http://localhost:3000/
    ➜  Network: use --host to expose
    ➜  press h + enter to show help
   > Ready! Available at http://localhost:3000

2. vercelへデプロイ（プレビューとして）

   vercel

3. vercelへデプロイ（プロダクトとして）

   vercel --prod