How to deploy next.js on AWS Elastic Beanstalk?

Question

I have a small website based on next.js framework that I want to deploy on AWS Elastic Beanstalk.

I followed the getting started docs here https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/GettingStarted.html and also here https://nextjs.org/docs/deployment. However the docs on next.js website don't go in depth.

So what I did are the following steps:

npm run build in my projects folder - this generated the .next folder
Copied the package.json inside the .next folder
Opened the .next folder and zipped the content (so all files are in root of zip)
Opened up the AWS Management cosonsole, chose Create a web app and uploaded the zip file

All this went through without error and AWS Beanstalk created the environment. Then I received the information Healthstatus: Severe - 100.0 % of the requests are failing with HTTP 5xx. So I looked into the logs and got this:

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)

I think the most important line is: 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

But as you can see above, I did npm run build before and I created the build folder. After doing some research I found that many people seem to have similar issued but I could not find a solution yet.

How can I resolve this issue? Thanks a lot.

Some additional information: My package.json looks like this

{
    "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"
    }
}

My zip file looks like this:

user_4908844 · Answer

So after some reading and testing I came up with a solution.

For everyone who is also struggeling with how to deploy a node.js or specifically a next.js application to AWS Elastic Beanstalk:

make sure that your .zip file looks like

.next
package.json

So that there is not parent directory in the zip file. AWS EB will first run npm install and install all dependencies. Then it will run npm start so the build folder needs to be in the same folder as the package.json

Inside your package.json have the following

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

The nginx proxy server is listening to port 8080. You can alternatively set this port directly. However AWS EB will set the port via environment variables.

If you open the log files and see something like: ready - started server on http://localhost:3000 you know that you messed something up with the ports.

How to deploy next.js on AWS Elastic Beanstalk?

1 Answers