部署时 Razzle 反应未加载正确的包答案

【问题标题】：Razzle react not loading proper bundle when deployed部署时 Razzle 反应未加载正确的包
【发布时间】：2019-10-30 05:06:52
【问题描述】：

我使用yarn create-razzle-app my-app 生成了一个 Razzle React 应用程序。构建完成后，我已将其部署到 nodeJS Elastic Beanstalk 环境中。

在点击弹性 beanstalk 网址后，我发现网站没有应用任何 CSS。在本地运行相同的服务器似乎工作正常，所以我想知道是否需要做更多的工作来为弹性 beanstalk 上的 SSR 配置 Razzle 应用程序？

检查bundle.[HASH].js 和bundle.[HASH].css 时，它们都如下所示：

<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8" />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/static/css/bundle.9638be3a.css">
        <script src="/static/js/bundle.f03ddc0c.js" defer></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

这显然会导致错误，因为控制台输出 bundle.f03ddc0c.js:1 Uncaught SyntaxError: Unexpected token '<' 表明它不是有效的 CSS 或 JS

index

<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8" />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/static/css/bundle.9638be3a.css">
        <script src="/static/js/bundle.f03ddc0c.js" defer></script>
    </head>
    <body>
        <div id="root"><div class="Home"><div class="Home-header"><h2>Welcome to Razzle</h2></div></div></div>
    </body>
</html>

在 Elastic Beanstalk 配置上构建时的环境变量是：

NODE_ENV=production
PORT=8081

package.json

{
  "name": "my-razzle-app",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production PORT=8081 node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "razzle": "^3.0.0",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-router-dom": "^5.1.2"
  }
}

.ebextensions/nodecommand.config

option_settings:
  aws:elasticbeanstalk:container:nodejs:
    NodeCommand: "npm run start:prod"

【问题讨论】：

也发布你的 package.json 运行脚本。
@anz 更新并注意我更新了节点命令，因此 EB 运行 start:prod 脚本

标签： javascript reactjs server-side-rendering react-ssr razzle

【解决方案1】：

我没有适用于 Elastic Beanstalk 的现成解决方案，但我发布了一个解决方案，解决了我在 Google App Engine 上部署时遇到的几乎相同的问题。

我必须在部署时添加一个构建脚本（这使得我的手动构建过程变得不必要）。以前在部署生产版本时，我遇到了 css/js/images 无法加载的相同问题。

在 package.json 中，我添加了：

...
"scripts": {
    "gcp-build": "razzle build",
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production PORT=8081 node build/server.js"
  },
...

"gcp-build": "razzle build" 将在 AppEngine 上运行 start 之前构建生产版本。通过这种方式，我能够按照我对资产的预期获得应用程序。如果有一种方法可以为您的平台自动构建，您可以尝试。我仍在研究如何部署我的手动生产构建。我怀疑它与端口号有关（在我的情况下）。将 PORT 设置为预期值对我不起作用。

如果它有效，那么您可以绕过引擎盖下发生的事情，并找到解决方法。

更新答案：

在server.js 上试试这个。基本上指向正确的路径。

// for remote deployment set to build folder, otherwise use the public folder
const publicFolder = process.env.NODE_ENV==='production' ? path.join(__dirname, '../build/public') : 'public';

const server = express()                                              // prepare server
                .disable('x-powered-by')
                .use(express.static(publicFolder));

执行此操作后，css/js 包可以正常加载。

【讨论】：

这肯定行得通，但我不想在生产服务器上构建应用程序。我更喜欢在 CI 中构建它，然后部署应用程序
这种方法有什么特别的缺点吗？
部署时间较慢。如果构建过程因任何原因而崩溃，则其部署到的服务器将失败。我更喜欢在 CI 中使用依赖/测试/构建/部署管道
是的，对我来说完全有道理。我想知道我们是否缺少一些 webpack 或其他配置的东西。我正在尝试部署裸露的 razzle 应用程序。如果你遇到任何有帮助的东西，请在这里发帖，那太好了。祝你好运。