文章/答案/技术大牛

发布

社区首页 >问答首页 >当部署时，毛口反应不加载正确的捆绑

问当部署时，毛口反应不加载正确的捆绑
EN

Stack Overflow用户

提问于 2019-10-30 05:06:52

回答 1查看 1.8K关注 0票数 4

我用yarn create-razzle-app my-app生成了一个Razzle应用程序。在构建之后，我已经将它部署到了nodeJS弹性豆茎环境中。

在点击弹性豆杆url后，我看到没有CSS应用到网站上。在本地运行同一台服务器似乎很好，所以我想知道是否还需要做更多的工作来为弹性豆柄上的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>

在构建和使用弹性豆柄配置时，环境变量是：

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"

javascript

reactjs

server-side-rendering

react-ssr

razzle

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-31 02:21:49

我没有现成的解决方案，可以工作在弹性豆柄，但我张贴了一个解决方案，几乎相同的问题，我遇到了部署在谷歌应用程序引擎。

我不得不在部署时添加一个构建脚本(这使得我的手工构建过程变得不必要)。以前，在部署生产构建时，我遇到了css/js/映像无法加载的相同问题。

在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"将在start在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包将很好地加载。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58619076

复制

相似问题

问当部署时，毛口反应不加载正确的捆绑
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当部署时，毛口反应不加载正确的捆绑EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当部署时，毛口反应不加载正确的捆绑
EN