Question

我使用result生成了Razzle React应用。构建后，我已将其部署到nodeJS Elastic Beanstalk环境。

点击弹性beantalk网址后，我发现该站点没有CSS。在本地运行同一台服务器似乎可以正常工作，所以我想知道是否需要做更多的工作来为弹性beantalk上的RSRle app配置SSR？

在检查yarn create-razzle-app my-app和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>指示无效的CSS或JS

bundle.f03ddc0c.js:1 Uncaught SyntaxError: Unexpected token '<'

index

在Elastic Beanstalk配置上以及在其上进行配置时的环境变量是：

<!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>

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

Answer 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捆绑软件会正常加载。

部署后，Razzle反应未加载正确的捆绑软件

1 个答案: