process.env.NODE_ENV 本番環境モードを設定する方法

process.env.NODE_ENV 本番環境モードを設定する方法

始める前に、process.env.NODE_ENV にはデフォルトで開発と本番の 2 つの状態しかないことを強調しておきます。開発はローカル開発、つまりローカルホスト環境 (ローカル開発) を指し、本番は任意のサービス (dat、uat、本番環境のいずれでも) で公開されたサービスを表します。Node は、手動で指定しない限り、サービスがテストか正式なものかを認識しません。通常はオンライン環境であると考えられます。したがって、開発はローカル開発環境を表し、本番はオンライン環境 (dat、uat、本番環境などを含む) を表すと考えることができます。

なぜこの点を強調するのでしょうか?

実際に process.env.NODE_ENV の development を使用して dat や uat などのオンライン テスト環境を表す人もいるため、development がローカル開発環境を表すことが特に強調されています。

最近、システムを会社のシングルサインオンに接続しました。ログインに成功した後にシステムのメインページに戻るために、テストとサンドボックス用のドメイン名を申請しました(以前はIPアドレスで直接ログインしていました)。ホストはローカル開発用に構成されています。接続後、シングルサインオンで渡されるジャンプアドレスを毎回修正する必要があるという非常に面倒な点が分かりました。開発中は開発ドメイン名で書き、テスト中はテストドメイン名に変更、サンドボックスに入るときはサンドボックスにジャンプするためのドメイン名に変更、オンラインになるときはオンラインドメイン名に変更する必要があります。特にテスト段階では、開発とテストの切り替えが非常に面倒です。
そこで、設定ファイルとして記述し、環境に応じて異なる設定をロードして、何度も変更する必要がないようにしたいと考えました。このとき、process.env が頭に浮かびました。

process.env の概要

プロセス オブジェクトは、現在の node.js に関する情報を提供し、現在の node.js の関連プロセスを制御するグローバル変数です。これはグローバル変数であるため、require() を必要とせずにノード アプリケーションで常に使用できます。

process はオブジェクトなので、env は当然その属性の 1 つとなり、ユーザー環境情報を含むオブジェクトを返します。ターミナルで node と入力した後、process.env と入力すると、印刷された情報を確認できます。

主人公が登場する process.env.NODE_ENV

NODE_ENV は process.env オブジェクトの既存のプロパティではないので、どのように追加されたのでしょうか?

例を見てみましょう:

package.json では次のようになります。

{
  "名前": "ユンノビル",
  "バージョン": "2.0.0",
  「説明」: 「Taibao 標準モバイル製品 2.0、vue ベース」
  "メイン": "yunprod.js",
  「スクリプト」: {
    "ビルド": "クロス環境 NODE_ENV=production ノード yunprod.js ビルド",
    "dev": "ノード yunprod.js dev"
  }
  ...
}  

npm run build script コマンドを実行すると、cross-env NODE_ENV=production node yunprod.js build が実行され、NODE_ENV が production に設定されるため、process.env.NODE_ENV が production に設定されます。

したがって、process.env.NODE_ENV は、スクリプト コマンドを実行するときに追加されるグローバル環境変数です。

process.env.NODE_ENV は、現在の開発段階を決定するために使用されます。通常、本番ステージは production に設定され、開発ステージは developer に設定され、スクリプトで process.env.NODE_ENV が読み取られます。
スクリプトを実行するときに、次のように環境変数を変更し、package.json ファイルのスクリプトにコマンドを追加できます。

NODE_ENV=プロダクションノードbuild.js

ただし、Windowsを使用する学生がコードをダウンロードすると、Windowsの設定が異なるため、このコマンドはエラーを報告します。

NODE_ENV=production を設定する node build.js

しかし、異なるコンピューターで異なる設定を行うと、確実に機能しなくなるため、cross-env が役に立ちます。
cross-envはプラットフォーム間で環境変数を設定および使用できます。

npm インストール --save-dev クロス環境

次にcross-envを通して設定します

クロス環境 NODE_ENV=production node build.js

この設定後、スクリプトではprocess.env.NODE_ENVを使用できますが、モジュールでは使用できません。モジュールで直接使用するには、いくつかの設定が必要です。

webpack 4 以降では、モード オプションを使用できます。

モジュール.エクスポート = {
  モード: 'production'
}

ただし、webpack 3 以下では DefinePlugin を使用する必要があります。

var webpack = require('webpack')

モジュール.エクスポート = {
  // ...
  プラグイン: [
    // ...
    新しい webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

こうすれば直接使える
ここで、環境変数に基づいてモジュール内の異なるURLを設定する必要があります。

url = '' とします。
 process.env.NODE_ENV === 'テスト'の場合{
   url = 'http://my.test.cn';
 } そうでない場合 (process.env.alpord === 'alpord') {
   url = 'http://my.alpord.cn';
 } そうでない場合 (process.env.NODE_ENV === 'production') {
   url = 'http://my.product.cn';
 } それ以外 {
   url = 'http://my.develop.cn';
 }

または

url = '' とします。
process.env.NODE_ENV === 'production'?url = 'http://my.product.cn':url = 'http://my.test.cn';

これで、process.env.NODE_ENV 本番環境モードの設定方法についての説明は終了です。process.env.NODE_ENV 本番環境モードの設定の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • webpack process.env.NODE_ENV 構成の詳細な理解

<<:  Dockerはターミナルで中国語を入力できない問題を解決します

>>:  MySQL 8.0.21.0 コミュニティ エディションのインストール チュートリアル (詳細な図解)

推薦する

MySQL 5.6 マスタースレーブエラー報告の実践記録

1. 問題の症状バージョン: MySQL 5.6、従来の binlog ファイルと pos 方式を使...

Gitコミットログの変更方法のまとめ

ケース1: 最後の提出とプッシュなし次のコマンドを実行します。 git コミット --amend g...

webpackのモバイル適応ソリューションの概要

目次レムフォルクスワーゲンサードパーティのUIフレームワークに適応する結論モバイル開発における最も一...

CSSスタイルで実現されるHTML背景色のグラデーション効果

エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...

Docker は固定コンテナ IP アドレスを実現するためにカスタム ネットワークを作成します。

デフォルトのブリッジ ネットワークのため、コンテナーを再起動すると IP アドレスが変更されます。シ...

JavaScriptのイベントループの仕組みの分析

目次序文: 1. イベント ループとタスク キューの理由: 2. イベントループメカニズム: 3. ...

ReactプロジェクトにSCSSを導入する方法

まず依存関係をダウンロードします yarn sass-loader ノード sass を追加します次...

JS ネイティブ 2048 ゲーム ソース コード共有 (インターネットの最新情報)

最近、アルゴリズムについて学んでいて、アルゴリズムで動く小さなゲームに出会いました。そのコードは次の...

シンプルなショッピングカートの最も完全なコード分析を実装する JavaScript (ES6 オブジェクト指向)

この記事では、シンプルなショッピングカートを実装するためのJavaScriptの具体的なコードを参考...

XHTML におけるタイトルタグと段落タグの使用に関する詳細な説明

XHTML 見出しの概要Word 文書を作成するときは、「第 1 章」、「1.2.1」などのタイトル...

JSメモリ空間の詳細な説明

目次概要1. スタックとヒープ2. 変数オブジェクトと基本データ型3. 参照データ型とヒープメモリメ...

WeChatアプレット認証ログインを処理するエレガントな方法

序文WeChat ミニプログラム プロジェクトでユーザー情報を取得し、ユーザー ログインを実装する場...

MySQL クラスター化インデックスのページ分割原理の分析例

この記事では、MySQL クラスター化インデックスのページ分割を例を使って説明します。ご参考までに、...

JavaScript の一般的なステートメント ループ、判定、文字列から数値

目次1. スイッチ2. whileループ3. Do/Whileループ3. 文字列を数値に変換する1....

一般的なCSS3アニメーションの実装方法

1. 何ですかCSS アニメーションは、CSS を使用して拡張マークアップ言語 (XML) 要素をア...