何をするか
Viteを使ったReact×TypeScript環境をVercelを用いて公開する方法を紹介します。Node環境があることを想定しています。
Vite環境の用意
vite環境はワンラインで作成することができます。
npm create vite@latest
コマンドを入力したら、コマンドラインと会話して環境のセットアップを進めます。project nameには適当な名前を、Select a frameworkはReactをSelect a variantはTypeScriptを選択してください。
ここではvite-projectと名付けたとします。
cd vite-project
npm install
npm run dev
これらのコマンドを順番に入力して、ローカルで動くことを確認してください。これでviteを使ったReact×TypeScript環境の準備は完了です。
GitHubにリポジトリを作る
GitHubのアカウントがあるとして話を進めます。なければ作成して下さい。
githubを開いて右上の+からNew repositoryを選択して作成します。
リポジトリ名だけ決めてCreate repositoryします(もちろん他の項目を設定しても良いです)。
これによってリポジトリが作成されるので先ほど作成したvite-projectに戻って、下のコマンドを入力します。
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/XXX/vite-project.git
git push -u origin main
5行目のgit remote add origin https://github.com/XXX/vite-project.gitのURL部分はリポジトリによって異なります。GitHubのリポジトリページに表示されている下の画像の部分から取得して下さい。
githubにコードが表示されたら完了です。
Vercelでアプリを公開する
Vercelのアカウントがあるとして話を進めます。なければ作成して下さい。
Add Newをクリックして、Projectを選択します。
選択後以下の画面になるので、Continue With Githubを選択します。
初めての場合はGithubの認証などが間に挟まりますが、連携が完了している場合はGitHubの設定にあるIntegrationsのApplicationsにVercelがあるはずです。そこで、Repository accessでOnly select Repositoriesを選択して先ほど作成したリポジトリを選択します(多分all Repositoriesでも問題ないです)。選択したらSaveを押してVercelに戻ります。
戻るとImportを押せるようになっているはずなので押します。
次の画面でProjetの設定をします。Deployを押すとVercelで先ほどのアプリケーションが世界に公開されます。
今後先ほど作成したリポジトリに変化があると自動的にデプロイしてくれます。