我使用 yarn create-razzle-app my-app 生成了一个 Razzle React 应用程序.构建完成后，我已经将其部署到 nodeJS Elastic Beanstalk 环境中。
访问 elastic beanstalk url 后，我没有看到任何 CSS 应用于该站点。在本地运行相同的服务器似乎工作正常，所以我想知道是否需要做更多的工作来为 Elastic 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>
这显然会导致错误，因为它不是有效的 CSS 或 JS，如控制台输出所示 bundle.f03ddc0c.js:1 Uncaught SyntaxError: Unexpected token '<'
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"
最佳答案
我没有适用于 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 之前构建生产版本。这样我就能够按照我对 Assets 的预期获得应用程序。您可以尝试是否有一种方法可以为您的平台自动构建。我仍在研究如何部署我的手动生产版本。我怀疑它与端口号有关(在我的例子中)。将 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 包可以正常加载。
关于javascript - Razzle react 在部署时没有加载正确的包，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58619076/