Vite+React(TypeScript)をvercelにデプロイする

Vite+React(TypeScript)をvercelにデプロイする

ひな形プロジェクト作成

$ npm create vite@latest vite_test -- --template react-ts
$ cd vite_test
$ npm i

ひな形プロジェクトが作成されます。

npm scritps

npm run devで開発モードで起動します。デフォルトポートは5173です。

http://localhost:5173/

localhost

こんな画面が起動します。

gitリポジトリ作成

gitリポジトリ作成します。

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/takahashi-h5/vite_test.git
git push -u origin main

vercelとgithub連携

vercelのアカウント作成します。サインイン後、「Add New」－「Project」を選択します。

「import」を押します。

「Deploy」を押します。

「Congratulations!」みたいなメッセージが表示された画面が出たら「Continue to Dashboard」を押します。

「Visit」を押します。

これでこちらにデプロイできました。

ドキュメント

create-vite

## Scaffolding Your First Vite Project. Latest version: 5.1.0, last published: 2 months ago. Start using create-vite in ...

www.npmjs.com

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^