如何在 AWS Elastic Beanstalk 上部署 next.js？

Posted 2023-03-04

【中文标题】如何在 AWS Elastic Beanstalk 上部署 next.js？

【英文标题】：How to deploy next.js on AWS Elastic Beanstalk?

【发布时间】：2021-04-09 11:24:55

【问题描述】：

我有一个基于 next.js 框架的小型网站，我想将其部署在 AWS Elastic Beanstalk 上。

我在这里关注getting started docs https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/GettingStarted.html 还有这里https://nextjs.org/docs/deployment。 但是next.js 网站上的文档并没有深入。

所以我做了以下步骤：

npm run build 在我的项目文件夹中 - 这会生成 .next 文件夹 将package.json 复制到.next 文件夹中 打开.next文件夹并压缩内容（所以所有文件都在zip的根目录下） 打开 AWS 管理控制台，选择 Create a web app 并上传 zip 文件

所有这一切都顺利完成，AWS Beanstalk 创建了环境。 然后我收到了信息Healthstatus: Severe - 100.0 % of the requests are failing with HTTP 5xx. 所以我查看了日志并得到了这个：

Jan  2 19:44:38 ip-172-31-23-147 web: at /var/app/current/node_modules/next/dist/bin/next:27:115
Jan  2 19:44:38 ip-172-31-23-147 web: npm ERR! code ELIFECYCLE
Jan  2 19:44:38 ip-172-31-23-147 web: npm ERR! errno 1
Jan  2 19:44:38 ip-172-31-23-147 web: npm ERR! next-js-website@0.1.3 start: `next start -p $PORT`
Jan  2 19:44:38 ip-172-31-23-147 web: npm ERR! Exit status 1
Jan  2 19:44:38 ip-172-31-23-147 web: npm ERR!
Jan  2 19:44:38 ip-172-31-23-147 web: npm ERR! Failed at the next-js-website@0.1.3 start script.
Jan  2 19:44:38 ip-172-31-23-147 web: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Jan  2 19:44:38 ip-172-31-23-147 web: npm ERR! A complete log of this run can be found in:
Jan  2 19:44:38 ip-172-31-23-147 web: npm ERR!     /home/webapp/.npm/_logs/2021-01-02T19_44_38_214Z-debug.log
Jan  2 19:44:38 ip-172-31-23-147 web: > next-js-website@0.1.3 start /var/app/current
Jan  2 19:44:38 ip-172-31-23-147 web: > next start -p $PORT
Jan  2 19:44:38 ip-172-31-23-147 web: Error: Could not find a production build in the '/var/app/current/.next' directory. Try building your app with 'next build' before starting the production server. https://err.sh/vercel/next.js/production-start-no-build-id
Jan  2 19:44:38 ip-172-31-23-147 web: at Server.readBuildId (/var/app/current/node_modules/next/dist/next-server/server/next-server.js:138:355)
Jan  2 19:44:38 ip-172-31-23-147 web: at new Server (/var/app/current/node_modules/next/dist/next-server/server/next-server.js:3:120)
Jan  2 19:44:38 ip-172-31-23-147 web: at createServer (/var/app/current/node_modules/next/dist/server/next.js:2:638)
Jan  2 19:44:38 ip-172-31-23-147 web: at start (/var/app/current/node_modules/next/dist/server/lib/start-server.js:1:323)
Jan  2 19:44:38 ip-172-31-23-147 web: at nextStart (/var/app/current/node_modules/next/dist/cli/next-start.js:19:125)

我认为最重要的一行是：Could not find a production build in the '/var/app/current/.next' directory. Try building your app with 'next build' before starting the production server. https://err.sh/vercel/next.js/production-start-no-build-id

但正如您在上面看到的，我之前做过npm run build，并创建了构建文件夹。 在做了一些研究后，我发现很多人似乎都有类似的问题，但我还没有找到解决方案。

我该如何解决这个问题？ 非常感谢。

一些附加信息： 我的 package.json 看起来像这样

    "name": "next-js-website",
    "version": "0.1.3",
    "private": true,
    "scripts": 
        "dev": "next dev",
        "build": "next build",
        "start": "next start -p $PORT"
    ,
    "engines": 
        "node": "12.9.0"
    ,
    "dependencies": 
        "aws-sdk": "^2.817.0",
        "chart.js": "^2.9.4",
        "moment": "^2.29.1",
        "moment-timezone": "^0.5.32",
        "next": "10.0.4",
        "react": "17.0.1",
        "react-chartjs-2": "^2.11.1",
        "react-device-detect": "^1.15.0",
        "react-dom": "17.0.1"
    

我的 zip 文件如下所示：

【参考方案1】：

所以经过一些阅读和测试，我想出了一个解决方案。

对于还在苦苦思考如何将 node.js 或特别是 next.js 应用程序部署到 AWS Elastic Beanstalk 的每个人：

确保您的 .zip 文件看起来像

.next
package.json

因此 zip 文件中没有父目录。 AWS EB 将首先运行 npm install 并安装所有依赖项。 然后它将运行npm start，因此构建文件夹需要与package.json在同一文件夹中

在您的 package.json 中有以下内容

"scripts": 
        "dev": "next dev",
        "build": "next build",
        "start": "next start -- --port $PORT"
    ,

nginx代理服务器正在监听8080端口，你也可以直接设置这个端口。但是 AWS EB 将通过环境变量设置端口。

如果您打开日志文件并看到如下内容： ready - started server on http://localhost:3000 你知道你把端口搞砸了。

【讨论】：

您知道是否还需要上传其他文件吗？喜欢.env.production 或next.config.js？还是将这些捆绑在构建中？

您可能还需要添加您需要的其他文件。 .env.production 通常位于您的 src 文件夹中？所以我猜它会与 .next 文件夹捆绑在一起。但是我不确定。例如，我的 zip 包含 .ebextensions .next public 和 package.json。特别是公共文件夹需要图像可用

好奇你是否考虑过在 S3 + CloudFront + Lambda@Edge 上部署 Next.js - serverless-stack.com/examples/… 我想知道响应延迟如何与我们的 BeanStalk 相匹配。

如果您已经制作了next.config.js，请确保包括在内。没有它我会出错。