Razzle反应在部署时未加载正确的捆绑软件

问题描述 投票：2回答：1

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

点击弹性beantalk网址后，我发现没有CSS应用于该网站。在本地运行同一台服务器似乎可以正常工作，所以我想知道是否需要做更多的工作来为弹性beantalk上的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"

我使用yarn create-razzle-app my-app生成了一个Razzle React应用。构建后，我已将其部署到nodeJS Elastic Beanstalk环境。到达弹性beantalk网址后，我看不到CSS ...
javascript reactjs ssr react-ssr razzle
1个回答
0
投票

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.