Vite を使ったフロントエンド開発では、高速なビルドと優れた開発体験が得られますね。しかし、プロジェクトが成長するにつれて、依存パッケージのセキュリティ管理が大きな課題になってきます。

npm パッケージには日々新たな脆弱性が発見されており、放置すると本番環境でのセキュリティリスクに直結するでしょう。また、使われていない依存関係が残っていると、不要な攻撃面を増やしてしまいます。

本記事では、Vite プロジェクトにおいて pnpm audit、depcheck、Trivy の 3 つのツールを組み合わせた継続的なセキュリティ監視の仕組みを解説します。これらを CI/CD パイプラインに組み込むことで、開発フェーズから本番デプロイまで、依存関係のセキュリティを自動的に保つことができますよ。

背景

モダンフロントエンド開発と依存関係の増加

Vite は Vue.js の作者である Evan You 氏が開発した、次世代のフロントエンドビルドツールです。esbuild を活用した高速なビルドと、ES Modules を利用した即座のホットモジュールリプレースメント（HMR）により、開発体験を劇的に向上させました。

しかし、モダンな Web アプリケーション開発では、数百から数千もの npm パッケージに依存することが一般的になっています。React、Vue、TypeScript、各種ユーティリティライブラリ、テストフレームワークなど、プロジェクトの依存関係は階層的に広がっていきます。

以下の図は、Vite プロジェクトにおける典型的な依存関係の構造を示しています。

mermaidCopy codeflowchart TD
  viteApp["Vite アプリケーション"]
  direct["直接依存<br/>（package.json）"]
  indirect["間接依存<br/>（依存の依存）"]
  vuln["脆弱性のリスク"]

  viteApp --> direct
  direct --> indirect
  indirect -->|数百〜数千| vuln
  direct -->|更新漏れ| vuln

  style vuln fill:#ff9999

図で理解できる要点：

• 直接依存だけでなく、その依存先（間接依存）も含めると膨大な数になる
• 各層で脆弱性が潜んでいる可能性がある
• 更新漏れが発生しやすい構造になっている

npm エコシステムのセキュリティ状況

npm レジストリには 200 万を超えるパッケージが登録されており、毎日新しいパッケージが追加されています。それに伴い、セキュリティの脅威も増加傾向にあります。

2023 年の GitHub のレポートによると、JavaScript エコシステムでは年間数万件の脆弱性が報告されました。特に以下のような問題が頻発しています。

#	脅威の種類	具体例	影響度
1	既知の脆弱性	CVE に登録された脆弱性	★★★
2	悪意のあるパッケージ	タイポスクワッティング	★★★
3	依存関係の乗っ取り	メンテナアカウントの侵害	★★★
4	サプライチェーン攻撃	ビルドプロセスへの侵入	★★☆
5	ライセンス違反	商用利用不可ライブラリの混入	★☆☆

このような状況下で、開発者は依存関係を常に最新の安全な状態に保つ必要があります。

パッケージマネージャーの選択肢

Vite プロジェクトでは、npm、yarn、pnpm のいずれかのパッケージマネージャーを選択できます。本記事では pnpm を推奨します。その理由は以下の通りです。

pnpm は、ハードリンクとシンボリックリンクを活用して、ディスク容量を大幅に節約しつつ、高速なインストールを実現しています。さらに、厳格な依存関係の管理により、「幽霊依存」（package.json に記載されていないのに使える依存）を防ぎます。

セキュリティの観点からも、pnpm の厳格な依存解決は優れており、意図しない依存関係の混入を防ぐことができるでしょう。

課題

依存関係のセキュリティ管理における 3 つの主要課題

Vite プロジェクトで依存関係のセキュリティを維持するには、以下の 3 つの課題に対処する必要があります。

mermaidCopy codeflowchart LR
  challenge1["課題1<br/>脆弱性の検出"]
  challenge2["課題2<br/>未使用依存の特定"]
  challenge3["課題3<br/>継続的な監視"]

  risk1["セキュリティリスク"]
  risk2["攻撃面の拡大"]
  risk3["対応遅延"]

  challenge1 --> risk1
  challenge2 --> risk2
  challenge3 --> risk3

  style risk1 fill:#ffcccc
  style risk2 fill:#ffcccc
  style risk3 fill:#ffcccc

図で理解できる要点：

• 3 つの課題それぞれが異なるリスクを生む
• 単一ツールでは全ての課題をカバーできない
• 包括的なアプローチが必要

課題 1：既知の脆弱性を迅速に検出する

npm パッケージの脆弱性は、National Vulnerability Database（NVD）や GitHub Advisory Database に日々報告されています。しかし、プロジェクトで使用している数百の依存関係すべてについて、手動で脆弱性をチェックするのは現実的ではありません。

特に間接依存（依存関係の依存関係）については、開発者が直接コントロールできないため、把握が難しくなります。例えば、プロジェクトが使っている UI ライブラリが内部で使っているユーティリティに脆弱性があった場合、それを検出する仕組みが必要です。

以下のようなエラーが発生した場合、脆弱性が原因の可能性があります。

typescriptCopy code// セキュリティの問題がある依存関係を使った場合の例
// Error: CVE-2023-XXXXX - Path Traversal vulnerability in package-name
// TypeError: Cannot read property 'sanitize' of undefined

課題 2：未使用の依存関係を特定する

プロジェクトの開発が進むにつれて、かつて使っていたライブラリが不要になることがあります。しかし、package.json から削除し忘れると、以下のような問題が発生します。

#	問題	説明	影響
1	セキュリティリスクの増加	使っていないパッケージの脆弱性も影響を受ける	高
2	ビルドサイズの肥大化	不要なコードがバンドルに含まれる可能性	中
3	メンテナンスコストの増加	更新が必要な依存関係が増える	中
4	依存関係の競合	使われていない依存が他と競合する	低

未使用の依存関係は、攻撃者にとって侵入口になる可能性があるため、定期的に洗い出して削除する必要があります。

課題 3：CI/CD パイプラインでの継続的な監視

開発の初期段階ではセキュリティチェックを実施していても、プロジェクトが進むにつれてチェックが疎かになることがあります。また、新しい脆弱性は日々発見されるため、一度チェックしただけでは不十分です。

以下の状況で継続的な監視が必要になります。

• 新しい依存関係を追加したとき
• 既存の依存関係を更新したとき
• 新しい脆弱性が公開されたとき
• Pull Request をマージする前
• 本番環境へデプロイする前

CI/CD パイプラインに組み込むことで、これらのタイミングで自動的にセキュリティチェックを実行できますが、適切なツールの選択と設定が必要になります。

解決策

3 つのツールを組み合わせた包括的なセキュリティ戦略

上記の 3 つの課題に対応するため、それぞれ異なる強みを持つツールを組み合わせます。pnpm audit で脆弱性を検出し、depcheck で未使用依存を特定し、Trivy でコンテナイメージレベルの包括的なスキャンを実行します。

以下の図は、3 つのツールがどのように連携して、セキュリティの網を張るかを示しています。

mermaidCopy codeflowchart TD
  source["ソースコード<br/>package.json"]

  pnpm["pnpm audit<br/>脆弱性検出"]
  depcheck["depcheck<br/>未使用依存検出"]
  trivy["Trivy<br/>包括的スキャン"]

  report1["脆弱性レポート"]
  report2["未使用依存リスト"]
  report3["総合セキュリティレポート"]

  action["修正アクション"]

  source --> pnpm
  source --> depcheck
  source --> trivy

  pnpm --> report1
  depcheck --> report2
  trivy --> report3

  report1 --> action
  report2 --> action
  report3 --> action

  style action fill:#99ff99

図で理解できる要点：

• 3 つのツールがそれぞれ異なる観点からチェック
• 各ツールのレポートを統合して修正アクションを決定
• 多層防御の考え方でセキュリティを強化

ツール 1：pnpm audit による脆弱性検出

pnpm audit は、pnpm に組み込まれたセキュリティ監査ツールです。npm の公式脆弱性データベースと照合して、プロジェクトの依存関係に既知の脆弱性がないかをチェックします。

主な特徴は以下の通りです。

#	特徴	説明
1	高速なスキャン	pnpm の高速性を活かした迅速な検出
2	重大度の分類	Critical、High、Moderate、Low で分類
3	自動修正機能	pnpm audit --fix で自動的に修正可能
4	JSON 出力対応	CI/CD での処理に適した形式で出力

pnpm audit は、開発中の日常的なチェックと、CI/CD パイプラインでの自動チェックの両方に適しています。

ツール 2：depcheck による未使用依存の検出

depcheck は、package.json に記載されているが実際にはコードで使われていない依存関係を検出するツールです。

以下のような依存関係を見つけ出します。

• どのファイルからもインポートされていないパッケージ
• devDependencies に入れるべきなのに dependencies にあるもの（またはその逆）
• package.json に記載されていないが使われているパッケージ（幽霊依存）

depcheck を定期的に実行することで、依存関係を最小限に保ち、攻撃面を減らすことができます。

ツール 3：Trivy による包括的なセキュリティスキャン

Trivy は、Aqua Security が開発したオープンソースのセキュリティスキャナーです。コンテナイメージ、ファイルシステム、Git リポジトリなど、さまざまな対象をスキャンできます。

Vite プロジェクトにおける Trivy の利点は以下の通りです。

#	利点	詳細
1	多様な脆弱性データベース	NVD、GitHub Advisory など複数のソースを統合
2	OS パッケージも検出	Node.js の基盤となる OS レベルの脆弱性も検出
3	ライセンススキャン	オープンソースライセンスの確認も可能
4	設定ミスの検出	Dockerfile や Kubernetes マニフェストの問題も検出
5	CI/CD 統合が容易	GitHub Actions などとの統合が簡単

pnpm audit が npm パッケージに特化しているのに対し、Trivy はより広範囲なセキュリティチェックを提供します。

3 つのツールの使い分け

それぞれのツールを以下のように使い分けることで、効果的なセキュリティ運用が実現できます。

mermaidCopy codeflowchart LR
  daily["日常開発"]
  pr["Pull Request"]
  deploy["デプロイ前"]

  daily --> pnpm_daily["pnpm audit<br/>（軽量チェック）"]
  pr --> all_pr["pnpm audit +<br/>depcheck"]
  deploy --> all_deploy["pnpm audit +<br/>depcheck +<br/>Trivy"]

  pnpm_daily --> quick["素早いフィードバック"]
  all_pr --> thorough["徹底的な検証"]
  all_deploy --> complete["完全なセキュリティ保証"]

  style quick fill:#ccffcc
  style thorough fill:#99ff99
  style complete fill:#66ff66

図で理解できる要点：

• 開発フェーズに応じてツールを使い分ける
• 日常開発では軽量に、デプロイ前は徹底的にチェック
• 段階的なセキュリティゲートを設ける

具体例

プロジェクトのセットアップ

まず、Vite プロジェクトを作成し、pnpm をパッケージマネージャーとして設定します。

Vite プロジェクトの初期化

以下のコマンドで、React + TypeScript の Vite プロジェクトを作成します。

bashCopy code# pnpm を使って Vite プロジェクトを作成
pnpm create vite my-secure-app --template react-ts

プロジェクトディレクトリに移動します。

bashCopy code# 作成したプロジェクトに移動
cd my-secure-app

依存関係のインストール

pnpm で依存関係をインストールします。

bashCopy code# 依存関係をインストール
pnpm install

これで基本的な Vite + React + TypeScript のプロジェクトが準備できました。

pnpm audit の導入と実践

基本的な脆弱性チェック

プロジェクトの依存関係に脆弱性がないかチェックします。

bashCopy code# 脆弱性をチェック
pnpm audit

このコマンドを実行すると、以下のような形式でレポートが表示されます。

bashCopy code# pnpm audit の出力例
# found 3 vulnerabilities (1 moderate, 2 high)
#
# High severity vulnerability in package-name
# Description: Cross-Site Scripting (XSS) vulnerability
# Path: package-name > vulnerable-dep
# More info: https://github.com/advisories/GHSA-xxxx-xxxx-xxxx

重大度に応じて、対応の優先度を決定します。

重大度	対応の緊急度	アクション
Critical	即座に対応	即座にパッチ適用または代替パッケージに移行
High	24 時間以内	速やかにパッチ適用を計画
Moderate	1 週間以内	次回更新時に対応
Low	次回メンテナンス時	計画的に対応

自動修正の実行

修正可能な脆弱性を自動的に修正します。

bashCopy code# 自動修正を実行
pnpm audit --fix

このコマンドは、互換性のある範囲で依存関係を最新バージョンに更新し、脆弱性を修正します。ただし、破壊的変更（breaking changes）を含む更新は行われません。

JSON 形式での出力

CI/CD パイプラインで処理しやすいように、JSON 形式で出力します。

bashCopy code# JSON 形式で出力
pnpm audit --json > audit-report.json

この出力を後続の処理で解析し、重大度に応じたアクションを自動化できます。

package.json にスクリプトを追加

日常的に使いやすいように、package.json にスクリプトを追加しましょう。

jsonCopy code{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "audit": "pnpm audit",
    "audit:fix": "pnpm audit --fix"
  }
}

これにより、pnpm run audit で簡単にチェックできるようになります。

depcheck の導入と実践

depcheck のインストール

depcheck を開発依存関係としてインストールします。

bashCopy code# depcheck をインストール
pnpm add -D depcheck

基本的な未使用依存のチェック

プロジェクトの未使用依存関係をチェックします。

bashCopy code# 未使用依存をチェック
npx depcheck

depcheck の出力例は以下のようになります。

bashCopy code# depcheck の出力例
# Unused dependencies
# * lodash
# * moment
#
# Unused devDependencies
# * @types/react-router-dom
#
# Missing dependencies
# * axios (used in src/api/client.ts)

この出力から、以下の情報が得られます。

• Unused dependencies：インストールされているが使われていないパッケージ
• Unused devDependencies：使われていない開発用パッケージ
• Missing dependencies：使われているが package.json に記載されていないパッケージ

未使用依存の削除

検出された未使用依存を削除します。

bashCopy code# 未使用の依存関係を削除
pnpm remove lodash moment

ただし、削除前に本当に使われていないかを確認することが重要です。depcheck は静的解析のため、動的にインポートされるモジュールを検出できない場合があります。

詳細な設定ファイルの作成

プロジェクトルートに .depcheckrc.json を作成し、チェックの詳細を設定します。

jsonCopy code{
  "ignores": ["@types/*", "vite", "typescript"],
  "ignore-patterns": ["dist", "node_modules"]
}

この設定により、型定義ファイルやビルドツールなど、誤検出されやすいパッケージを除外できます。

package.json にスクリプトを追加

depcheck も package.json のスクリプトに追加します。

jsonCopy code{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "audit": "pnpm audit",
    "audit:fix": "pnpm audit --fix",
    "depcheck": "depcheck"
  }
}

これで pnpm run depcheck で簡単に実行できます。

Trivy の導入と実践

Trivy のインストール

Trivy は CLI ツールとして提供されています。macOS の場合は Homebrew でインストールできます。

bashCopy code# macOS での Trivy インストール
brew install trivy

Linux の場合は以下のようにインストールします。

bashCopy code# Linux での Trivy インストール
sudo apt-get install wget apt-transport-https gnupg lsb-release
wget -qO - https://aquasecurity.github.io/trivy-repo/deb/public.key | sudo apt-key add -
echo "deb https://aquasecurity.github.io/trivy-repo/deb $(lsb_release -sc) main" | sudo tee -a /etc/apt/sources.list.d/trivy.list
sudo apt-get update
sudo apt-get install trivy

ファイルシステムのスキャン

プロジェクト全体をスキャンします。

bashCopy code# プロジェクトディレクトリをスキャン
trivy fs .

このコマンドは、package.json や package-lock.json を解析し、既知の脆弱性を検出します。

重大度を指定したスキャン

Critical と High の脆弱性のみを表示します。

bashCopy code# 重大度を指定してスキャン
trivy fs --severity CRITICAL,HIGH .

これにより、最も重要な問題に集中できます。

JSON 形式での出力

CI/CD での処理のため、JSON 形式で出力します。

bashCopy code# JSON 形式で出力
trivy fs --format json --output trivy-report.json .

Docker イメージのスキャン

Vite アプリケーションを Docker コンテナ化している場合、イメージ自体もスキャンできます。まず、Dockerfile を用意します。

dockerfileCopy code# Vite アプリケーション用の Dockerfile
FROM node:18-alpine AS builder

# 作業ディレクトリを設定
WORKDIR /app

# package.json と pnpm-lock.yaml をコピー
COPY package.json pnpm-lock.yaml ./

pnpm をインストールし、依存関係をインストールします。

dockerfileCopy code# pnpm をインストール
RUN npm install -g pnpm

# 依存関係をインストール
RUN pnpm install --frozen-lockfile

ソースコードをコピーし、ビルドを実行します。

dockerfileCopy code# ソースコードをコピー
COPY . .

# ビルドを実行
RUN pnpm run build

本番用のイメージを作成します。

dockerfileCopy code# 本番用イメージ
FROM nginx:alpine

# ビルド成果物をコピー
COPY --from=builder /app/dist /usr/share/nginx/html

# ポートを公開
EXPOSE 80

# nginx を起動
CMD ["nginx", "-g", "daemon off;"]

イメージをビルドします。

bashCopy code# Docker イメージをビルド
docker build -t my-secure-app:latest .

ビルドしたイメージをスキャンします。

bashCopy code# Docker イメージをスキャン
trivy image my-secure-app:latest

これにより、Node.js ランタイムや nginx の脆弱性も検出できます。

Trivy の設定ファイル

プロジェクトルートに trivy.yaml を作成し、スキャンの設定を定義します。

yamlCopy code# Trivy 設定ファイル
scan:
  # スキャン対象の種類
  scanners:
    - vuln
    - config
    - secret

# 重大度のフィルタ
severity:
  - CRITICAL
  - HIGH

無視するルールを設定します。

yamlCopy code# 特定の脆弱性を無視（理由が明確な場合のみ）
ignorefile: .trivyignore

# タイムアウト設定
timeout: 5m

この設定ファイルを使ってスキャンを実行します。

bashCopy code# 設定ファイルを使ってスキャン
trivy fs --config trivy.yaml .

CI/CD パイプラインへの統合

GitHub Actions での自動化

.github​/​workflows​/​security-audit.yml を作成し、セキュリティチェックを自動化します。

ワークフローのトリガーを定義します。

yamlCopy code# セキュリティ監査ワークフロー
name: Security Audit

on:
  # Pull Request 時に実行
  pull_request:
    branches: [main, develop]
  # main ブランチへのプッシュ時に実行
  push:
    branches: [main]
  # 毎日午前 9 時に実行
  schedule:
    - cron: '0 0 * * *'

ジョブを定義します。

yamlCopy codejobs:
  security-audit:
    runs-on: ubuntu-latest

    steps:
      # リポジトリをチェックアウト
      - name: Checkout code
        uses: actions/checkout@v4

pnpm をセットアップします。

yamlCopy code# pnpm をセットアップ
- name: Setup pnpm
  uses: pnpm/action-setup@v2
  with:
    version: 8

Node.js をセットアップします。

yamlCopy code# Node.js をセットアップ
- name: Setup Node.js
  uses: actions/setup-node@v4
  with:
    node-version: '18'
    cache: 'pnpm'

依存関係をインストールします。

yamlCopy code# 依存関係をインストール
- name: Install dependencies
  run: pnpm install --frozen-lockfile

pnpm audit を実行します。

yamlCopy code# pnpm audit を実行
- name: Run pnpm audit
  run: pnpm audit --audit-level=moderate
  continue-on-error: true

depcheck を実行します。

yamlCopy code# depcheck を実行
- name: Run depcheck
  run: npx depcheck
  continue-on-error: true

Trivy をセットアップして実行します。

yamlCopy code# Trivy をセットアップ
- name: Run Trivy vulnerability scanner
  uses: aquasecurity/trivy-action@master
  with:
    scan-type: 'fs'
    scan-ref: '.'
    format: 'sarif'
    output: 'trivy-results.sarif'
    severity: 'CRITICAL,HIGH'

結果を GitHub Security タブにアップロードします。

yamlCopy code# 結果を GitHub Security にアップロード
- name: Upload Trivy results to GitHub Security
  uses: github/codeql-action/upload-sarif@v2
  with:
    sarif_file: 'trivy-results.sarif'

エラー時の対応フロー

セキュリティチェックで問題が検出された場合の対応フローは以下の通りです。

mermaidCopy codestateDiagram-v2
  [*] --> scan_start: スキャン開始

  scan_start --> vuln_found: 脆弱性検出
  scan_start --> no_vuln: 問題なし

  vuln_found --> assess: 重大度評価

  assess --> critical: Critical/High
  assess --> moderate: Moderate
  assess --> low_severity: Low

  critical --> block_pr: PR をブロック
  moderate --> warn: 警告のみ
  low_severity --> log_only: ログのみ

  block_pr --> fix_now: 即座に修正
  warn --> plan_fix: 修正を計画
  log_only --> next_maint: 次回メンテナンスで対応

  fix_now --> rescan: 再スキャン
  plan_fix --> rescan

  rescan --> scan_start

  no_vuln --> done_state: 完了
  next_maint --> done_state

  done_state --> [*]

図で理解できる要点：

• 重大度に応じて対応を分岐
• Critical/High は PR をブロックして即座に対応
• 修正後は必ず再スキャンを実施

定期的な監視の設定

毎日自動的にセキュリティスキャンを実行し、問題があれば Slack などに通知する設定も可能です。

.github​/​workflows​/​daily-security-scan.yml を作成します。

yamlCopy code# 毎日のセキュリティスキャン
name: Daily Security Scan

on:
  schedule:
    # 毎日午前 9 時（JST）に実行
    - cron: '0 0 * * *'
  workflow_dispatch:

jobs:
  daily-scan:
    runs-on: ubuntu-latest

セキュリティスキャンを実行します（前述の手順と同様）。

yamlCopy codesteps:
  - uses: actions/checkout@v4
  - uses: pnpm/action-setup@v2
  - uses: actions/setup-node@v4
    with:
      node-version: '18'
      cache: 'pnpm'

  - name: Install and scan
    run: |
      pnpm install --frozen-lockfile
      pnpm audit --json > audit.json || true

結果を Slack に通知します。

yamlCopy code- name: Notify Slack
  if: failure()
  uses: slackapi/slack-github-action@v1
  with:
    payload: |
      {
        "text": "セキュリティスキャンで問題が検出されました"
      }
  env:
    SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

実際のエラーとその対処例

エラー例 1：Critical 脆弱性の検出

以下のようなエラーが発生した場合の対処方法を説明します。

bashCopy code# Error: Critical severity vulnerability detected
# Package: json5@2.2.0
# Vulnerability: Prototype Pollution
# CVE: CVE-2022-46175
# CVSS Score: 9.8 (Critical)
# Recommendation: Upgrade to version 2.2.3 or later

このエラーは、json5 パッケージにプロトタイプ汚染の脆弱性が存在することを示しています。

対処手順は以下の通りです。

1. 影響範囲を確認します。

bashCopy code# どのパッケージが json5 に依存しているかを確認
pnpm why json5

2. 依存関係を更新します。

bashCopy code# 脆弱性を修正したバージョンに更新
pnpm update json5@latest

3. 再度スキャンして確認します。

bashCopy code# 修正を確認
pnpm audit

エラー例 2：未使用依存の検出

depcheck で以下のような出力があった場合の対処方法です。

bashCopy code# Unused dependencies
# * @emotion/react
# * @emotion/styled
# * framer-motion
#
# These packages are installed but not used in the codebase

これらのパッケージは、過去に使用していたが現在は不要になったものです。

対処手順は以下の通りです。

1. 本当に使われていないかコードを検索します。

bashCopy code# コード内で使用されているか検索
grep -r "@emotion/react" src/
grep -r "framer-motion" src/

2. 使われていないことを確認したら削除します。

bashCopy code# 未使用依存を削除
pnpm remove @emotion/react @emotion/styled framer-motion

3. アプリケーションが正常に動作するか確認します。

bashCopy code# ビルドテストを実行
pnpm run build

パフォーマンスとコストの最適化

スキャン時間の短縮

大規模プロジェクトでは、すべてのツールを毎回実行すると時間がかかります。以下のように最適化できます。

フェーズ	実行するツール	所要時間	頻度
ローカル開発	pnpm audit のみ	〜30 秒	コミット前
Pull Request	pnpm audit + depcheck	〜1 分	PR 作成時
マージ前	すべてのツール	〜3 分	マージ前
定期スキャン	すべてのツール + 詳細レポート	〜5 分	毎日

キャッシュの活用

GitHub Actions でキャッシュを活用すると、実行時間を大幅に短縮できます。

yamlCopy code# pnpm のキャッシュを有効化
- name: Setup Node.js
  uses: actions/setup-node@v4
  with:
    node-version: '18'
    cache: 'pnpm'

Trivy のデータベースもキャッシュできます。

yamlCopy code# Trivy データベースのキャッシュ
- name: Cache Trivy DB
  uses: actions/cache@v3
  with:
    path: ~/.cache/trivy
    key: trivy-db-${{ github.run_id }}
    restore-keys: trivy-db-

まとめ

Vite プロジェクトにおける依存関係のセキュリティ運用は、単一のツールでは不十分です。pnpm audit、depcheck、Trivy の 3 つのツールを組み合わせることで、包括的なセキュリティ監視体制を構築できます。

本記事で解説した内容をまとめます。

まず、pnpm audit は日常的な脆弱性チェックに最適で、開発中に素早くフィードバックを得られます。次に、depcheck は未使用依存を特定し、攻撃面を最小化するのに役立ちます。そして、Trivy はコンテナイメージレベルの包括的なスキャンを提供し、本番デプロイ前の最終チェックとして機能するでしょう。

これらのツールを CI/CD パイプラインに統合することで、以下のメリットが得られます。

#	メリット	説明
1	自動化されたセキュリティチェック	人的ミスを排除し、常に最新の脆弱性情報でチェック
2	早期発見・早期対応	開発段階で問題を検出し、修正コストを削減
3	継続的な監視	新しい脆弱性が公開された際も自動で検出
4	コンプライアンス対応	セキュリティ監査の証跡として活用可能
5	開発者の負担軽減	手動チェックが不要になり、開発に集中できる

セキュリティは一度設定すれば終わりではなく、継続的な取り組みが必要です。定期的なスキャン、迅速な脆弱性対応、そして最新のセキュリティ情報へのキャッチアップを心がけることで、安全な Vite アプリケーションを維持できます。

本記事で紹介した手法を実践し、プロジェクトのセキュリティレベルを向上させていきましょう。最初は小さく始めて、徐々に自動化の範囲を広げていくことをお勧めします。

関連リンク

• Vite 公式ドキュメント
• pnpm 公式ドキュメント
• pnpm audit コマンドリファレンス
• depcheck GitHub リポジトリ
• Trivy 公式ドキュメント
• Aqua Security Trivy GitHub
• GitHub Advisory Database
• National Vulnerability Database (NVD)
• npm セキュリティベストプラクティス
• OWASP Top 10