✅

脆弱性が検知されたのでCreate React AppからViteへ移行した

2025/11/12に公開3件

 はじめに個人で作成中のポートフォリオサイトでGitHub に push した際に、GitHub Dependabotが依存関係を自動スキャンし、セキュリティアラートを発していました。

npm auditで確認したところ25個の脆弱性が検出され、そのうち16個は自動修正できましたが、残り9個の脆弱性が解決できない状態でした。これらの脆弱性は全て react-scripts とその依存関係に起因していたため、Create React App (CRA) から Vite に移行したところ、セキュリティ脆弱性を77.8%削減し、開発サーバーの起動時間も大幅に短縮できました。

本記事では、実際の移行プロセスで直面した問題とその解決策を詳しく紹介します。

 セキュリティ脆弱性の増大実際に検出されていた脆弱性については以下の通りです。

主な脆弱性：

nth-check: 非効率な正規表現による ReDoS 脆弱性

postcss: 行返し解析エラー

webpack-dev-server: XSS 脆弱性（開発環境のみ）

 Create React App の現状とViteの選択肢Create React App は React の公式スターターキットとして長年利用されてきましたが、現在は以下の問題があるようです。

開発が事実上停滞している

※2025/11/12：Create React App は、React チームによって正式に非推奨化が発表されているとご指摘いただきました！こちらにVite の Create React App 移行ガイドがありましたので、移行の際はこちらを参照したほうが良いと思います💦
依存関係のセキュリティ問題を解決できない
ビルドツールとして古い webpack を使用
一方で、Vite は
高速な開発サーバー起動（数秒 → 数百ミリ秒）
高速な HMR（Hot Module Replacement）
モダンな開発環境として業界標準になりつつある
React 公式ドキュメントでも推奨されている
これらの理由から、Vite への移行を決断しました。

 移行手順
 1. Vite関連パッケージのインストールまず、Vite と React プラグインをインストールします。
npm install -D vite@^5.0.0 @vitejs/plugin-react@^4.0.0
!※ Node.js 18 を使用していたため、Vite 5.x を選択しました（後述）。

 2. vite.config.js の作成プロジェクトルートに vite.config.js を作成します。GitHub Pages でホストしているため、base パスの設定が必要です。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/portfolio-project/', // GitHub Pages用のベースパス
  build: {
    outDir: 'build', // gh-pagesと互換性を保つ
  },
  server: {
    port: 3000,
    open: true
  }
})

 3. index.html の移動Vite では index.html がプロジェクトのルートに配置されます。
public/index.html → /index.html に移動し、以下の変更を行いました。

%PUBLIC_URL% を削除（Vite が自動処理）

<script type="module" src="/src/index.jsx"></script> を追加

 4. package.json の更新スクリプトを Vite コマンドに変更：
"scripts": {
  "dev": "vite",
  "start": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

 5. 不要なパッケージの削除npm uninstall react-scripts @testing-library/jest-dom @testing-library/react @testing-library/user-event

 移行で直面した問題と解決策
 問題1: Node.js バージョンの非互換性最初に最新の Vite 7.x をインストールしようとしたところ、以下の警告が表示：
!npm WARN EBADENGINE Unsupported engine {
  package: 'vite@7.2.2',
  required: { node: '^20.19.0 || >=22.12.0' },
  current: { node: 'v18.19.1', npm: '9.2.0' }
}
解決策: Node.js 18 対応の Vite 5.x にダウングレード
npm uninstall vite @vitejs/plugin-react
npm install -D vite@^5.0.0 @vitejs/plugin-react@^4.0.0
結果として Vite 5.4.21 と @vitejs/plugin-react 4.7.0 が正常にインストールされました。

 問題2: JSX 構文エラー開発サーバーを起動したところ、以下のエラーが発生：
!The JSX syntax extension is not currently enabled
The esbuild loader for this file is currently set to "js" but it must be set to "jsx"
解決策: .jsx へのリネーム

Vite のベストプラクティスに従い、JSX を含むファイルをすべて .jsx 拡張子にリネームしました。
cd src && for file in *.js components/*.js pages/*.js; do
  [ -f "$file" ] && git mv "$file" "${file%.js}.jsx"
done

 移行の成果
 セキュリティ改善

項目
移行前
移行後
削減率


critical
1個
0個
100%

high
6個
0個
100%

moderate
2個
2個
0%

合計
9個
2個
77.8%

残った2個の moderate も esbuild 関連で開発環境のみに影響し、本番ビルドには含まれません。

 パフォーマンス改善開発サーバー起動時間:
移行前: 数秒
移行後: 637ms
ビルド時間: 8.82秒（高速化）
依存パッケージ:
移行前: 1,611パッケージ
移行後: 180パッケージ（88.8%削減）

 まとめCreate React App から Vite への移行により、以下を達成しました。移行作業を通して Vite のベストプラクティスを学ぶ良い機会になりました。

セキュリティ: 脆弱性を77.8%削減

パフォーマンス: 開発サーバー起動時間を大幅短縮

保守性: 依存パッケージを88.8%削減

開発者体験: より快適な開発環境
CRA で開発していてセキュリティや速度に課題を感じている方は、ぜひ Vite への移行を検討してみてください。

 参考リンクVite 公式ドキュメント
Vite + React ガイド
GitHub Pages デプロイガイド

項目	移行前	移行後	削減率
critical	1個	0個	100%
high	6個	0個	100%
moderate	2個	2個	0%
合計	9個	2個	77.8%

Discussion

Honey32

失礼します。
開発が事実上停滞している
とありますが、これは正しくありません。Create React App は正式に非推奨化が宣言されています。
https://ja.react.dev/blog/2025/02/14/sunsetting-create-react-app

hirata97

ご指摘ありがとうございます！
提示いただいたリンクにある移行ガイドを参照するほうが適切ですね・・・勉強になりました💦

Honey32

いえいえ、お助けになれたなら幸いです！