私は個人的に、process.envがクライアントで利用できないことについてあまり心配しません。 'window'がサーバーで使用できないことをすでに知っている必要があります。 process.envの動作が逆になることは私には理にかなっています。 （envを持つノードプロセスはなく、ブラウザーは私が知っているenv変数を公開しません）私はprocess.envをサーバーシークレットが終わる可能性のある場所だと考えているので、むしろそうだったと思いますデフォルトでは、クライアント側では使用できません。

それが私次第だった場合、process.env.RAZZLE_INLINED_XXXXXX変数はビルド中にコンパイルされ（そしてクライアントではインラインDefinePluginの文字列として利用可能）、それ以外のものはサーバー側でのみ利用可能になります。

NODE_ENVは、コードが実行されている環境のような変数ではなく、ビルドの説明として主に使用されるため、インライン化することもできます。これを行うには、パフォーマンス上の理由もいくつかあります。

PORTとHOSTが実行時に可変であるという考えが好きです。 異なる環境で同じビルドアーティファクトを実行している可能性があります。

闘争を確認することができます。 現在の動作は私が期待したものではなく、特にawsにupしてデプロイするときに私をつまずかせました。 razzle.config.jsカスタマイズして、すべてのrazzle固有の変数の前にRAZZLE_XXXを付け、コンパイル時にそれらを文字列化するようにしました。 残りはprocess.env.XXX利用できません。 process.env介してランタイム変数が使用できないことについても@gregmartynに同意します。

既存のReactプロジェクトでRazzleをセットアップしようとしたときに、この問題に直面しました。 ポートは実行時にオーバーライドできず、他のprocess.env変数はサーバーで使用できません。

ビルド時の現在の動作：

process.env.PORT
process.env.NODE_ENV;
process.env.ASSETS_MANIFEST;
process.env.HOSTING_SET_VARIABLE;

クライアントとサーバーの両方になります：

3000;
'development';
'/Users/[...]/build/assets.json';
undefined;

これにより、クライアントとサーバーがまったく同じプロセス環境を使用できるようになりますが、実行時にオーバーライドしたり、他の環境変数を使用したりすることはできなくなります。

完全な下位互換性が必要な場合は、ビルド時にこれにトランスパイルする必要があります（サーバー上では、クライアントは同じままでかまいません）。

process.env.PORT || 3000;
process.env.NODE_ENV || 'development';
process.env.ASSETS_MANIFEST || '/Users/[...]/build/assets.json';
process.env.HOSTING_SET_VARIABLE;

このようにして、クライアントとサーバーの両方でprocess.env.PORTを使用できます。 デフォルトは3000になります。

razzleがPORT=80で_built_の場合、クライアントはprocess.env.PORTを80にトランスパイルし、サーバーはそれをprocess.env.PORT || 80にトランスパイルします。 これにより、現在と同じ動作になります。

razzleがPORT=81 _run_の場合（ 80ビルドされている間）、クライアント環境変数は80ままですが、サーバー変数は81ます。

もちろん、この動作は予期しない動作につながる可能性がありますが、完全な下位互換性を維持しながら、process.envの最も柔軟な使用法を提供します。 ポートは実行時にサーバー上で引き続き上書きでき、ホスティングプラットフォームによって設定された他の環境変数はサーバー上でそのまま機能します。

ここでの根本的な問題は、Razzleが現在、複数の異なる機能を1つのオブジェクトにパックし、既存の機能を根本的に変更しようとしていることだと思います。

それはしようとしている：

1. パフォーマンス上の理由から、process.env変数を定数に変換します（https://webpack.js.org/plugins/define-plugin/#usageの縮小例とhttps://github.com/nodejs/node/issuesのnodejsの速度低下を参照してください）。 / 3104）
2. これらの定数をサーバーとクライアントの両方で使用できるようにして、アイソメコードの心配が少なくなるようにします。

問題：

• process.envは環境_変数_用です。 それを定数のセットに変えると、期待される動作が変わります。
• process.envには、パスワードなどの機密情報が含まれていることが多いため、クライアントと共有するデータの優れたソースではありません。 部分的に共有され、部分的に共有されていない場合、開発者は、この1つ（process.env）がネイティブのように動作しないだけでなく、キーのプレフィックスによっても動作が異なることを知っている必要があります。
• ビルド時に定数に変換されます。これは、他のコンテキストでの環境変数の動作とは異なります。 たとえば、Dockerは、ビルド時変数（ビルド自体が実行場所に応じて変数情報を必要とする場合に役立ちます）と環境変数（1つのビルド済みイメージが異なる環境にデプロイされる場合に役立ちます）を区別します。 Elastic Beanstalk、Heroku、他。 同じことをする。
• 提案された「RAZZLE_RUNTIME_」プレフィックスは自明ではありません。 クライアント側で利用可能であり、変数ではないことを伝える必要があります。 「INLINED_」はそれをカバーしていると思います。インライン化は、ビルド時に発生する何かを指すために一般的に使用されるためです。 完璧ではありませんが（ "ISOMORPHIC_INLINED_"？）、短くしようとしています。

私の好みは、この機能をさまざまな部分に分割し、process.envをまったく改ざんしないことです。
DefinePluginは、razzle.config.jsのようなファイルを呼び出して、ビルド定数を取得できます。
ReduxがconfigureStore（window .__ PRELOADED_STATE__）で行うのと同様のパターンを使用して、サーバーからクライアントにデータを渡すことをお勧めします。

下位互換性のために、アップグレードノートは昔ながらの方法を定義するサンプルrazzle.config.jsを提供することができます。

補遺の1つ：「process.envをまったく改ざんしないように」と言いました。 しかし、上記のコメントから、パフォーマンス上の理由からprocess.env.NODE_ENVに例外があり、「NODE_ENV」自体が一般的に「NODE_ENV =本番環境はこれが最適化されたビルドであることを意味する」という意味を帯びていることがわかりました。

@gregmartynパフォーマンスを最適化するためにNODE_ENVを設定し、現在機能しているbabelプリセットを使用する必要があります。 envをいじる最初の理由は、プロジェクトがすでに開始された後にSSRが追加されることが多いため、CRAからの移行をはるかに簡単にすることでした。 他のプロジェクトでもCRAを使用しているため、ビルドツールが（わずかに）簡素化されます。

うん; NODE_ENVが有用な例外であることに同意しました。 それはそれ自体のものであり、ビルドと密接に関連しているので、驚くことではありません。 カスタムSSRソリューションからCRAをスキップしたので、CRAがどのように動作するかについてはよくわかりません。 これもあちらの問題のようです： https ：

CRAアプリのランタイムコードはサーバー上でまったく実行されないため、これはCRAよりもRazzleにとって大きな問題だと思います。 CRAは、クライアント側のコードに関する限り、それ以外の場合は空になるため、process.envを使用して必要な処理を実行できます。 一方、RazzleはSSRのExpressを開始し、そのコードは、process.envがノードランタイム環境変数のフルセットにアクセスできる通常のセマンティクスを持っていることを合理的に期待します。 Process.envはサーバー上で実際の意味を持っているため、CRAが別のユースケースにそれを採用したのは残念です。 「cra.inlines」のような「process.env」の代わりに他の名前を使用することもできます。 代わりに、同形コードは、クライアント側のみを考慮した場合に行われた決定に見舞われます。

RAZZLE_XXX環境変数はすべてクライアントで使用可能になっていることに注意してください。

クライアントに送信せずに機密性の高い環境変数を使用するにはどうすればよいですか？

同形コードで参照しない限り、クライアントには送信されません。

@jaredpalmerおそらく、この問題はafterjsに固有のものですか？ 私はサーバーコードでそれらを参照しているだけです。

RAZZLEプレフィックスなしで環境変数を定義する機能への投票を追加したいと思います。 少なくとも、サーバー側でprocess.envを消去しないでください。これにより、 dotenvを使用してサーバー側の環境変数を読み込むことができなくなります。 これは、アプリケーション環境について行うにはあまりにも煩わしい仮定のようです。

razzleが現在どのように環境変数をクライアントとサーバーに注入しているかについてはよくわかりませんが、クライアントにサーバー固有のものは必要ないでしょう。 残念ながら、これは私にとって今のところ一種の取引破りです。

同形反応アプリの提案されたソリューションをhttps://github.com/jaredpalmer/razzle/issues/477#issuecomment-363538712から再投稿してい

主な概念は、ランタイム環境変数を適切に設定するために、サーバー実行の直前に実行時に挿入されるコンパイル時にプレースホルダーを使用することです。 このソリューションは、Dockerコンテナーでサーバーを実行するためのものですが、おそらくこのRFCに適合させることができます。

このソリューションでは、RAZZLE_XXXX環境変数が一致し、HOST、PORT、およびREDIS_URLとともに挿入されることに注意してください。

私は個人的にこの問題に苦労しており、この問題の解決策を見つけるために数時間を費やしています。

これはwebpackのコンパイルに固有のものであり、それ自体を驚かせることとは関係ありません。

create-react-appがこれをどのように処理するかを調べ、2つのプロジェクト間でjavascriptとrubyコードを移植した後、次のソリューションを使用して、razzletypescript反応アプリをherokuのDockerコンテナーに正常にデプロイしました。

env.ts

このスクリプトは、ランタイム環境を処理するためのモジュールとして使用されます。

export interface EnvironmentStore {
  NODE_ENV?: string;
  [key: string]: string | undefined;
}

// Capture environment as module variable to allow testing.
let compileTimeEnv: EnvironmentStore;
try {
  compileTimeEnv = process.env as EnvironmentStore;
} catch (error) {
  compileTimeEnv = {};
  // tslint:disable-next-line no-console
  console.log(
    '`process.env` is not defined. ' +
    'Compile-time environment will be empty.'
  );
}

// This template tag should be rendered/replaced with the environment in production.
// Padded to 4KB so that the data can be inserted without offsetting character
// indexes of the bundle (avoids breaking source maps).
/* tslint:disable:max-line-length */
const runtimeEnv = '{{RAZZLE_VARS_AS_BASE64_JSON__________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________}}';
/* tslint:enable:max-line-length */

// A function returning the runtime environment, so that
// JSON parsing & errors occur at runtime instead of load time.
export const loadRuntimeEnv = (): EnvironmentStore => {
  let env;
  if (typeof env === 'undefined') {
    if (compileTimeEnv.NODE_ENV === 'production') {
      try {
        env = JSON.parse((Buffer.from(runtimeEnv.trim(), 'base64').toString()));
      } catch (error) {
        env = {};
        const overflowsMessage = runtimeEnv.slice(32, 33) !== null;
        // tslint:disable-next-line no-console
        console.error(
          'Runtime env vars cannot be parsed. Content is `%s`',
          runtimeEnv.slice(0, 31) + (overflowsMessage ? '…' : '')
        );
      }

    } else {
      env = compileTimeEnv;
    }
  }
  return env;
};

export default loadRuntimeEnv;

利用方法：

import { loadRuntimeEnv, EnvironmentStore } from './env';
const env: EnvironmentStore = loadRuntimeEnv();

const serverHost: string =env.RAZZLE_SERVER_HOST || 'localhost';

docker-start.js

このスクリプトは、server.jsの代わりにエントリポイントとして使用され、{{RAZZLE_VARS_AS_BASE64_JSON ___...}}プレースホーダーに実際のランタイム環境変数を挿入するために使用されます。

require('newrelic');
const logger = require('heroku-logger');
const path = require('path');
const fs = require('fs');

const PLACEHOLDER = /\{\{RAZZLE_VARS_AS_BASE64_JSON_*?\}\}/;
const MATCHER = /^RAZZLE_/i;

const InjectableEnv = {

    inject: function(file, ...args) {

        const buffer = fs.readFileSync(file, { encoding: 'utf-8' });
        let injectee = buffer.toString();

        const matches = injectee.match(PLACEHOLDER);
        if (!matches) {
            return;
        }

        const placeholderSize = matches[0].length;

        let env = InjectableEnv.create(args);
        const envSize = env.length;
        const newPadding = placeholderSize - envSize;
        if (newPadding < 0) {
            console.log('You need to increase your placeholder size');
            process.exit();
        }
        const padding = Array(newPadding).join(' ');
        env = InjectableEnv.pad(padding, env);

        const injected = injectee.replace(PLACEHOLDER, env);

        fs.writeFileSync(file, injected, { encoding: 'utf-8' });
    },

    create: function() {

        const vars = Object.keys(process.env)
            .filter(key => MATCHER.test(key))
            .reduce((env, key) => {
                env[key] = process.env[key];
                return env;
            }, {});

        vars.NODE_ENV = process.env.NODE_ENV;

        if (typeof process.env.HOST !== 'undefined' && typeof vars.RAZZLE_SERVER_HOST === 'undefined') {
          vars.RAZZLE_SERVER_HOST = process.env.HOST;
        }

        if (typeof process.env.PORT !== 'undefined' && typeof vars.RAZZLE_SERVER_PORT === 'undefined') {
          vars.RAZZLE_SERVER_PORT = process.env.PORT;
        }

        if (typeof process.env.REDIS_URL !== 'undefined' && typeof vars.RAZZLE_REDIS_URL === 'undefined') {
          vars.RAZZLE_REDIS_URL = process.env.REDIS_URL;
        }

        return Buffer.from(JSON.stringify(vars)).toString('base64');
    },

    pad: function(pad, str, padLeft) {
        if (typeof str === 'undefined')
            return pad;
        if (padLeft) {
            return (pad + str).slice(-pad.length);
        } else {
            return (str + pad).substring(0, pad.length);
        }
    }
}

const root = process.cwd();
const serverBundle = path.resolve(path.join(root, '/build/server.js'));

if (fs.existsSync(serverBundle)) {
    logger.info('Injecting runtime env');
    InjectableEnv.inject(serverBundle);
    logger.info('Launching server instance');
    require(serverBundle);
}

Dockerfile

# You should always specify a full version here to ensure all of your developers
# are running the same version of Node.
FROM node:8.9.4

ENV NODE_ENV=production \
    REACT_BUNDLE_PATH=/static/js/vendor.js \
    PATH=/app/node_modules/.bin:$PATH \
    NPM_CONFIG_LOGLEVEL=warn

RUN curl -o- -L https://yarnpkg.com/install.sh | bash

# use changes to package.json to force Docker not to use the cache
# when we change our application's nodejs dependencies:
COPY package.json yarn.lock /tmp/
RUN cd /tmp \
  && yarn install --production=false --pure-lockfile \
  && mkdir -p /app \
  && cp -a /tmp/node_modules /app \
  && yarn cache clean \
  && rm -rf *.*

# From here we load our application's code in, therefore the previous docker
# "layer" thats been cached will be used if possible
WORKDIR /app
ADD . /app

RUN yarn build

EXPOSE 3000

CMD ["node", "docker-start.js"]

オーバーフローメッセージの処理は終了していませんが、これがお役に立てば幸いです。

参照：

create-react-app用のHerokuビルドパック
create-react-app用のHerokuBuildpackの内部レイヤー

これはwebpackのコンパイルに固有のものであり、それ自体を驚かせることとは関係ありません。

RazzleはDefinePluginを設定するものです。 これはRazzleで解決できます。

私はあなたの言っていることに従うと思います。 これが間違っているかどうか教えてください：ビルド時に、サーバービルドのインスタンスの起動時に文字列が置き換えられるプレースホルダーをprocess.envに配置します。 サーバーシークレットを処理するためのものです。 （クライアントビルドでも実行できなかった理由はわかりませんが）問題：HMRでは機能しません。 これはハックです-任意の4k境界を導入します。 現在の形式では、クライアントと共有する必要のあるenv変数には対応していません。これらはビルド時定数のままです。 これは、コンテナーの追加の起動ステップです。

https://github.com/jaredpalmer/razzle/issues/528#issuecomment-377058844で私が言ったことの多くを再ハッシュするには

解決策は、RazzleとCRAが本来あるべきよりも多くの機能をprocess.envに詰め込もうとしていることを認識することだと思います。 Dockerで動作させるために、静的（ビルド時間）と動的（ここでは、コンテナーの開始時間）、シークレットと非シークレットの4つの可能な状態のいずれかを持つフィールドを持つ1つのオブジェクトを作成しようとしています。 これらの4つの状態すべて（process.env.STATIC_PRIVATE_X、process.env.DYNAMIC_PUBLIC_Y、...）のプレフィックスを思い付くことができますが、よりクリーンなソリューションを使用した方がはるかに良いと思います。

process.envがネイティブのように（サーバーシークレットのストアとして）動作する場合、物事ははるかに理解しやすくなります。 例外が1つあります。ビルド時のインラインとしてのNODE_ENVですが、ビルドのプロパティであるため、これで問題ありません。 実行時にNODE_ENVを設定しても意味がありません。

残っているのは、クライアントにデータを取得する方法だけです。 なぜこれがprocess.envを使用しているのかまったくわかりません。 静的なものにたとえばrazzle.build.Xを使用して、reduxと同じように動的なものをクライアントに渡してみませんか？

Nodeでprocess.envが遅いという別の問題がありますが、これはprocess.envを1回読み取るキャッシュレイヤーで対処するのが最適です。

@gregmartynこれはハックであることに同意します...そしてそれは任意の4K境界を導入します。 このアイデアは、現在CRAで行われていること（投稿されたリファレンスを参照）に基づいており、サーバー側のランタイム環境変数を対象としています。

この問題のこの根源に役立つと私が信じるPRを

また、 PORTとHOSTも、サーバーのコンパイル時にそのままにしておくのが理想的であることに同意します。

@tgriesserいいね！ それは大きな改善です。
PORTとHOSTに加えて、コンパイルしない変数のリストにPUBLIC_PATHを追加します。

私はまだ敏感なカスタム環境変数がすべてクライアントにコンパイルされているのを見つけています。 server.jsでのみ参照していホットローダーのためにその同型を考慮しますか？ これらがクライアントに到達するのを防ぐにはどうすればよいですか。

みなさん、今週は仕事でこれらすべてに取り組んでいます。 乞うご期待。 ＃611はマージされる可能性があります。

config.jsを使用したreadmeの新しいガイドに従うことで、バンドルから機密性の高い環境変数を削除することができました。 素晴らしい：D

v2ノートを参照してください

@jaredpalmer何かが足りないかもしれませんが、readmeのドキュメントに示されていることにもかかわらず、これはPORTなどの問題です。 process.env.MY_THINGは正常に機能しますが、 process.env.PORTはビルド時に置き換えられ、実行時に読み取られません。 したがって、Herokuの例は実際には機能しません。

このスレッドで説明されているように、PORT、HOSTなどの特別な処理は見られません。

PORTを実変数にすることも＃581によってブロックされることに注意してください。 それをパッチして、PORTを機能させるためにPORTを削除するDefinePlugin配列を作成するrazzle.config.jsを使用する必要があります。 （しかし、それは機能します！）

実行時に.env変数を使用したい場合は、この小さなパッケージを使用してください。
https://www.npmjs.com/package/razzle-plugin-runtimeenv

誰かがAzureにRazzleアプリをデプロイする方法をアドバイスできますか？ 本当に苦労しています。

実行時に.env変数を使用したい場合は、この小さなパッケージを使用してください。
https://www.npmjs.com/package/razzle-plugin-runtimeenv

それはどのように機能しますか？ 例を挙げていただけますか？

確かに、環境変数は実行時に注入する必要があると思います。 razzleアプリをコンテイン化する場合は、実行する環境とは関係なくイメージを作成し、サーバーの起動時に環境変数を読み取って、クライアントアプリに提供します。

他のアプローチでは、ビルド時にのみ発生するため、実際には環境変数を使用していません。

私がここで述べたように：
https://github.com/HamidTanhaei/razzle-plugin-runtime/issues/1#issuecomment -525731273

実行時に.envファイルと.env.developmentファイルをrazzle-plugin-runtime使用できます。 実行時にアプリで環境変数を使用する機能が追加されます。

たとえば、私はそれを使用してaxiosます：
axios.defaults.baseURL = $ {process.env.RAZZLE_APP_API_BASE_PATH} $ {process.env.RAZZLE_APP_API_VERSION} ;
そして、次のように本番用の本番ENV変数を提供できます。
https://github.com/jaredpalmer/razzle#adding -temporary-environment-variables-in-your-shell

誰かがAzureにRazzleアプリをデプロイする方法をアドバイスできますか？ 本当に苦労しています。

私はで@fabianishereで共有ソリューションを使用してAzureのポートの問題を解決しhttps://github.com/jaredpalmer/razzle/issues/906#issuecomment -467046269