时间戳

首页 > 解决方案 > 如何为服务器上部署的 Reactjs 应用程序设置环境变量？

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

问题描述

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

标签： reactjsserverbuildenvironment-variables

解决方案

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

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

这是一个节点express应用程序的片段，它以 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：

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

<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.serverManifestReact 应用程序现在可以随时访问的全局对象中。

推荐阅读