環境変数の紹介と使用方法

設定をアプリケーションから分離する

UnsplashのAntoine Dautryによる写真

環境変数とは

コンピュータープログラミング言語の2つの基本的なコンポーネントは、変数と定数です。数学方程式の独立変数と同様に、これらはプログラムの結果を変更する値を取ります。変数と定数はどちらも、プログラムが計算で使用するデータを含む一意のメモリ位置を表します。 2つの違いは、実行中に変数値が変更される可能性があるのに対し、定数値は再割り当てできないことです。

環境変数は、その値がプログラムの外部で設定される変数であり、通常はオペレーティングシステムまたはマイクロサービスに組み込まれた機能を介して設定されます。環境変数は名前と値のペアで構成され、任意の数を作成して、ある時点で参照できるようにすることができます。

#Nasa Open Data PortalのMe石データセット
REACT_APP_METEORITE_LANDING_HOMEPAGE = "https://data.nasa.gov/Space-Science/Meteorite-Landings/gh4g-9sfh"
REACT_APP_METEORITE_STRIKE_DATASET = "https://data.nasa.gov/resource/y77d-th95.json"

アプリケーションの初期化中に、これらはprocess.envにロードされ、以下に示すように環境変数の名前のサフィックスによってアクセスされます。

fetch(process.env.REACT_APP_METEORITE_STRIKE_DATASET)
.then((response)=> {
  return response.json();
})
.then((strikesJSON)=> {
  this.setState({meteoriteStrikes:strikesJSON});
  this.setState({isDataLoaded:true});
});

実行時に、環境変数名への参照は現在の値に置き換えられます。この場合、process.env.REACT_APP_METEORITE_STRIKE_DATASETはその値「https://data.nasa.gov/resource/y77d-th95.json」に置き換えられます。

環境変数の主な使用例は、構成データの変更によるアプリケーションの変更と再リリースの必要性を制限することです。上記の例から、REACT_APP_METEORITE_STRIKE_DATASETのURLが変更された場合、ソースコードの変更、テスト、および変更されたアプリケーションの展開は不要です。

アプリケーションコードの変更とリリースは比較的複雑であり、実稼働環境に望ましくない副作用が生じるリスクが高くなります。 URLがアプリケーションではなく環境変数によって定義されている場合、変更プロセスは、新しいURLの有効性の確認、オペレーティングシステムコマンドを使用した対応する環境変数の更新、または構成ファイルの更新、および影響を受けるアプリケーション機能のテストで構成されますアプリケーションが期待どおりに動作することを確認します。

環境変数のユースケースには、次のようなデータが含まれますが、これらに限定されません。

  • 実行モード(実稼働、開発、ステージングなど)
  • ドメイン名
  • API URL / URI
  • 公開および秘密の認証キー(サーバーアプリケーションでのみ安全)
  • マーケティング、サポート、販売などのグループメールアドレス
  • サービスアカウント名

これらに共通するのは、データ値の変更がめったになく、アプリケーションロジックがそれらを可変変数ではなく定数のように扱うことです。

次に、ネイティブオペレーティングシステム、NPMパッケージdotenv、およびwebpackを使用して環境変数を使用する方法を見てみましょう。

NodeJSの環境変数

図1 — OS環境変数

バックエンドアプリケーションで環境変数を使用するには、オペレーティングシステムコマンドに依存して環境変数とその値を定義します。システム管理者は、コマンドラインインターフェイスを使用してこれらを定義できますが、通常はシェルスクリプトを使用して定義する方が理にかなっています。環境変数は通常、OS全体でグローバルにアクセスできず、通常はセッション固有です。たとえば、Linuxコマンドラインを使用します。

setenv REACT_APP_METEORITE_LANDING_HOMEPAGE = "https://data.nasa.gov/Space-Science/Meteorite-Landings/gh4g-9sfh"

実行時に、NodeJSは環境変数を自動的にprocess.envにロードして、アプリケーションで使用できるようにします。たとえば、fetch(process.env.REACT_APP_METEORITE_STRIKE_DATASET)。

環境変数の管理と操作は、オペレーティングシステムごとに異なります。また、これは、管理パネルを使用して環境変数の管理が実行されるHerokuなど、さまざまなマイクロサービス環境によって異なります。このため、アプリケーションで環境変数を使用する前に、プラットフォーム固有の要因を理解することが不可欠です。

これらの違いを最小限に抑える1つの方法は、環境変数を設定するオペレーティングシステムに依存しないPOSIX互換コマンドを提供するcross-env NPMパッケージを使用することです。

dotenvパッケージの環境変数

フロントエンドアプリケーションでの環境変数の使用のサポートは、ブラウザまたはJavascriptの「すぐに使える」機能ではありません。有効にするにはdotenvなどのパッケージが必要です。記録のために、フロントエンドアプリケーションとバックエンドアプリケーションの両方でdotenvを使用できます。

このパッケージの使用は、次のように簡単です。

「dotenv」からdotenvをインポートします。
dotenv.config();
console.log(process.env.REACT_APP_METEORITE_STRIKE_DATASET);

この手法では、データをソースコードから.envファイルの環境変数に移動することにより、データを外部化します。 .envファイル名を.gitignoreに追加すると、GitプッシュコマンドがGitHubリポジトリにアップロードできなくなります。パブリックリポジトリの場合は、誰でも使用できます。

図2 — .envファイルの使用

.envの環境変数はname = valueとしてフォーマットされ、#で始まる行はコメントとして扱われ、空白行は無視されます。例えば、

#Nasa Open Data PortalのMe石データセット
REACT_APP_METEORITE_LANDING_HOMEPAGE = "https://data.nasa.gov/Space-Science/Meteorite-Landings/gh4g-9sfh"
REACT_APP_METEORITE_STRIKE_DATASET = "https://data.nasa.gov/resource/y77d-th95.json"

ただし、Create React App(react-scripts)、Gatsby、GraphQL CLI、Node Lambdaなどの多くの一般的なパッケージには、すでにdotenvが含まれています。これらのパッケージのいずれかを既に使用している場合、dotenvはアプリケーションで使用できる可能性があります。たとえば、上記のコードスニペットは、React Appの作成によって生成されたアプリケーションからのものであり、環境変数の前にREACT_APP_が必要です。

Create React Appの場合、node_modules / react-scripts / config / env.jsはアプリケーションの起動時にprocess.envに.envファイルの内容を自動的に入力するため、dotenv.config()を呼び出す必要はありません。 Reactアプリの作成の例については、GitHubのMeteorite Explorerリポジトリを参照してください。

ブラウザ環境は安全ではないため、アプリケーションの秘密などの機密情報を公開しないように、アプリケーションは特別な注意を払う必要があります。フロントエンド環境を保護する方法の詳細については、「アプリケーション資産の保護:秘密を保護する方法」を参照してください。

webpackの環境変数

webpackは、ブラウザーで使用するために、アプリケーション内のさまざまなモジュール、リソース、およびアセットを一緒に変換、バンドル、またはパッケージ化するバンドラーです。 webpackの一般的な使用法の1つは、運用展開用のアプリケーションを準備することです。たとえば、Create React Appのビルドスクリプトはwebpackを使用して、アプリケーションの製品バージョンを含むビルドディレクトリを作成します。

webpackは環境変数の使用のサポートを実装していますが、webpackコマンドのオプションとして使用できます。例えば、

webpack --env.NODE_ENV = local

webpackコマンドで複数の--envオプションを指定することにより、複数の環境変数がサポートされます。これらは、webpack構成ファイル(webpack.config.jsなど)でenvとして参照されます。環境変数名の接尾辞。たとえば、console.log(env.NODE_ENV)。

webpack構成ファイルは、他のJavascriptモジュールと同様に、process.envを使用してオペレーティングシステムによって定義された環境変数を参照する場合もあります。 Create React Appのwebpack.config.prod.jsのこの例を検討してください。

//ソースマップはリソースを大量に消費し、大きなソースファイルのメモリ不足の問題を引き起こす可能性があります。
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP!== 'false';

まとめ

「抽象化により、世界はより複雑で可変的な関係になります。無に見えることから、美しさ、代替の地形、さ、強烈な現実を抽出することができます。」— Jerry Saltz

環境変数を使用することは、コードから頻繁に変更されないデータを分離することにより、アプリの構成を容易にする1つの手法です。しかし、この手法は単純かもしれませんが、アプリケーションの種類(フロントエンドまたはバックエンド)やオペレーティング環境(オペレーティングシステムまたはマイクロサービス)などの考慮事項に影響されます。

環境変数の活用は簡単ですが、それらのニュアンスを理解し、それらを効率的かつ安全に利用できることは、経験のないWeb開発者を経験のない開発者と区別する1つの要因です。他の技術と同様に、トリックは何かを使用する方法を知らず、いつ使用するかを知ることです。