Next.js: Deploy to AWS

[leonardoanalista]

Question about Next.js

I converted my code from CRA to Next.js and now it is time to deploy to prod. I appreciate how easy is to run the app in production mode in my local machine: npm build; npm start.

Thanks for creating Next.js!

I have read the deployment docs but I still don't understand how I can get my compiled filed and move to my AWS server.

https://nextjs.org/docs/#production-deployment

Let's say my previous process was to run a CRA build, then zip the build folder and send it to AWS.

Now with Next.js, when I run npm build, I don't know what files I should copy to the server. I thought it would be all files inside /.build plus my /server.js and npm-package.json but it is not.

Sorry I might be missing something here.

[timneutkens]

Requires files/directories are:

• .next (this is the output of next build)
• package.json and npm install
• next.config.js (Next's configuration is needed at runtime)

Another way would be to upload your whole app to aws and run

npm install
npm run build
npm run start

Or alternatively you can host on https://now.sh

[Jauny]

@timneutkens what do you mean by "package.json and npm install"?
Do you mean node_modules should also be copied on the server, and then we can run npm run start?

Or do you mean

• copy .next package.json next.config.js on the server
• run npm install
• run npm run start

I think node_modules is required to run next build so I'm wondering if this implies that we have to run npm install before running npm run build locally, then copy .next package.json next.config.js on the server and run npm install and npm run start there?

[leonardoanalista]

No, you don't copy node_modules. You copy only the above mentioned to AWS. Remember EBS on AWS automatically runs npm install then npm start so you don't have to do anything other than upload the zipped files. I wrote a naive AWS deploy script in node. Let me know if you need a snippet.

[Jauny]

Interesting I was getting an error trying to do that. Can't find ../lib/constants from a next file.
I've reverted to just upload the whole folder with eb cli and have my start script both build and start.

[psycura]

@Jauny when you say - deploy on AWS, which AWS service do you mean?

[Jauny]

I'm working with Elastic Beanstalk

[thedv91]

I built under windows and uploaded package.json .next and next.config.js to linux server and got this error

 UnhandledPromiseRejectionWarning: Error: Cannot find module 'rootFolder/.next/server/static\{build-version}\pages\_error.js'

Pls help me!

[vishesh774]

@Jauny Any success on this ? I am also stuck at the same

[Jauny]

@vishesh774 yes I was able to make this work.

We deploy through CircleCI now, but basically we have an .ebignore file where we ignore everything but the

• ebs-related files (.ebextensions, etc).
• .next
• package.json
• next.config.js

we had an issue with root access during npm install, so I also had to add an .npmrc file with unsafe-perm=true which basically makes npm install run as root and give it access rights to write to all files.

hope this helps!

[simonkubica]

@Jauny Are you able to give more color on the root access issue? I'm currently debugging by attempting to deploy an incredibly basic Hello World to EBS (.next created from a basic pages/index.js with one div, package.json, next.config.js) and encountering a 502 Bad Gateway nginx error. I get the same error when trying to deploy my actual app, too, so it's definitely not the fault of any complexity I've added during development.

I've attached the .zip I am deploying to EBS. @timneutkens your insight would be incredibly helpful also as it appears successful AWS deployment is slightly more complex than the instructions you provided when closing this issue.

2018/10/28 06:43:49 [error] 3318#0: *2 connect() failed (111: Connection refused) while connecting to upstream, client: 172.31.33.147, server: , request: "GET / HTTP/1.1", upstream: "http://127.0.0.1:8081/", host: "greecemedtravel.us-east-2.elasticbeanstalk.com"

hello.zip

[Jauny]

@SimonKubica did you setup your port in your EBS settings?
On the left click "Configuration", then the first block should be "Software", in it at the bottom you can setup your environment properties, you need "NODE_ENV: production" and "PORT: 8081" if you are using nextjs default settings

[simonkubica]

@Jauny Thanks for getting back so quickly. Unfortunately I have, I'll include my software config below:

[Jauny]

Can you check your npm logs from EBS?

I just downloaded your .zip and don't see a .npmrc file. The root access problem I had was that EBS doesn't run npm install as root so it had errors from not having writes to create some dir. You should see this error in your logs of the node section.

Try add a .npmrc file with unsafe-perm=true in it. That will make npm install run as root

[leonardoanalista]

Everything worked until I needed to to a new deployment after a while. I am now getting this error:

Error: Cannot find module '@zeit/next-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
    at Function.Module._load (internal/modules/cjs/loader.js:506:25)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/var/app/current/next.config.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
internal/modules/cjs/loader.js:582
    throw err;

Those are the filed I copy to AWS :

const filesToCopy = [
  '.next',
  'next.config.js',
  'package.json',
  'routes.js',
  'server',
  'server.js',
  'sitemap.txt',
];

@timneutkens I am not sure if this is a new or old problem. I am investigating now.

[efleurine]

Could it be related to npm not install development dependencies. I am starting to thinkg that this might be the case

[leonardoanalista]

yes, it was. I moved @zeit/next-sass to dev dependency and it worked. I also upgraded to at the same time to next.js v7 and everything worked without any code changing.

[BillyPurvis]

@timneutkens what do you mean by "package.json and npm install"?
Do you mean node_modules should also be copied on the server, and then we can run npm run start?

Or do you mean

• copy .next package.json next.config.js on the server
• run npm install
• run npm run start

I think node_modules is required to run next build so I'm wondering if this implies that we have to run npm install before running npm run build locally, then copy .next package.json next.config.js on the server and run npm install and npm run start there?

Is this mentioned in the docs?

[rubelux]

I found a solution, Needed to pass the process.env.PORT to the port, so AWS Beanstalk can assign it.

[Kcin1993]

For someone meets issue, when deploys Next.js App to AWS ELB with eb cli.

1. Check .gitignore or .ebignore and make sure .next doesn't be ignore when upload.
2. If error, check ELB log which is the most efficient way
3. If error, go to the version on ELB and download the zip check the file inside the zip is as same as you expect.

Here is my deploy flow. Deploy to AWS ELB with eb cli

1. .gitignore contain .next for doesn't commit build file to your git service
2. .ebignore doesn't contain .next for eb deploy can deploy .next folder successfully
3. run script next build
4. run script eb deploy to deploy. You might use eb init and eb create for first time

Note. I have create server.js file. I also add env setting NODE_ENV=production to my ELB env.

[chandan-reddy-k]

We have recently deployed our Next.js app on AWS Elastic Beanstalk and automated via Travis CI. If anyone stumbles on implementing this, please refer to this detailed article on setting up the deployment process. https://medium.com/@chandan.reddy/how-to-deploy-next-js-app-on-aws-elastic-beanstalk-via-travis-333f66fe3102?sk=7bcc7e3a06f2801d37f2f23f5adec6f2