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.7.21 解凍バージョンのインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.21の解凍版をダウンロードしてインストールする詳細な手順を記録して...

Dockerのインストール方法とDockerの4つのネットワークモードの詳細説明

1. Dockerをインストールするyum -y install docker-ioインストールが完...

位置のいくつかの巧妙な応用の詳細な説明:sticky スティッキーポジショニング

背景: position:sticky はスティッキー配置とも呼ばれます。スティッキー配置の要素は、...

Vue 監視プロパティと計算プロパティ

目次1. 監視プロパティを監視する1. ショッピングカート2. すべて選択し、すべて選択解除する2....

初心者向けに Docker に Jenkins をインストールする方法を詳しく説明したチュートリアル

Jenkins はオープンソース ソフトウェア プロジェクトです。Java をベースに開発された継続...

クロスドメインの問題を解決するためのNginxの実用的な方法

フロントエンドとバックエンドを分離し、nginxを使用してクロスドメインの問題を解決するフロントエン...

SpringBoot でマイクロサービスを構築するために Docker を使用した実際の記録を分析する

それは何ですか? Spring Boot は、Spring オープンソース組織のサブプロジェクトであ...

MySQL 8.0.12 インストール グラフィック チュートリアル

MySQL8.0.12 インストールチュートリアルをみんなで共有します。 1. インストール1.イン...

Ansible を使用した Nginx のバッチ デプロイのサンプル コード

1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...

Linux で特定のプログラムを見つけるための whereis の例の詳細な説明

Linuxは特定のプログラムを見つけますwhereis コマンドは主にプログラム ファイルを検索し、...

overflow:autoの使い方の詳しい説明

本文に入る前に、オーバーフローとフレックスレイアウトの使い方をいくつか紹介します。 overflow...

mysql5.7.20 のインストールと設定方法のグラフィック チュートリアル (mac)

MySQL 5.7.20のインストールと設定方法のグラフィックチュートリアルをあなたと共有します1...

MySQLのトランザクション管理操作の詳細な説明

この記事では、MySQL のトランザクション管理操作について説明します。ご参考までに、詳細は以下の通...

React Native スキャフォールディングの基本的な使い方の詳細な説明

プロジェクトを構築する対応するパスでコマンドラインを実行します: react-native init...