みなさんこんにちは。
平凡な訪問看護師が、アプリ開発の実装過程で読めなかったところを読めるまでやる「小脳記憶シリーズ」です。
今回は少し趣向を変えて、DevOpsの話をします。
コードを書くことに集中していると、「壊れないか確認する」「安全に動かし続ける」という部分が後回しになりがちです。私もそうでした。でもある日、APIキーの扱いを見直したことをきっかけに、個人開発者として最低限やっておくべきことを整理しました。
DevOpsって何？
難しく聞こえますが、やることは4つだけです。
- コードを書く（開発）
- 壊れないか確認する（品質保証）
- 本番で動かし続ける（運用）
- それを自動化・効率化する（自動化基盤）
個人開発者が「今すぐやるべきこと」と「将来でいいこと」を分けるのが大事です。
🔴 今すぐやること：APIキー漏洩チェック
.gitignore に .env が入っているか確認する
まずここから。Reactプロジェクト（Create React App / Vite）を使っている場合、デフォルトの .gitignore には .env.local などのバリエーションは含まれていますが、素の .env が入っていないことがあります。
cat .gitignore | grep .env
出力に .env 単体が含まれていない場合は追加します：
# .gitignore
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
過去にcommitされていないか確認する
git log --all -- .env
何も出なければOK。何か出たら、そのcommitにキーが含まれている可能性があります。すぐにAPIキーをローテーション（再発行）してください。
Viteプロジェクトの環境変数は VITE_ プレフィックスが必要
Viteはセキュリティのため、VITE_ で始まる変数だけをブラウザ側に渡します。
# .env
VITE_GOOGLE_API_KEY=あなたのキー
VITE_ANTHROPIC_API_KEY=あなたのキー
// Reactコードからの読み方
import.meta.env.VITE_GOOGLE_API_KEY
GOOGLE_API_KEY=xxx と書いても読めないので注意。
🟢 エラー監視：Sentryを入れる
アプリをリリースしたあと、ユーザーがエラーに遭遇してもあなたには伝わりません。Sentryを使えば、エラーが起きた瞬間にメールが来ます。
無料プランの範囲（Developer）
- エラー5,000件/月
- メンバー1人
- データ保持30日
個人開発のβ版フェーズなら十分です。
インストール
npm install @sentry/react
🟡 インストールしたら脆弱性が検出された
インストール直後にこれが出ました。
npm audit
vite <=6.4.1
Severity: high
- Vite Vulnerable to Path Traversal in Optimized Deps `.map` Handling
- Vite Vulnerable to Arbitrary File Read via Vite Dev Server WebSocket
「高深刻度」と書いてあっても焦らなくていいです。 これらは開発サーバー限定の問題です。npm run dev で動かしている間だけリスクがあり、本番デプロイ後には関係ありません。
ただし放置はNGです。修正は一コマンドで終わります：
npm audit fix
found 0 vulnerabilities ← これが出れば完了
初期化（Copy SDKを src/main.jsx の先頭に追加）
Sentryの管理画面に表示されるコード（Copy SDK）をそのまま main.jsx の先頭に貼ります。
import * as Sentry from "@sentry/react";
Sentry.init({
dsn: "あなたのDSN", // Sentryの管理画面から取得
sendDefaultPii: true,
});
あとはSentryの管理画面のIssuesを見れば、エラーの内容・発生場所・ブラウザ情報が全部わかります。
まとめ：今日やったこと
| やったこと | ツール | 難易度 |
|---|---|---|
.gitignore に .env を追加 |
テキスト編集 | ★☆☆ |
| 過去のcommit履歴確認 | git | ★☆☆ |
| Vite環境変数のプレフィックス対応 |
.env 編集 |
★☆☆ |
| 脆弱性チェック＆修正 | npm audit fix | ★☆☆ |
| Sentry導入 | npm + 設定 | ★★☆ |
どれも30分以内で終わります。コードを書く前に一度だけやっておけば、あとは気にしなくていいことばかりです。
将来やること（今は不要）
- GitHub Actions（CI） — pushのたびに自動テストを走らせる。ユーザーが増えてから
- Terraform — クラウドインフラをコードで管理。個人開発の初期には早い
- OpenTelemetry — パフォーマンス計測。Sentryで十分なうちは不要