AWS Elastic Beanstalk - 如何使用 npm 和 webpack 构建捆绑 JS

Posted 2023-03-04

【中文标题】AWS Elastic Beanstalk - 如何使用 npm 和 webpack 构建捆绑 JS

【英文标题】：AWS Elastic Beanstalk - How to build bundle JS using npm and webpack

【发布时间】：2016-11-29 19:13:42

【问题描述】：

我在 elasticbeanstalk 上部署了一个节点 js 应用程序。安装并符号链接节点、npm 和 webpack。但是当运行npm run build-prod 时，它本身调用脚本webpack --config /var/app/current/webpack.prod.config.js。退出状态为 -2 时出现以下错误。如果我也直接运行 webpack 命令，也会发生同样的情况。我正在寻找解决方案。

[2016-07-26T06:57:36.301Z] INFO  [9731]  - [Application update app-5c81-160726_122417@24/AppDeployStage0/EbExtensionPostBuild/Infra-EmbeddedPostBuild/postbuild_0_site_web/Command 06_npm_run_build_prod] : Activity execution failed, because:
  > site-web@1.0.0 build-prod /tmp/deployment/application
  > webpack --config /var/app/current/webpack.prod.config.js


  npm ERR! Linux 4.4.14-24.50.amzn1.x86_64
  npm ERR! argv "/opt/elasticbeanstalk/node-install/node-v4.4.6-linux-x64/bin/node" "/bin/npm" "run" "build-prod"
  npm ERR! node v4.4.6
  npm ERR! npm  v2.15.5
  npm ERR! file sh
  npm ERR! path sh
  npm ERR! code ELIFECYCLE
  npm ERR! errno ENOENT
  npm ERR! syscall spawn sh
  npm ERR! site-web@1.0.0 build-prod: `webpack --config /var/app/current/webpack.prod.config.js`
  npm ERR! spawn sh ENOENT
  npm ERR!
  npm ERR! Failed at the site-web@1.0.0 build-prod script 'webpack --config /var/app/current/webpack.prod.config.js'.
  npm ERR! This is most likely a problem with the site-web package,
  npm ERR! not with npm itself.
  npm ERR! Tell the author that this fails on your system:
  npm ERR!     webpack --config /var/app/current/webpack.prod.config.js
  npm ERR! You can get information on how to open an issue for this project with:
  npm ERR!     npm bugs site-web
  npm ERR! Or if that isn't available, you can get their info via:
  npm ERR!
  npm ERR!     npm owner ls site-web
  npm ERR! There is likely additional logging output above.
  npm ERR! Linux 4.4.14-24.50.amzn1.x86_64
  npm ERR! argv "/opt/elasticbeanstalk/node-install/node-v4.4.6-linux-x64/bin/node" "/bin/npm" "run" "build-prod"
  npm ERR! node v4.4.6
  npm ERR! npm  v2.15.5
  npm ERR! code ELIFECYCLE

---

容器配置文件：

container_commands:
  01_node_symlink:
    command: "ln -sf `ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin/node /bin/node"

  02_npm_symlink:
    command: "ln -sf `ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin/npm /bin/npm"

  03_npm_install_global_packages:
    command: "npm install webpack webpack-cli -g"

  04_webpack_symlink:
    command: "ln -sf `ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin/webpack /bin/webpack"

  #05_webpack_run_build_prod:
    #command: "webpack --config /var/app/current/webpack.prod.config.js --progress --colors"

  06_npm_run_build_prod:
    command: "npm run build-prod"

---

package.json 中的脚本

"scripts": 
    "build": "webpack --config webpack.local.config.js --progress --colors",
    "build-local": "webpack --config webpack.prod.config.js --progress --colors",
    "build-prod": "webpack --config /var/app/current/webpack.prod.config.js",
    "server": "node app.js",
    "dev-server": "node dev-app.js"
  

当我取消注释直接运行 webpack 命令的 05 时，它以错误 Error: "/var/app/current/site-web/static/assets/app/index.js" is not in the SourceMap. 结束

构建脚本在本地成功，但在生产中的所有方式都被阻止。 无法弄清楚如何在 AWS beanstalk 环境中运行 webpack 命令来构建 JS。构建JS文件不是最理想的方式吗？

节点：4.4.6 npm：2.15.5 webpack：最新的

【问题讨论】：

可能是/var/app/current/webpack.prod.config.js 文件丢失了？

它就在那里。我使用eb deploy 部署代码和ssh 来检查那里的文件和构建脚本是否可以手动运行。

【参考方案1】：

我对弹性 beantalk 还很陌生，我自己也有类似的问题，但我注意到你的符号链接节点、npm 等任务的形式是container_commands。

According to the official docs, "它们在应用程序和 Web 服务器设置完毕并提取应用程序版本文件之后运行，但在部署应用程序版本之前运行。"

也许尝试使用commands: 而不是container_commands:。查看我分享的链接。

也许这些命令在应用程序和 Web 服务器已经设置之后才运行，这就是为什么它可能不适合您的原因？

再说一次，我对弹性豆茎还是新手，但也许这会有所帮助。

【讨论】：

顺便说一句，“已部署”到底是什么意思？我认为一旦将应用程序版本文件放在部署目录中，就会运行容器命令。当我在 container_commands 中运行 migrate 命令时，这就是它在我的 python django 环境中的工作方式。

抱歉，不确定“已部署”的确切含义

【参考方案2】：

我认为这种方法是错误的。 Webpack 和 Webpack-cli 是 package.json 的 devDependencies。 您应该将您的环境变量设置为NPM_USE_PRODUCTION=false，以便EB 也安装devDependencies。

在此处查看更多信息：https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/nodejs-platform-packagejson.html

【参考方案3】：

我遇到了全局 npm 安装问题（在我的例子中是 react-scripts）。我作为解决方法所做的是安装 package.json 中声明的依赖包，然后在 .ebextensions 配置文件中对其进行符号链接（位于 EC2 上的 /tmp/deployment/application/node_modules/.bin）：

   03_react_scripts_symlink:
        command: "ln -sf /tmp/deployment/application/node_modules/.bin/react-scripts /bin/react-scripts"

   04_npm_run_build_prod:
        command: "sudo npm run build"

【参考方案4】：

最后，我设法在暂存目录运行构建脚本。这不是一个永久的解决方案，但它确实有效。

05_webpack_run_build_prod:
    command: "cd /tmp/deployment/application && sudo webpack --config webpack.prod.config.js --progress --colors"