JavaScript環境変数JSアプリで環境変数をロードする

ローカル開発のために環境変数を保存して、消費する方法
APIとサードパーティの統合には、開発者が環境変数や設定変数と呼ばれる設定データを使用する必要があります.これらの変数は、通常、CIツールや配置パイプラインのようなパスワード保護された場所に格納されますが、ローカルでアプリケーションを開発しているときにどのように使用することができますか?


TLドクター

ソースコントロールに環境変数を格納しない

用途dotenv あなたからのデータを読むには.envファイル

を作成します.

この短いチュートリアルでは、ローカル開発時に環境変数をコードに読み込む方法を説明します.主な利点は、APIキーなどの秘密は、アプリケーションを安全に保つためにソースコントロールにコミットされていないことです.

要件

JavaScriptアプリケーション

パッケージマネージャ(糸とNPMは大きい)

ノード7 +

変数を設定する
リポジトリのルートに「. env」というファイルを作成します.このファイルは「ドットファイル」と呼ばれ、通常のファイルとは異なり、通常はファイルブラウザに隠されています.
ほとんどのIDEはユーザが名前なしでファイルを作成することを可能にしますが、それがそうでないならば、あなたのアプリケーションのルートフォルダにあなたの端末とCDの上に向かう.

touch .env

次に、行キーで区切られた書式キー= valueで変数を設定します.

API_KEY=abcde
API_URL=https://my-api.com/api

最後に、確認してください.ENVファイルはリポジトリにコミットされません.これは、aを開く(または作成)することで実現できます.Gitignoreファイルとこの行の追加

.env # This contains secrets, don't store in source control

変数を消費する
インストールするにはdotenv 好みのパッケージマネージャを使用します.

# Using npm:
npm i dotenv

# Using yarn:
yarn add dotenv

あなたは今あなたから読んで準備ができている.envファイル.この行のコードをできるだけ早く追加します.反応アプリでは、通常のインデックスです.JSまたはアプリケーション.しかし、それは完全にあなたのセットアップにあります:

require('dotenv').config();

そして、それ!アプリケーションを介して環境変数へのアクセスが必要です.envオブジェクト.を呼び出すことでダブルチェックできます.

console.log(process.env);

すべてがうまくいけば、次のようになります.

{
 NODE_ENV: "development",
 API_KEY: "abcde",
 API_URL: "https://my-api.com/api"
}

🎉 今すぐあなたのアプリケーションで環境変数を使用する準備ができました!
今、私たちのそれらを作成する反応アプリを使用するには、キャッチがあり、私はそれが少し良く文書化された.

を使用して反応アプリ
フェイスブックcreate-react-app 少し異なる作品.上記の手順に従ってアプリケーションを排出していない場合は、すべて参照してください.それはCREATEの反応アプリは、アプリケーションがreactchen appchenのプレフィックスと変数を読み取ることができるためです.
それで、我々の変数を働かせるために、我々は我々を更新する必要があります.ENVファイル

REACT_APP_API_KEY=abcde
REACT_APP_API_URL=https://my-api.com/api

もう一度、プロセスを記録することによってあなたのセットアップを確かめてください.コンソールにenv :

{
 NODE_ENV: "development",
 REACT_APP_API_KEY: "abcde",
 REACT_APP_API_URL: "https://my-api.com/api"
}

そして、あなたは完了です😎

ヒント
変数に.ENVファイルは値の空白がない限り引用符を必要としません.

NO_QUOTES=thisisokay
QUOTES="this contains spaces"

それは良い練習を作成することです.環境変数サンプルファイルは、アプリケーションが期待する変数を追跡する.これは自分のサンプルファイルが現在のプロジェクトのように見えるものです.誰かがこれらのキーとURLを見つけることができるかもしれないところについて説明します.

CONTENTFUL_SPACE_TOKEN="see Contentful dashboard"
CONTENTFUL_API_KEY="see Contentful dashboard"
S3_BUCKET_URL="check AWS"
SHOW_DEBUG_SIDEBAR="if true, show debug sidebar"

更なる読書

Reading configuration in the environment in the 12-Factor App methodology

読んでくれてありがとう!環境変数をローカルに読み込む別の方法はありますか?私は下のコメントでそれを聞いてみたい!