Javascript Razzle在部署时未加载正确的捆绑包_Javascript_Reactjs_Server Side Rendering_React Ssr_Razzle

Javascript Razzle在部署时未加载正确的捆绑包

javascript reactjs

Javascript Razzle在部署时未加载正确的捆绑包,javascript,reactjs,server-side-rendering,react-ssr,razzle,Javascript,Reactjs,Server Side Rendering,React Ssr,Razzle,我使用纱线创建Razzle应用程序my app生成了Razzle React应用程序。在构建之后，我已经将其部署到nodeJS Elastic Beanstalk环境中点击elastic beanstalk url后，我发现没有CSS应用于该站点。在本地运行同一台服务器似乎很好，所以我想知道在elastic beanstalk上为SSR配置Razzle应用程序是否还需要做更多的工作检查bundle.[HASH].js和bundle.[HASH].css时，它们看起来如下所示： <!do

我使用

纱线创建Razzle应用程序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>

构建弹性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构建”：“razzle构建”

将在AppEngine上运行

启动之前构建生产构建。通过这种方式，我能够使用这些资产获得我所期望的应用程序。如果有一种方法可以为您的平台自动化构建，您可以尝试一下。我仍在研究如何部署我的手动生产构建。我怀疑这与端口号有关（就我而言）。将端口设置为预期值对我无效
如果它有效的话，你可以在引擎盖下四处看看发生了什么，然后找到你的解决方法

更新的答案：
在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捆绑包可以正常加载。Post you package.json也可以运行脚本。@anz已更新，请注意，我已更新了node命令，以便EB运行start:prod script这肯定可以，但我不想在生产服务器上构建应用程序。我更喜欢在CI中构建它，然后部署应用程序。这种方法有什么特别的缺点？部署时间较慢。如果构建过程由于任何原因而崩溃，那么部署到其中的服务器将失败。我更喜欢将依赖关系/测试/构建/部署管道放在CIYeah上，这对我来说完全有意义。我想知道我们是否缺少一些网页或其他配置资料。我正在尝试部署裸皮razzle应用程序。如果你遇到任何有帮助的事情，请在这里发帖子，那太好了。祝你好运
// 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));