如何从服务器正确地提供create-react-app索引? [英] How to properly serve the create-react-app index from the server?
问题描述
我正在使用create-react-app开发一个应用程序，并且一切正常，除了以下事实:我想首先从后端提供 index.html 并正在运行这样做很麻烦.
I'm developing an application with create-react-app and all is going well, except for the fact that I would like to initially serve the index.html from the backend, and am running into trouble doing so.
我要这样做的原因是，我可以在 index.html 页面中注入一些特定于用户的Javascript，并在用户最初访问该页面时运行其他各种查询(与此人相似)
The reason that I want to do this is so that I can inject some user-specific Javascript into the index.html page and also run various other queries when the user initially hits the page (similar to this person)
因此，与其连接到 localhost:3000 来查看应用程序，不如连接到 localhost:8080 并让服务器提供该 index.html 文件.(所有其他资产(js，css，图像)仍将位于 localhost:3000 上)
So, instead of connecting to localhost:3000 to view the app, I would instead connect to localhost:8080 and have the server serve this index.html file. (all other assets (js, css, images) would still be on localhost:3000)
这样做的一个问题似乎是脚本标记默认情况下不包含在 index.html 文件中，而是由create-react-app生成.也就是说，这是我的 index.html 文件:
One issue with doing this seems to be that the script tags are not included in the index.html file by default, and are instead generated by create-react-app. That is, say this is my index.html file:
<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>
如果我运行 npm start ，然后检查源，则将是这样(由于我认为是CRA运行时注入):
If I run npm start, and then inspect the source, it will instead be this (due to CRA runtime injections I presume):
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div id="root"></div>
</body>
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script>
</html>
因此，在服务器上，我目前正在尝试执行以下操作:
As a result, on the server, I'm currently trying something like this:
#[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;
}
因为我不确定要注入那些脚本标签的任何其他方法.看起来create-react-app仅适用于我的 localhost:3000 页面，而不是 localhost:8080 页面.
Because I'm not sure of any other way to inject those script tags. It looks like create-react-app only does it for my localhost:3000 page, and not the localhost:8080 page.
这似乎有些有用.也就是说，页面已加载，但是有两个问题.
This seems to somewhat work. That is, the page loads, but there are two issues.
-
许多资产URL现在错误.他们改为指向
localhost:8080而不是localhost:3000，并且％PUBLIC_URL％URL同样无效(我想这是另一个不再发生的过程)
Many of the asset URLs are now wrong. They are instead pointing to
localhost:8080instead oflocalhost:3000, and%PUBLIC_URL%URL likewise doesn't work (I suppose this is another process that is no longer occurring)
websocket自动重载开发服务器不再起作用.当我导航到 localhost:3000 而不是 localhost:8080 时，它可以工作.当我编辑文件并保存时，页面变成白色，控制台中没有错误.
The websocket autoreload dev server no longer works. It works when I navigate to localhost:3000, but not localhost:8080. When I edit a file and save, the page just turns white with no errors in the console.
我认为所有这些问题都是由相同的原因引起的: create-react-app 通常以某种方式对 index.html 文件进行预处理(转换％PUBLIC_URL％，添加了这些脚本标记，并处理了重载)，但是当文件从服务器返回时，不再执行此操作.
I think all of these issues are due to the same cause: create-react-app normally preprocesses the index.html file in some way (converting %PUBLIC_URL%, adding those script tags, handling reload), but it is no longer doing this when the file is instead returned from the server.
我想知道的是如何恢复此功能.基本上，不需要我的后端服务器就可以进行这些脚本标记和％PUBLIC_URL％进程.
What I'm wondering is how I can restore this functionality. Basically, have these script tags and %PUBLIC_URL% processes occur without my backend server having to attempt to do so.
推荐答案
运行 npm start 时，您要告诉CRA使用Webpack进行开发.Webpack会执行您看到的所有处理，例如注入脚本并替换％PUBLIC_URL％.您不希望后端在 public 文件夹中提供 index.html ，因为webpack尚未处理该文件.相反，您需要后端来提供webpack的生成输出.
When you run npm start, you are telling CRA to make a development build using webpack. Webpack does all of the processing you see like injecting scripts and replacing %PUBLIC_URL%. You don't want your backend to serve the index.html in the public folder because that file hasn't been processed by webpack. Instead you need the backend to serve webpack's build output.
npm start 配置是开发版本，对开发有益，但对生产不利.(而且它不会将其输出保存到文件系统中，因此，如果您愿意的话，甚至无法从后端提供它.请参见
The npm start configuration is a development build, which is good for development but not production. (Also it doesn't save its output to the file system, so you couldn't even serve it from your backend if you wanted to. See CRA issue #1070). If you run npm run build, you get a production build in the build folder, which you should serve from your backend (and then you can make whatever injections you need).
这样做的缺点是构建时间较长，更改前端文件时不会自动重建，而且我不确定它给出的错误是否与 npm start一样有用.因此，您可能要在开发前端时使用 npm start ，而在测试后端时使用 npm run build .还有某些项目，例如补丁包，可以使您制作npm start 的生成输出保留在文件系统中，因此您可以使用它，但是我没有尝试过其中的任何一个.
The downside of this is that it takes longer to build, it doesn't rebuild automatically when you change your frontend files, and I'm not sure if the errors it gives are as useful as npm start. Thus you might want to use npm start when developing the frontend and npm run build when testing your backend. There are also certain projects like patch-package that would allow you to make npm start's build output stay in the file system so you can serve it, but I haven't tried any of them.
顺便说一句-小心地从后端将脚本注入html.考虑类似在后端设置cookie并在前端读取这些cookie之类的事情.这样更安全，更容易调试等.
BTW - be careful with injecting scripts into the html from your backend. Consider something like setting cookies in your backend and reading those cookies in your frontend instead. This is safer, easier to debug, etc.
这篇关于如何从服务器正确地提供create-react-app索引?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
