こんにちは、白々さじきです。
今回は、ViteプロジェクトでAPIキーを安全に管理する方法についてまとめます。
Google Maps APIキーなどをコードに直接書いてGitHubにpushすると、キーが公開されてしまいます。.env ファイルを使うことでキーをコードから分離して管理します。
結論
APIキーは .env ファイルに書き、変数名は VITE_ で始めます。コードでは import.meta.env.VITE_変数名 で読み取ります。.env は .gitignore に追加してGitの管理対象から外します。
.env ファイルの作り方
Viteプロジェクトの場合、.env ファイルは vite.config.ts と同じ場所に置きます。
packages/web/
.env ← ここに置く
vite.config.ts
src/# packages/web/.env
VITE_GOOGLE_MAPS_API_KEY=AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXX重要なルール：変数名は VITE_ で始める
Viteはセキュリティのため、VITE_ で始まる変数のみをフロントエンドのコードに公開します。VITE_ のない変数はコードから読み取れません。
# NG: VITE_ がないとコードから読み取れない
GOOGLE_MAPS_API_KEY=AIzaSyXXXXXX
# OK: VITE_ で始める
VITE_GOOGLE_MAPS_API_KEY=AIzaSyXXXXXXコードで環境変数を読み取る
Viteは import.meta.env というオブジェクトに .env の内容を注入します。
// src/App.tsx
const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;import.meta.env には他にも便利な値が入っています。
| キー | 内容 |
|---|---|
import.meta.env.MODE | "development" or "production" |
import.meta.env.DEV | 開発環境なら true |
import.meta.env.PROD | 本番環境なら true |
import.meta.env.VITE_* | 自分で追加した変数 |
TypeScriptの型エラーが出る場合
import.meta.env を使うとTypeScriptが型を認識できずエラーになることがあります。tsconfig.json の compilerOptions.types に "vite/client" を追加します。
{
"compilerOptions": {
"types": ["vite/client"]
}
}.gitignore に追加する
.env ファイルをGitの管理対象から外します。
# .gitignore
.env
.env.local
.env.*.local.env をコミットしてしまうとGitHubにAPIキーが公開されます。git status で .env がトラッキングされていないことを確認する習慣をつけましょう。
複数環境での使い分け
Viteは複数の .env ファイルを使い分けられます。
| ファイル名 | 読み込まれるタイミング |
|---|---|
.env | 常に読み込まれる |
.env.development | vite dev のとき |
.env.production | vite build のとき |
.env.local | 常に読み込まれる（.gitignore推奨） |
個人のAPIキーなど、チームメンバーと共有しない設定は .env.local に書くのが慣例です。
まとめ
- APIキーはコードに直接書かず
.envファイルに書く - Viteでフロントエンドから読み取るには変数名を
VITE_で始める - コードでは
import.meta.env.VITE_変数名で読み取る .envは必ず.gitignoreに追加する
「GitHubにpushしたらAPIキーが漏れた」という話はよく聞きます。最初から .env を使う習慣をつけておくと安心です。
参考リンク
サポートのお願い
下記リンクからお買い物いただけると、ブログ運営のための費用が増え、有料サービスを利用した記事作成が可能になります。ご協力よろしくお願いします！
コメント