Reactjs + Nodejs + Nginx - 网站加载时间过长答案

【问题标题】：Reactjs + Nodejs + Nginx - Website is loading so longReactjs + Nodejs + Nginx - 网站加载时间过长
【发布时间】：2020-03-16 06:57:14
【问题描述】：

好吧，我在 VPS (ovh.com) 上安装了 nginx 然后我将所有文件放入 /root/directory_site 然后我设置 nginx 配置：

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

现在我遇到了 2 个问题

第一个：你去http://54.38.184.210/之后加载这么久！就像我在网站上看到任何东西之前的 5-6 秒一样，我之前只能看到索引标题，我认为这可能是 proxy_pass 问题，但我不知道如何解决它。加载这么长的网站是不可能的，服务器很快，我的连接也是！（只有第一次尝试时才会加载这么长时间，所以可能是缓存的东西？）

第二个：我在控制台中遇到这样的错误： [WDS] 断线！这到底是什么？我以前从未在我的本地服务器上使用过它！

那有什么问题呢？我使用“npm run dev”启动我的网站您可以尝试访问该站点，它需要很长时间才能开始加载任何内容，问题出在哪里？请帮帮我！

【问题讨论】：

标签： node.js reactjs nginx debian nginx-config

【解决方案1】：

WDS 是 webpack-dev-server，请不要在生产环境中使用开发工具。

为什么你在本地快速获得东西？因为最重的文件 bundle.js 是从 localhost 加载到浏览器的，你可以在本地加载很多 Mb 才开始变长。

虽然您需要通过 Internet 加载 bundle.js，但速度要慢几倍。这就是为什么好的做法是让你的 bundle.js 小于 2Mb，以及为什么在生产环境中构建你的 bundle.js 会经历缩小过程。不仅代码，而且资产（如图像）都必须压缩，否则您将加载所有这些超长。

当使用环境变量 NODE_ENV=production 构建时，许多软件包也有额外的优化。所以请使用压缩工具，比如 uglifyjs，压缩你的资源，不要在生产中使用任何开发工具/包。

【讨论】：

服务器 { 听 80;服务器名称 54.38.184.210；位置 / { #proxy_pass 54.38.184.210:3000; #proxy_buffering 关闭；根 /root/site/dist/；索引 index.html; try_files $uri /index.html; } } 我把根文件夹设置为dist后，我可以看到网站了，加载速度很快，但是我现在不知道如何启动服务器，你能告诉我吗？
你能提供更多关于你的安装的细节吗？我的意思是你只有客户端，还是由快递或单独的客户端和服务器服务的客户端？
@IvanCherviakov 在我的回答中阅读我与他的对话。
@Jechanka 正如 chrispytoes 所说，您需要通过 express 为您的网站提供服务，然后在 prod 中，您在本地主机上使用 NODE_ENV=production 运行 express 服务器，然后使用 nginx 作为反向代理，所以当您发送请求它到达 nginx，nginx 代理它来表达和表达最终服务器你的网站。

【解决方案2】：

您直接在webpack-dev-server 上托管该网站。这很糟糕，您应该立即将其删除。如果您使用的是create-react-app，则需要使用命令npm run build 进行生产构建并正确部署它。这样做可以解决这两个问题。

Webpack Dev Server 仅用于开发目的，并为您的应用增加了额外的膨胀，使其更易于调试。这不应该用于实时服务器。

【讨论】：

在我使用 npm run build 后，它创建了 dist 文件，接下来我应该做什么来启动客户端/服务器，因为如果我不使用 npm run dev，我得到一个错误 502 Bad网关我是 webpack 的新手，所以请帮助我
@Jechanka 那太完美了。 dist 文件夹中的文件是整个网站。只需从 apache 或 nginx 等普通网络服务器提供该文件夹即可。如果您不知道该怎么做，那就完全是另一个问题了。
当我将根 nginx 设置为 dist 文件夹时，它显示了网站，但后端无法正常工作，我不知道如何将它们放在一起，你能帮帮我吗？我想创建新主题，但我必须等待 90 分钟```
@Jechanka 啊，你没有提到你有一个后端。无论您的后端是什么，您都必须直接提供这些文件，然后将响应页面的每个请求路由到 index.html，并反向代理到该后端服务器。
我不明白，我在 node.js 中有后端，我用 express (app.use) 处理每个请求，我从客户端站点发送，我以为我刚刚开始使用节点的服务器