如何将 Nuxt.js 部署到 Elastic Beanstalk？

Question

I am very new to AWS and i have been following the tutorials out there but couldn't find the answer. So, what i did was i created simple nuxt application, no changes to the framework's script or anything. I set my elastic beanstalk to run node.js settings. and then i tried to deploy my /dist folder(using nuxt build) with the application's json folder as told by every tutorials. but it gives me this this is what it looks on my webpage I think i have something wrong with which folders i deploy or do i have to actually deploy via the aws CLI, would that make a difference at all?

eb log:

-------------------------------------
/var/log/nodejs/nodejs.log
-------------------------------------
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/.npm/_logs/2019-09-29T16_00_28_939Z-debug.log

> portfolio@1.0.0 start /var/app/current
> cross-env NODE_ENV=production node server/index.js

internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module '/var/app/current/server/index.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

Answer 1

The nodejs logs indicate to me that there is an issue with the build, an issue with how it's zipped, or an issue with your start command.

The most common is incorrectly zipping source files

When you create a ZIP file in Mac OS X Finder or Windows Explorer, make sure you zip the files and subfolders themselves, rather than zipping the parent folder.

In other words, do not right click the dist folder and click "zip", select all the files and folders (including hidden ones) and zip those. Elastic beanstalk, and many other AWS services, expect the zip to unpack into a flat structure, and not contain the parent folder when unzipped.

If this does not solve your problem, make sure you're zipping the correct folder. Try deleting your.nuxt and /dist folders, and running npm run build locally. The folder that is produced (defaults to.nuxt) is the folder whose contents need to be zipped.

Answer 2

The reason it is throwing that error is because your launch command starts with cross-env . When it sees that it tries to run the globally installed package cross-env but it is not available globally, so it throws that error. There are a few possible ways to address this:

1. The easiest is to just change the start command to use a relative path to the locally installed version of cross-env , so your command should look something like this:

   node_modules/cross-env/src/bin/cross-env.js node server/index.js

2. You might also try adding npx to the front of your command, like so:

   npx cross-env NODE_ENV=production node server/index.js

   This should work but I have found that sometimes I get errors with specific packages, from what I can tell it is a bug with npx but I haven't had time to look into it. Notably I did see this bug with a nuxt js app specifically so you might too, however I was using the nuxt cli which you are not.

3. The third option is you could look into installing the package globally using ebextensions. In my work I haven't come across a situation where that has been necessary.