Node.js Reactjs+；Nodejs+；Nginx-网站加载时间太长

嗯，我在VPS（ovh.com）上安装了nginx 然后我将所有文件放入/root/directory\u站点 然后我设置nginx配置：

server {
    listen 80;
    server_name 54.38.184.210;
    location / {
        proxy_pass http://54.38.184.210:3000;
        proxy_buffering off;
 }
}

现在我有两个问题

第一个：在你去 装载时间太长了！就像在我在网站上看到任何东西之前的5-6秒，我之前只能看到索引标题，我想这可能是代理传递的问题，但我不知道如何解决它。这是不可能加载这样长的网站，服务器很快，我的连接也！ （只有在您第一次尝试时，它才加载这么长时间，所以可能是缓存的原因？）

第二个： 我在控制台中遇到如下错误： [WDS]断开连接！ 到底是什么？我以前从未在本地服务器上安装过它

那有什么问题？我使用“npm运行开发”启动我的网站

---

你可以尝试访问这个网站，在它开始加载任何东西之前需要很长时间，问题出在哪里？请帮帮我

WDS是网页包开发服务器，请不要在生产中使用开发工具

你为什么在本地搞得这么快？因为大多数繁重的文件bundle.js是从localhost加载到浏览器的，在它开始变长之前，您可以在本地加载很多Mb

在Production中，虽然您需要通过internet加载bundle.js，但速度要慢上数倍。这就是为什么最好的做法是将bundle.js设置在2Mb以下，以及为什么在生产中构建bundle.js时会尝试缩小过程。不仅是代码，而且像图像这样的资产都必须压缩，否则您将加载所有这些超长文件

---

另外，许多包在使用环境变量NODE_ENV=production构建时都有额外的优化。因此，请使用小型化工具，如uglifyjs，压缩您的资产，不要在生产中使用任何开发工具/包。

您直接在

网页包开发服务器上托管该网站。这很糟糕，你应该马上把它取下来。如果您使用的是
create react app
，则需要创建生产构建并使用命令
npm run build
正确部署它。这样做可以解决这两个问题

Webpack Dev Server仅用于开发目的，并向应用程序添加额外的膨胀，以使其更易于调试。这不应该用于实时服务器。
在我使用npm运行构建后，它创建了dist文件，接下来我应该做什么来启动客户端/服务器，因为如果我不使用npm运行开发，我得到了一个错误502坏网关，我是webpack的新用户，因此请提供帮助me@Jechanka太好了。
dist
文件夹中的文件是整个网站。只需从普通的Web服务器（如apache或nginx）提供该文件夹。如果你不知道怎么做，那就完全是另外一个问题了。当我将根nginx设置为dist文件夹时，它会显示网站，但后端不工作，我不知道如何将其组合在一起，你能帮助我吗？我想创建一个新的主题，但我必须等90分钟```@Jechanka啊，你没有提到你有一个后端。您必须直接从后端为这些文件提供服务，然后将react页面的每个请求路由到
index.html
，并将代理反向到该后端服务器。我不明白，我在node.js中找到了后端，每个请求都由express（app.use）处理，我从客户端站点发送，我想我刚刚用nodeserver启动了服务器{listen 80；server_name 54.38.184.210；location/{#proxy_pass；#proxy_buffering off；root/root/site/dist/；index index index.html；try_files$uri/index.html；}在我将根文件夹设置为dist之后，我可以看到这个站点，它的加载速度很快，但我现在不知道如何启动服务器，你能告诉我吗？你能提供更多的安装细节吗？我的意思是，你只有客户端，还是客户端由express提供服务，或者客户端和服务器分开提供服务？@IvanCherviakov在我的回答中读了我和他的对话。@Jechanka正如chrispytoes所说，你需要通过express提供网站服务，然后在prod中，你在本地主机上运行带有节点_ENV=production的express服务器，然后使用nginx作为反向代理，所以当您发送请求时，它会到达nginx，nginx会代理它到express，express最终会服务于您的网站。