部署create-react-app-静态还是动态？

Question

我不了解“静态”部署站点与使用Express部署站点的区别。 create-react-app中的文档说您不需要Express来启动服务器吗？ 那么，您在哪里以及如何部署此应用程序？ 我不明白 我习惯于使用express创建server.js ，然后再部署到类似Heroku的地方。

部署方式

npm run build创建一个包含应用程序生产版本的构建目录。 设置您喜欢的HTTP服务器，以便为您网站的访客提供index.html，并请求/static/js/main类的静态路径。 <hash> .js与/static/js/main.<hash>.js文件的内容一起提供。

从他们的文档：

静态服务器

对于使用Node的环境，处理此问题的最简单方法是安装serve并让其处理其余部分：

npm install -g serve
serve -s build

上面显示的最后一个命令将为端口5000上的静态站点提供服务。 与服务的许多内部设置一样，可以使用-p或--port标志来调整端口。

运行此命令以获取可用选项的完整列表：

serve -h

其他解决方案

为了在生产环境中运行Create React App项目，您不一定需要静态服务器 。 它可以很好地集成到现有的动态模型中 。

这是一个使用Node和Express的编程示例：

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

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

我不明白为什么您不希望使用express运行它（我猜这是所谓的“动态”吗？）。 如果您仍然没有快速设置，那将如何工作？ 我不会“静态运行”。 过去，我只运行过带有Express的应用程序。

Answer 1

静态部署站点意味着您已经具有在生产服务器（Apache，Nginx，Heroku，S3等）中使用HTTP服务静态文件的能力。 它们可以处理以下我的解释中的第2点和第3点，因此您无需在生产服务器中启动Express或Serve。

您可能需要在生产机器中旋转HTTP Server的原因有多种，这不仅限于create-react-app 。

1. 您可以使用附加到Express Server的Webpack Dev Middleware和Webpack Hot Middleware来重新加载热模块。 Webpack热模块重新加载通过在客户端中注入代码来工作，该代码使用HTTP服务器提供的WebSocket端点侦听文件中的更改。

2. 有时您需要与HTML和JavaScript一起使用AJAX动态加载静态资产（图像，字体）。 由于跨源请求仅限于HTTP，因此大多数浏览器均不允许这样做。

3. 如果您需要使用BrowserHistory使用干净的URL进行客户端路由，则需要使用具有重写规则的HTTP服务器，您可以使用Express轻松完成。