Zenn
⚙️

.envを初心者が早いうちから理解するための記事

2024/10/30に公開
初心者
Web
env
tech

読者想定

  • ぜんぜんわからない。俺たちは雰囲気でenvを使っているって人
  • いつもチーム開発でわからないままコピペで.envに色々貼ってる人

はじめに

チーム開発はゴリゴリにインプットしたノウハウをアウトプットとする良い機会ですが、envをよく知らずに突き進んでしまうのはちょっと危険です。なぜかというとenvはうっかりすると個人情報を全世界にばら撒きかねないからです。しかも場合によってはチームメンバーの情報をばら撒きかねないので危ないわけです。とはいえまだ朧げで曖昧な理解な方もいると思います。ここからは詳しくenvとその周辺を学んでいきましょう。

そもそもenvとはなんなのか

.envファイルは、アプリケーションが使用する環境変数を管理するためのファイルです。環境変数とは、アプリケーションが実行される環境に応じて変わる情報を外部から提供するための設定値のことです。簡単に言えば、このプロダクトでのみどこかしかで使うデータを入れた変数をいいます。APIキーは典型例そのものですね。これによりアプリケーションの動作や設定を柔軟に制御でき、個人情報を一つのファイルでまとめて管理できます。加えて、誤ってアップロードしてしまうリスクも避けることができます。

要するに

ここまでをまとめて例え話をすると、家の中に鍵がありそれらを家中バラバラの位置に置いておくのは危ないし、めんどくさいです。なのでキーケースにあらゆる大事な鍵をまとめて入れておけば鍵の出し入れも簡単ですし、安全に保管しやすくなりますね。この話におけるキーケースがenvというわけです。

個人情報が発生する瞬間

初心者の方が学習目的や走り出しで作成するプロダクトでも外部に漏らせない情報は往々にして出てきます。具体的な事例を見ていきましょう。

  • APIキーを含むサービスの利用
    例えば、Google Maps APIやFirebase、その他データベース使用する場合にAPIキーが必要になるケースです。与えられたAPIキー等の情報をコピペしてそのままプロダクトを作成し、githubに挙げてしまうと全世界に作った機密情報が筒抜けになってしまいます。
    以下はFirebaseで簡単なデータベースを作成する際のコードを普通のjsに貼った例です。
firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "***********",
  authDomain: "******************",
  projectId: "***********:",
  storageBucket: "**************:",
  messagingSenderId: "***********",
  appId: "*:****************:******"
};

const app = initializeApp(firebaseConfig)
const db = getFirestore(app)

export default db;

このままでは危険なことがなんとなくでもわかりますね。
そのほかにも以下のような個人情報を扱う事例があります。

  • サードパーティの認証情報
    FirebaseやAWSの認証情報やクライアントID・シークレットの設定。

  • メールサービスの利用
    SendGridやMailgunなどのメール送信サービスを使用する場合のAPIキーや秘密鍵。

  • アプリのリリース時に必要なシークレットキー
    例えば、JWT（JSON Web Token）に使用するシークレットキーや、パスワードの暗号化で使うキーの管理。

ではこのような情報を守るべくenvの使い方を見ていきましょう。

envの使い方

まず.envの基本的な構造について理解し、その次に記入の仕方を見ていきましょう。
この記事を読んだ後に、今までなんとなく貼っていた.envの中身を見てみると意味がわかって面白いかもしれませんね。

.envファイルの基本構造

.envファイルは通常、各行に「キー＝値」の形式で情報が記述されます。この形式によって、アプリケーションが必要な環境変数を読み取る際に、簡単に値を取得できるようになっています。例えば、以下のような構成です：

.env
# データベースの接続情報
DATABASE_URL=postgres://username:password@localhost:5432/mydatabase

# APIキー
API_KEY=your_api_key_here

# セッションシークレットキー
SECRET_KEY=my_secret_key

このように、.envファイルには各種キーとそれに対応する値が並び、アプリケーションからはそれらのキーを使って値にアクセスできるようになります。

.envファイルの記述方法

一般的なNode.jsプロジェクトでは、.envファイルを簡単に使うために「dotenv」というパッケージがよく利用されます。このパッケージをインストールして、.envファイルの内容をプロジェクトにロードすることで、環境変数をコード内からprocess.env経由で簡単に使用できます。
つまりは先ほど書いた事例を.envで管理した後に書くとこうなるわけです。

Node.jsプロジェクトでdotenvを使う場合：

const firebaseConfig = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID
  };

このように、.envファイルを活用することで、環境に依存した設定値を管理しやすくし、安全で効率的なプロジェクト管理が可能になります。ちなみにキーや値の記述方法は使うモジュールやフレームワークによって少し変わります。よく使うもので記述が違うもので言えばVite, Next.jsがあります。

.envのバージョン管理の注意点

ここからは.envを扱っていく上での注意点や周辺の知識を少しだけ押さえていきましょう。

.envファイルには先ほどから言っている通り個人情報が含まれているため、基本的にはGitで追跡しないようにするのが一般的です。そのために.gitignoreを使いましょう。これにより、万が一の公開リポジトリへの誤アップロードや、意図しないアクセスから機密情報を守ることができます。

.gitignoreファイルの設定

.envファイルを誤ってコミットしないように、プロジェクトの.gitignoreファイルに追加します：

.gitignore
.env

しかし作成途中で.envを追加してもきちんと無視されないのでその際はgitを初期化する必要があります。下記のコマンドをターミナルに打ち込みましょう。

git init

これでgitが初期化されきちんと無視されます。ちょっとフォルダが薄くなってたら成功です。

.env.exampleファイルの作成

チームメンバーや他の開発者に.envファイルの内容を共有する際、直接的な機密情報は含まず、設定項目の一覧だけを記載した.env.exampleファイルを用意します。このファイルには、機密情報を除いた環境変数のサンプルのみが含まれ、例えば次のようになります：

.env.example
DATABASE_URL=your_database_url_here
API_KEY=your_api_key_here
SECRET_KEY=your_secret_key_here

他の開発者は.env.exampleを参考に、自分のローカル環境用の.envファイルを作成することができます。

おわりに+おまけ

今回は文章がだいぶ多めになってしまいましたが、個人的にちょっとナイーブなところなのでなんか文字数がめっちゃ増えました。envは単に.envだけでなく.env.local等の様々な種類があります。
なれてきたら状況に合わせて使い分けていきましょう。
この記事が今後の参考になれば幸いです。訂正あったらコメントください。

Discussion