Create React AppからViteへ更新
旧記事ではCreate React Appを使っていましたが、現在はViteを使った軽量な構成へ更新します。Viteは高速な開発サーバーと本番ビルド機能を提供します。
作業前にNode.jsのバージョンを確認してください。必要なバージョンはViteのメジャーバージョンごとに変わるため、公式ガイドを正とします。
node -v
npm -vプロジェクトを作成する
表示されたローカルURLをブラウザーで開きます。TypeScriptを使わない場合はテンプレートをreactへ変更できます。
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run devビルドを確認する
開発サーバーで動くだけでは完了ではありません。公開前に本番ビルドが成功することと、previewで画面やルーティングが正しく動くことを確認します。
npm run build
npm run previewよくある失敗
- Node.jsのバージョン要件を確認しない
- node_modulesをGitへコミットする
- 環境変数へ秘密情報を入れ、フロントへ露出させる
- 開発サーバーだけ確認して本番ビルドを試さない
