https://a.storyblok.com/f/270183/1368x665/bf41915afb/25feb_dev-blog_java-enviormental-variables.png

Dotenvを使ったJavaScriptの環境変数の使い方

最終更新日 February 18, 2025

所要時間:1 分

はじめに

ソース・ファイルに機密情報をハードコーディングするのは、パスワードを付箋に書いてラップトップに置き、誰でも見られるようにするようなもので、あまり良い考えとは言えない!より安全で良い方法は 環境変数これは、APIキーやパスワードのような機密データを、コードベースの外に安全に保存するものです。

すべてのJavaScriptフレームワークが自動的に環境変数をインポートするわけではありません。 dotenv-のようなモジュールを使うのが良い方法だ。Dotenvは .envファイルで定義された変数を読み込み、Node.jsの process.envこのオブジェクトは、環境変数をキーと値のペア(すべての値は文字列として保存)としてグローバルに保存する役割を果たします。このセットアップにより、コード内で機密情報を公開することなく、アプリケーション全体で安全にアクセスできるようになります。

では、dotenvを使った環境変数の使い方を実践例で紹介しよう: WhatsAppメッセージの送信を使って を使った WhatsApp メッセージの送信です。!

Dotenvのインストール

ターミナルで以下のコマンドを実行して初期化する。 npmを初期化し、dotenvをインストールし、プロジェクトのgitリポジトリを初期化します:

// initialize npm on the project
npm init -y

// install dotenv
npm install dotenv --save

// initialize git repo
git init

Dotenvを使う

dotenvを使い始めるには、プロジェクトのルート・ディレクトリに .envファイルを作成する。このファイルに環境変数を格納する。チュートリアル WhatsAppメッセージ送信チュートリアルをご覧ください:

VONAGE_API_KEY="your-api-key"
VONAGE_API_SECRET="your-api-secret"
VONAGE_APPLICATION_ID="your-application-id"
VONAGE_PRIVATE_KEY="path/to/your/private.key"
TO_NUMBER="recipient-phone-number"
WHATSAPP_NUMBER="sender-phone-number"

注:変数にスペースがある場合は、引用符で囲んでください。

Vonage Messages APIでWhatsAppメッセージを送信

次に send-whatsapp-message.jsファイルを作成する。

dotenvを設定するアプリケーションのエントリーポイントとして、この行を追加する:

require('dotenv').config();

この行を追加して実行し、dotenvが機能していることを確認したら削除する:

console.log(process.env);

Node.jsで環境変数にアクセスするには process.envの後に変数名を続ける。例えば

const VONAGE_APPLICATION_ID = process.env.VONAGE_APPLICATION_ID;

残りのコードを追加する:

// initialize dependencies 
const VONAGE_APPLICATION_ID = process.env.VONAGE_APPLICATION_ID;
const VONAGE_PRIVATE_KEY = process.env.VONAGE_PRIVATE_KEY;

const TO_NUMBER = process.env.TO_NUMBER;
const WHATSAPP_NUMBER = process.env.WHATSAPP_NUMBER;

const { Vonage } = require('@vonage/server-sdk');
const { WhatsAppText } = require('@vonage/messages');

const vonage = new Vonage({
  applicationId: VONAGE_APPLICATION_ID,
  privateKey: VONAGE_PRIVATE_KEY,
});

// the logic
vonage.messages.send(
  new WhatsAppText({
    text: 'This is a WhatsApp Message text message sent using the Messages API',
    to: TO_NUMBER,
    from: WHATSAPP_NUMBER,
  }),
)
  .then((resp) => console.log(resp.messageUUID))
  .catch((error) => console.error(error));

このコードを実行すると、環境変数にアクセスしてメッセージを送信するはずだ:

node send-whatsapp-message.js

を呼び出すもうひとつの方法は、スクリプトの中で .envを呼び出すもうひとつの方法は、スクリプトの中で呼び出すことだ。つまり、スクリプトの先頭に require('dotenv').config()ファイルの先頭に send-whatsapp-message.jsファイルの先頭に書く必要はない。代わりに、プロジェクトの package.jsonというスクリプトを作ってください。 “dev” というスクリプトを作ってください:

"scripts": {
"dev": "node -r dotenv/config send-whatsapp-message.js"

スクリプトを実行しても、環境変数はそのまま取得される!

npm run dev

複数環境の管理

複雑なプロジェクトでは .envファイルが必要になります。次のようなツールがあります。 dotenv-cliのようなツールは複数の環境を管理するのに役立ちます。

例えば .envファイルを使うことができます:

  • .env.local

  • .env.production

それらを dotenv-cliCLIでロードする:

$ dotenv -e .env.production node send-whatsapp-message.js

安全に展開する

安全なデプロイのために .envファイルをソース管理にコミットすべきではありません!ファイルを除外するには .gitignoreを使って除外してください。

そのためには .gitignoreファイルを作成する:

.env

さて、git にコミットすると がプッシュされます。以外のすべてのファイルがリポジトリにプッシュされます。

結論

JavaScriptで環境変数を使う方法を学んだので、あなたのコードに個人情報をハードコーディングしたり、世界中の人が見られるようにprodにプッシュしたりするのをやめることができます!他にも環境変数を使ったベストプラクティスがありますか?もしあれば、ぜひ共有して タグをつけてください。- ぜひ聞かせてください!また、私たちのコミュニティ スラックでフォローしてください。 X以前はTwitterとして知られていました。ハッピー・コーディング!

シェア:

https://a.storyblok.com/f/270183/384x384/b68093ec17/diana-pham.png
Diana Phamデベロッパー・アドボケイト

ダイアナはVonageのデベロッパー・アドボケイト。新鮮な牡蠣を食べるのが好き。