“从服务器注入数据”到 React 应用程序的 index.html

Question

我正在尝试根据 create-react-app 文档“将数据从服务器注入页面”，而不是在构建时硬编码环境变量：

要在运行时读取它们，您需要在服务器上将 HTML 加载到 memory 并在运行时替换占位符，如此处所述。

<!doctype html>
<html lang="en">
  <head>
    <script>
      window.SERVER_DATA = __SERVER_DATA__;
    </script>

然后，在服务器上，您可以在发送响应之前将__SERVER_DATA__替换为 JSON 的真实数据。

我有一个index.html文件，我想使用为静态/构建文件提供服务的后端应用程序将环境变量中的 URL 注入其中。

例如，在index.html中：

  <script type="text/javascript">
    // Runs before react application.
    window.SERVICE_A_URL = "<%=SERVICE_A_URL%>";
    window.SERVICE_B_URL = "<%=SERVICE_B_URL%>";
    console.log(window.SERVICE_A_URL, window.SERVICE_B_URL);
  </script>

我的后端应用程序（例如 express）应该将SERVICE_A_URL=https://service_a.example.com注入<%=SERVICE_A_URL%> 。

但是，我不能这样做，因为当我的 React 应用程序构建时，它找到这个模板"<%=SERVICE_A_URL%>"并决定不生成index.html文件。 所以我不能使用ejs。 我需要使用类似__SERVER_DATA__的东西，而不是<%=SERVER_DATA%> 。 但是我可以使用什么工具在运行时替换它呢？ 例如，在快速服务器中。

额外细节：

为什么？：另一种/更好的方法是向 API 服务器发出 .network 请求以动态获取 URL。 但是，我正在使用的应用程序需要进行大量重构才能支持这一点。 我可能最终会在index.html中搜索 ENV_VAR 并对其进行修改。

节点应用程序

import express, {Request, Response} from 'express';
import ejs from 'ejs';

const app = express();
app.engine('html', ejs.renderFile);

const renderIndexHtmlWithServiceUrls = (req: Request, res: Response) => {
    res.render('index.html', {
        SERVICE_A_URL: process.env.SERVICE_A_URL,
        SERVICE_B_URL: process.env.SERVICE_B_URL,
        cache: true
    })
}
app.get('/', renderIndexHtmlWithServiceUrls)
app.get('/index.html', renderIndexHtmlWithServiceUrls)

// Serve built react app
app.use(express.static("/build"));

...

Answer 1

概述：

当后端 (expressJS) 应用程序启动时，我刚刚创建了一个mutated_index.html文件。 然后，当所有客户请求/或/index.html时，我将其提供给他们。 此后端应用程序还提供反应生产文件。

加载原始索引.html
对于我想做的每个替换：
- modified = modified.replace(substitutionKey, substitute);
将新的mutated_index.html写入磁盘。
在mutated_index.html app.get("/", ...)和app.get("/index.html", ...)中提供 mutated_index.html
- 在此之下，提供其他文件： app.use(express.static("/build"));

长期解决方案

如果你有这个问题，我建议你重构你的应用程序以避免全局变量，如果你需要这个功能。 然后，当您获得所需的数据时，您可以发出网络请求并实例化服务/客户端。

“从服务器注入数据”到 React 应用程序的 index.html

问题描述

1 个解决方案

解决方案1
0 2022-11-30 17:20:09

概述：

长期解决方案

“从服务器注入数据”到 React 应用程序的 index.html

问题描述

1 个解决方案

解决方案1 0 2022-11-30 17:20:09

概述：

长期解决方案

解决方案1
0 2022-11-30 17:20:09