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

Question

我有一个基于 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并不深入。

所以我做了以下步骤：

1. npm run build在我的项目文件夹中 - 这生成了.next文件夹
2. 复制文件夹package.json里面的内容.next
3. 打开.next文件夹并压缩内容（因此所有文件都位于 zip 的根目录中）
4. 打开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 文件如下所示：

Answer 1

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

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

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

.next
package.json

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

2. 在你的 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 您就知道您弄乱了端口。