Javascript 如何从服务器正确地提供CreateReact应用程序索引？_Javascript_Html_Reactjs_Create React App

Javascript 如何从服务器正确地提供CreateReact应用程序索引？

javascript html reactjs

Javascript 如何从服务器正确地提供CreateReact应用程序索引？,javascript,html,reactjs,create-react-app,Javascript,Html,Reactjs,Create React App,我正在用create-react-app开发一个应用程序，一切都进行得很顺利，除了我想从后端开始提供index.html，但在这样做时遇到了麻烦我想这样做的原因是，我可以将一些特定于用户的Javascript注入index.html页面，并在用户最初点击页面时运行各种其他查询（）因此，与其连接到localhost:3000查看应用程序，我宁愿连接到localhost:8080并让服务器提供此index.html文件。（所有其他资产（js、css、图像）仍将位于localhost:3000）

我正在用create-react-app开发一个应用程序，一切都进行得很顺利，除了我想从后端开始提供

index.html

，但在这样做时遇到了麻烦

我想这样做的原因是，我可以将一些特定于用户的Javascript注入

index.html

页面，并在用户最初点击页面时运行各种其他查询（）

因此，与其连接到

localhost:3000

查看应用程序，我宁愿连接到

localhost:8080

并让服务器提供此

index.html

文件。（所有其他资产（js、css、图像）仍将位于

localhost:3000

）

这样做的一个问题似乎是默认情况下脚本标记不包括在

index.html

文件中，而是由create-react-app生成。也就是说，假设这是我的

index.html

文件：

<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

因此，在服务器上，我目前正在尝试以下操作：

#[get("/")]
fn handle_index() {
    let scripts = r#"<script src="https://localhost:3000/static/js/bundle.js"></script>
                     <script src="https://localhost:3000/static/js/0.chunk.js"></script>
                     <script src="https://localhost:3000/static/js/main.chunk.js"></script>"#;

    let index_html = include_str!("../frontend/public/index.html");

    let document = format!(r#"<script type="application/javascript">
                                 window.APP_GLOBALS = { user_id: 5, color: "red" };
                              </script> {}{}"#, data, index_html, scripts);

    return document;
}

#[get（“/”）
fn handle_index（）{
让脚本=r#”
"#;
让index_html=include_str！（“./frontend/public/index.html”）；
让文档=格式！（r#“
window.APP_GLOBALS={user_id:5，颜色：“red”}；
{}{}，数据，索引，脚本）；
归还文件；
}

因为我不确定是否有其他方法可以注入这些脚本标记。createreact应用程序似乎只对我的

localhost:3000

页面执行此操作，而不是对

localhost:8080

页面执行此操作

这似乎有些奏效。也就是说，页面会加载，但有两个问题

许多资产URL现在是错误的。相反，它们指向的是

localhost:8080

，而不是

localhost:3000

，

%PUBLIC\u URL%

URL同样不起作用（我想这是另一个不再发生的过程）

websocket自动加载开发服务器不再工作。当我导航到

localhost:3000

，但不导航到

localhost:8080

，它就会工作。当我编辑文件并保存时，控制台中的页面将变为白色，没有任何错误

我认为所有这些问题都是由相同的原因造成的：

create react app

通常以某种方式预处理

index.html

文件（转换

%PUBLIC\u URL%

，添加那些脚本标记，处理重新加载），但当文件从服务器返回时，它不再这样做

我想知道的是如何恢复此功能。基本上，让这些脚本标记和

%PUBLIC\u URL%

过程在我的后端服务器不必尝试的情况下进行。

当您运行

npm start

时，您告诉CRA使用webpack进行开发构建。Webpack执行您看到的所有处理，如注入脚本和替换

%PUBLIC\u URL%

。您不希望后端为

public

文件夹中的

index.html

提供服务，因为webpack尚未处理该文件。相反，您需要后端为webpack的构建输出提供服务

npm start

配置是一个开发构建，它有利于开发，但不利于生产。（此外，它不会将其输出保存到文件系统，因此如果您愿意，您甚至无法从后端为其提供服务。请参阅）。如果运行

npm run build

，您将在

build

文件夹中获得一个生产版本，您应该从后端提供该版本（然后您可以进行所需的任何注入）

这样做的缺点是构建需要更长的时间，当您更改前端文件时，它不会自动重建，而且我不确定它给出的错误是否与

npm start

一样有用。因此，您可能希望在开发前端时使用

npm start

，在测试后端时使用

npm run build

。还有一些类似的项目允许您将

npmstart

的构建输出保留在文件系统中，以便为其提供服务，但我没有尝试过任何一个

顺便说一句，从后端向html中注入脚本时要小心。考虑一些类似于在你的后端设置cookies并在前端读取这些cookies的方法。这更安全，更容易调试，等等。

我应该在原始帖子中提到，这已经适用于

npm run build

。问题是，在我所做的每一次更改中，我都必须手动重新运行构建，然后重新运行服务器（以便它能够获取新文件）。我也不再有自动重新加载和错误是不可能调试，因为它的所有缩小。所以，这不是一个很好的调试解决方案。此外，使用

npm start

也不会起作用，因为这样我就不会点击

后端路径，也不会从服务器接收运行应用程序所需的信息。这些都是好的方面。当我遇到这个问题时，我所做的是在react scripts npm包中修改webpack配置文件的版本，并在自述文件中添加如何将它们复制到node_模块中正确位置的说明。这是一个非常糟糕的解决方案，我认为cra build watch或更好。无论哪种方式，找到一些方法来运行基本上是“代码> NPM启动< /Cord>”，但是使用文件系统输出并从后端服务（不只是代码>索引.html < /C> >捆绑的JS文件的整个文件夹），认真考虑Cookie或API调用而不是明文脚本注入，难道这个解决方案不会导致每次更改都建立吗？所以它仍然不可调试，因为它将被完全缩小？此外，理想的做法基本上是从后端提供

index.html

和API，从前端提供所有其他资产（因为这是模拟生产中的结构），这使它能够在cha的基础上创建一个快速而非小型的开发构建

#[get("/")]
fn handle_index() {
    let scripts = r#"<script src="https://localhost:3000/static/js/bundle.js"></script>
                     <script src="https://localhost:3000/static/js/0.chunk.js"></script>
                     <script src="https://localhost:3000/static/js/main.chunk.js"></script>"#;

    let index_html = include_str!("../frontend/public/index.html");

    let document = format!(r#"<script type="application/javascript">
                                 window.APP_GLOBALS = { user_id: 5, color: "red" };
                              </script> {}{}"#, data, index_html, scripts);

    return document;
}