如何为服务器上部署的 Reactjs 应用程序设置环境变量？答案

【问题标题】：How to set environment variable for a deployed Reactjs app on server?如何为服务器上部署的 Reactjs 应用程序设置环境变量？
【发布时间】：2020-05-20 10:24:55
【问题描述】：

我认为我的问题与之前提出的有关环境变量的问题不同。我知道如何在构建 ReactJs 应用程序时设置环境变量。构建应用程序后，它会为我提供静态文件，然后我将其放在服务器上。这个应用程序就像一个普通的网络应用程序一样工作。
问题：
如果我想在不打开代码文件的情况下为客户端提供更改服务器上已部署构建的环境变量之一，我该怎么做？
注意：
由于这不是一个特定的编码问题，如果您认为，请将此问题移至相关的 SO 论坛。
谢谢

【问题讨论】：

只是为了确认。您想更改已经编译并从网络服务器提供服务的应用程序的环境变量？
是的。正是....
无法更改REACT_APP_XXXXX env。编译后的变量。他们正在永久“融入”应用程序。我通过拥有一个从后端提供的动态 JSON 清单文件解决了这个问题。该应用程序加载 JSON 文件并读取其值。这种方法的一种变体是从后端提供一个 Javascript js 文件。该脚本执行一个在全局window 对象中设置一些变量的函数。如果你愿意，我可以给你一些代码示例作为答案。
是的，这会有所帮助。谢谢

标签： reactjs server build environment-variables

【解决方案1】：

无法更改 REACT_APP_XXXXX 环境。编译后的变量。他们正在永久“融入”应用程序。

我通过从后端提供动态 JSON 清单文件解决了这个问题。该应用程序加载 JSON 文件并读取其值。这种方法的一种变体是从后端提供一个 Javascript js 文件。该脚本执行一个在全局窗口对象中设置一些变量的函数。

这是一个节点 express 应用程序的 sn-p，它以 JSON 和 JS 文件的形式提供清单。


const express = require('express')
const app = express()

const manifest = {
    appTheme: process.env.APP_THEME,
    foo: "bar"
};

const cacheTimeoutSec = 600

class ManifestController {
    static getJS(req, res) {
        /// Generate IIFE function that sets window.serverManifest object
        let fileChunks = [
            '(function(){',
            'var serverManifest=',
            JSON.stringify(manifest),
            '; window.serverManifest = serverManifest',
            '})()',
        ].join('');

        res.set('Cache-Control', `public, max-age=${cacheTimeoutSec}`);
        res.setHeader('content-type', 'text/javascript');
        res.write(fileChunks);
        res.end();
    }

    static getJSON(req, res) {
        res.json(manifest);
    }
}

// Serve manifest in JS
app.get('/server-manifest.js', ManifestController.getJS);

// Serve manifest as JSON
app.get('/server-manifest.json', ManifestController.getJSON);

选项 1：

React 应用程序手动从您的后端获取 JSON 文件（例如 https://api.mybackend.com/server-manifest.json）并对数据进行操作。

选项 2：

像这样在html文件头中包含<script>标签

<html lang="en">
    <head>
        <script src="https://api.mybackend.com/server-manifest.js"></script>
        <title>Home</title>
    </head>
    <body>
        <noscript>
            You need to enable JavaScript to run this app.
        </noscript>
        <div id="root"></div>

    </body>
</html>

如果你把它放在<head> 中，浏览器会加载脚本并执行它。该脚本在全局 window.serverManifest 对象中设置清单，React 应用现在可以随时访问该对象。

【讨论】：