Saya pribadi tidak akan terlalu khawatir tentang process.env yang tidak tersedia di klien. Kita sudah harus tahu bahwa 'jendela' tidak tersedia di server; masuk akal bagi saya bahwa process.env akan memiliki perilaku yang berlawanan. (tidak ada proses simpul untuk memiliki env, dan browser tidak mengekspos vars env mereka yang saya ketahui) Saya menganggap process.env sebagai tempat di mana rahasia server dapat berakhir, jadi saya lebih suka itu tidak tersedia di sisi klien secara default.

Jika terserah saya, variabel process.env.RAZZLE_INLINED_XXXXXX akan dikompilasi selama pembuatan, (dan tersedia di klien sebagai string DefinePlugin inline) dan yang lainnya hanya akan tersedia di sisi server.

NODE_ENV juga dapat disisipkan, karena sebagian besar digunakan sebagai deskripsi build dan bukan variabel seperti lingkungan tempat kode dijalankan. Ada juga beberapa alasan kinerja untuk melakukannya.

Saya suka ide PORT dan HOST menjadi variabel saat runtime. Saya mungkin menjalankan artefak build yang sama di lingkungan yang berbeda.

Saya dapat mengkonfirmasi perjuangan. Perilaku saat ini tidak seperti yang saya harapkan dan terutama membuat saya tersandung ketika menggunakan up di aws. Saya sekarang telah menyesuaikan razzle.config.js sehingga semua vars spesifik razzle diawali dengan RAZZLE_XXX dan itu dirangkai pada waktu kompilasi. Sisanya tersedia di process.env.XXX . Saya juga setuju dengan @gregmartyn tentang tidak tersedianya runtime vars melalui process.env .

Saat mencoba mengatur Razzle di proyek React yang ada, kami menghadapi masalah ini. Port tidak dapat diganti saat run-time, dan variabel process.env lainnya tidak tersedia di server.

Perilaku saat ini pada waktu pembuatan:

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

menjadi pada klien dan server:

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

Meskipun ini memastikan bahwa klien dan server dapat menggunakan envs proses yang sama persis, ini membuat tidak mungkin untuk menimpa saat runtime atau menggunakan variabel lingkungan lainnya.

Jika Anda ingin sepenuhnya kompatibel, itu harus ditranspilasikan ke ini dalam waktu pembuatan (di server, klien dapat tetap sama):

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

Dengan cara ini, Anda dapat menggunakan process.env.PORT di klien dan server. Ini akan default ke 3000.

Jika razzle _built_ dengan PORT=80 , klien telah mengubah process.env.PORT menjadi 80 dan server akan mengubahnya menjadi process.env.PORT || 80 . Ini akan menghasilkan perilaku yang sama seperti sekarang.

Jika razzle adalah _run_ dengan PORT=81 (saat dibangun dengan 80 ), variabel lingkungan klien akan tetap 80 sedangkan variabel server akan menghasilkan 81 .

Perilaku ini tentu saja dapat menyebabkan perilaku yang tidak terduga, tetapi memberikan penggunaan process.env yang paling fleksibel sambil mempertahankan kompatibilitas mundur penuh. Port masih dapat ditimpa di server saat run-time, dan variabel lingkungan lain yang disetel oleh platform hosting akan berfungsi di server apa adanya.

Saya pikir masalah mendasar di sini adalah bahwa Razzle saat ini mencoba mengemas beberapa fungsi yang berbeda menjadi satu objek, dan secara mendasar mengubah fungsi yang ada.

Ini mencoba untuk:

1. Ubah variabel process.env menjadi konstanta untuk alasan kinerja (lihat contoh minifikasi di https://webpack.js.org/plugins/define-plugin/#usage dan kelambatan nodejs di https://github.com/nodejs/node/issues /3104)
2. Jadikan konstanta tersebut tersedia untuk server dan klien sehingga kode isometrik tidak perlu terlalu dikhawatirkan.

Masalah:

• process.env adalah untuk lingkungan _variables_. Mengubahnya menjadi satu set konstanta mengubah perilaku yang diharapkan.
• process.env sering berisi info sensitif termasuk kata sandi, jadi ini bukan sumber yang bagus untuk berbagi data dengan klien. Jika sebagian dibagikan, dan sebagian tidak dibagikan, pengembang harus tahu bahwa satu hal ini -- process.env -- tidak hanya tidak berperilaku seperti aslinya, tetapi juga memiliki perilaku berbeda tergantung pada awalan kunci.
• Itu diubah menjadi konstanta pada waktu pembuatan, yang berbeda dari bagaimana variabel lingkungan berperilaku dalam konteks lain. Docker, misalnya, membuat perbedaan antara variabel waktu build (berguna ketika build itu sendiri memerlukan info variabel tergantung di mana ia berjalan) dan variabel lingkungan (berguna ketika satu gambar yang dibuat sebelumnya di-deploy ke lingkungan yang berbeda). Pohon Kacang Elastis, Heroku, dkk. lakukan yang sama.
• Awalan "RAZZLE_RUNTIME_" yang disarankan tidak cukup jelas. Itu harus menyampaikan bahwa itu tersedia di sisi klien dan itu bukan variabel. Saya pikir "INLINED_" mencakup itu, karena inlining biasanya digunakan untuk merujuk pada sesuatu yang terjadi pada waktu pembuatan. Itu tidak sempurna, ("ISOMORPHIC_INLINED_"?) tetapi juga mencoba untuk singkat.

Preferensi saya adalah membagi fungsi ini menjadi beberapa bagian, dan tidak merusak process.env sama sekali.
DefinePlugin dapat memanggil file seperti razzle.config.js untuk mendapatkan konstanta build
Merekomendasikan menggunakan pola yang mirip dengan apa yang dilakukan Redux dengan configureStore(window.__PRELOADED_STATE__) untuk meneruskan data dari server ke klien.

Untuk kompatibilitas mundur, catatan pemutakhiran dapat memberikan contoh razzle.config.js yang mendefinisikan cara lama.

Satu tambahan: Saya berkata "untuk tidak mengutak-atik process.env sama sekali." tapi saya bisa melihat ada pengecualian untuk process.env.NODE_ENV karena alasan kinerja dari komentar saya di atas dan bahwa "NODE_ENV" itu sendiri secara umum memiliki arti "NODE_ENV = produksi berarti ini adalah build yang dioptimalkan"

@gregmartyn kita harus mengatur NODE_ENV untuk optimasi kinerja dan menggunakan babel preset seperti yang berfungsi sekarang. Alasan awal saya untuk bermain-main dengan env adalah membuat perpindahan dari CRA lebih mudah karena SSR sering ditambahkan setelah proyek dimulai. Kami juga menggunakan CRA pada proyek lain sehingga menyederhanakan perkakas bangunan kami (sedikit).

Ya; setuju bahwa NODE_ENV adalah pengecualian yang berguna. Itu adalah miliknya sendiri dan terkait erat dengan bangunannya, jadi tidak mengherankan. Saya melewatkan CRA dari solusi SSR khusus, jadi saya tidak begitu akrab dengan cara mereka melakukan sesuatu. Sepertinya ini juga merupakan masalah di sana: https://github.com/facebook/create-react-app/issues/2353

Saya pikir ini adalah masalah yang lebih besar untuk Razzle daripada CRA karena kode runtime di aplikasi CRA tidak berjalan di server sama sekali. CRA dapat melakukan apa pun yang diinginkannya dengan process.env karena sejauh menyangkut kode sisi kliennya, sebaliknya akan kosong. Razzle di sisi lain mulai mengekspresikan SSR-nya, dan kode itu akan mengharapkan process.env untuk memiliki semantik biasa dengan akses ke set lengkap variabel lingkungan runtime node. Process.env memiliki arti sebenarnya di server, jadi sangat disayangkan CRA mengkooptasinya untuk kasus penggunaan yang berbeda. Mereka bisa saja menggunakan beberapa nama lain daripada "process.env" seperti "cra.inlines". Sebaliknya, kode isomorfik terkena keputusan yang dibuat ketika hanya mempertimbangkan sisi klien.

Perlu dicatat dalam warna merah di mana-mana bahwa variabel lingkungan RAZZLE_XXX SEMUA tersedia di klien.

Bagaimana cara menggunakan variabel lingkungan sensitif tanpa dikirim ke klien?

Mereka tidak dikirim ke klien, apalagi Anda mereferensikannya dalam kode isomorfik

@jaredpalmer mungkin masalah ini khusus untuk afterjs? Saya hanya mereferensikannya dalam kode server.

Saya ingin menambahkan suara untuk kemampuan mendefinisikan variabel lingkungan tanpa awalan RAZZLE . Paling tidak, process.env tidak boleh dihapus di sisi server, yang membuat Anda tidak dapat menggunakan sesuatu seperti dotenv untuk memuat variabel env sisi server. Ini sepertinya terlalu mengganggu asumsi tentang lingkungan aplikasi.

Saya tidak begitu jelas tentang bagaimana razzle saat ini menyuntikkan variabel lingkungan ke klien dan server, tetapi tentu saja Anda tidak ingin hal-hal khusus server pada klien. Sayangnya ini adalah semacam pemecah kesepakatan bagi saya sekarang.

Saya memposting ulang solusi yang saya usulkan untuk aplikasi reaksi isomorfik dari https://github.com/jaredpalmer/razzle/issues/477#issuecomment -363538712

Konsep utamanya adalah menggunakan placeholder pada waktu kompilasi yang disuntikkan saat runtime sebelum eksekusi server untuk mengatur variabel lingkungan runtime dengan benar. Solusi ini untuk menjalankan server dalam wadah buruh pelabuhan tetapi mungkin dapat disesuaikan untuk RFC ini.

Perhatikan bahwa dalam solusi ini variabel lingkungan RAZZLE_XXXX dicocokkan dan disuntikkan bersama dengan HOST, PORT dan REDIS_URL.

Saya pribadi telah berjuang dengan masalah ini dan menghabiskan beberapa jam mencari solusi untuk masalah ini.

Ini melekat pada kompilasi webpack dan tidak terkait dengan razzle itu sendiri.

Setelah melihat bagaimana create-react-app menangani ini, dan mem-porting beberapa javascript dan kode Ruby, di dua proyek, saya telah berhasil menerapkan aplikasi reaksi TypeScript razzle dalam wadah buruh pelabuhan di heroku dengan solusi berikut:

env.ts

Script ini digunakan sebagai modul untuk menangani runtime env.

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;

penggunaan:

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

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

docker-start.js

Skrip ini digunakan sebagai titik masuk alih-alih server.js dan digunakan untuk menyuntikkan placehoder {{RAZZLE_VARS_AS_BASE64_JSON___... }} dengan variabel lingkungan runtime yang sebenarnya.

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);
}

file docker

# 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"]

Harap perhatikan bahwa pemrosesan pesan luapan belum selesai, tetapi saya harap ini membantu

Referensi:

Heroku Buildpack untuk membuat-reaksi-aplikasi
Lapisan dalam Heroku Buildpack untuk membuat-reaksi-aplikasi

Ini melekat pada kompilasi webpack dan tidak terkait dengan razzle itu sendiri.

Razzle adalah yang mengatur DefinePlugin. Ini bisa dipecahkan di Razzle.

Saya pikir saya mengikuti apa yang Anda katakan. Beri tahu saya jika saya salah: Pada waktu pembuatan, masukkan placeholder ke dalam process.env yang mendapatkan string diganti pada saat startup di server build. Ini dimaksudkan untuk menangani rahasia server. (Saya tidak mengerti mengapa itu tidak bisa berjalan di build klien juga) Masalah: Ini tidak akan berfungsi dengan HMR. Ini adalah peretasan -- ini memperkenalkan batas 4k yang berubah-ubah. Dalam bentuknya saat ini, ia tidak membahas env vars yang harus dibagikan dengan klien -- itu tetap merupakan konstanta waktu pembuatan. Ini adalah langkah startup tambahan untuk container.

Untuk mengulangi banyak dari apa yang saya katakan di https://github.com/jaredpalmer/razzle/issues/528#issuecomment -377058844

Saya pikir solusinya adalah mengenali bahwa Razzle dan CRA mencoba mengemas lebih banyak fungsionalitas ke dalam process.env daripada yang seharusnya. Untuk membuatnya berfungsi dengan Docker, kami mencoba memiliki satu objek dengan bidang yang memiliki salah satu dari 4 kemungkinan status: statis (waktu pembuatan) dan dinamis (di sini, waktu mulai wadah), rahasia dan non-rahasia. Kami dapat membuat awalan untuk keempat status tersebut (process.env.STATIC_PRIVATE_X, process.env.DYNAMIC_PUBLIC_Y, ...) tetapi saya pikir kami akan jauh lebih baik dengan solusi yang lebih bersih.

Jika process.env berperilaku seperti aslinya -- sebagai penyimpan rahasia server -- maka semuanya akan jauh lebih mudah dipahami. Ada satu pengecualian: NODE_ENV sebagai inline waktu pembangunan, tetapi tidak apa-apa karena ini adalah properti dari build. Tidak masuk akal untuk mengatur NODE_ENV saat runtime.

Yang tersisa hanyalah cara untuk mendapatkan data ke klien. Saya tidak mengerti mengapa ini menggunakan process.env sama sekali. Mengapa tidak menggunakan mis. razzle.build.X untuk hal-hal statis, dan meneruskan hal-hal dinamis ke klien dengan cara yang sama seperti redux?

Ada masalah lain di mana process.env lambat di Node, tapi itu paling baik diatasi dengan lapisan cache yang membaca process.env sekali.

@gregmartyn Saya setuju bahwa ini adalah peretasan ... dan itu memang memperkenalkan batas 4K yang sewenang-wenang. Ide ini didasarkan pada apa yang saat ini dilakukan dengan CRA (lihat referensi yang diposting) dan ditujukan untuk variabel env runtime sisi server.

Membuka PR yang saya yakini akan membantu dengan akar masalah ini - env ​​vars tidak tersedia di server saat runtime, tertarik untuk mendengar apakah ini menyelesaikan beberapa masalah di sini.

Saya juga setuju bahwa PORT & HOST juga idealnya dibiarkan sendiri pada waktu kompilasi server.

@tgriesser bagus! Itu adalah peningkatan besar.
Selain PORT dan HOST , saya akan menambahkan PUBLIC_PATH ke daftar vars yang tidak boleh dikompilasi.

Saya masih menemukan variabel lingkungan khusus yang sensitif semuanya sedang dikompilasi ke dalam klien. Saya merujuk mereka hanya di server.js . Apakah razzle menganggap itu isomorfik karena hotloader ? Bagaimana saya bisa mencegah ini mencapai klien.

Hai semuanya, saya menangani semua ini di tempat kerja minggu ini. Pantau terus. #611 kemungkinan akan digabungkan.

Mengikuti panduan baru di readme dengan config.js bekerja untuk saya sehubungan dengan menghapus variabel env sensitif dari bundel. Luar biasa :D

Lihat catatan v2

@jaredpalmer Saya mungkin melewatkan sesuatu, tetapi ini masih menjadi masalah untuk hal-hal seperti PORT, terlepas dari apa yang tersirat dalam dokumen readme. process.env.MY_THING berfungsi dengan baik, tetapi process.env.PORT masih diganti pada waktu pembuatan dan tidak dibaca pada waktu proses. Jadi contoh Heroku sebenarnya tidak berfungsi.

Saya tidak melihat penanganan khusus PORT, HOST, dll seperti yang dibahas di utas ini.

Perhatikan bahwa menjadikan PORT sebagai variabel nyata juga diblokir oleh #581. Saya harus menambalnya dan menggunakan razzle.config.js yang membuat array DefinePlugin yang menghapus PORT agar berfungsi. (tapi itu berhasil!)

jika ada yang ingin menggunakan variabel .env saat runtime, gunakan paket kecil ini.
https://www.npmjs.com/package/razzle-plugin-runtimeenv

Adakah yang bisa memberi tahu cara menggunakan aplikasi Razzle di Azure? Saya benar-benar berjuang dengan itu.

jika ada yang ingin menggunakan variabel .env saat runtime, gunakan paket kecil ini.
https://www.npmjs.com/package/razzle-plugin-runtimeenv

Bagaimana cara kerjanya? Bisakah Anda menunjukkan contoh?

Saya pikir variabel lingkungan memang harus disuntikkan saat runtime. Jika kita menyusun aplikasi razzle, kita ingin membuat image secara independen dari lingkungan yang dijalankannya, dan membaca variabel lingkungan saat memulai server dan menyajikannya ke aplikasi klien.

Pendekatan lain apa pun tidak benar-benar menggunakan variabel lingkungan karena itu hanya terjadi selama waktu pembuatan.

Seperti yang saya sebutkan di sini:
https://github.com/HamidTanhaei/razzle-plugin-runtime/issues/1#issuecomment -525731273

Anda dapat menggunakan file .env dan .env.development Anda dalam waktu proses dengan razzle-plugin-runtime . itu menambah kemampuan untuk menggunakan variabel env Anda di aplikasi Anda saat runtime.

misalnya saya menggunakannya untuk mengonfigurasi axios :
axios.defaults.baseURL = ${process.env.RAZZLE_APP_API_BASE_PATH}${process.env.RAZZLE_APP_API_VERSION} ;
dan Anda dapat memberikan variabel ENV produksi untuk produksi seperti ini:
https://github.com/jaredpalmer/razzle#adding -temporary-environment-variables-in-your-Shell

Adakah yang bisa memberi tahu cara menggunakan aplikasi Razzle di Azure? Saya benar-benar berjuang dengan itu.

Saya menyelesaikan masalah Azure Port menggunakan solusi yang dibagikan oleh @fabianishere di https://github.com/jaredpalmer/razzle/issues/906#issuecomment -467046269