Next.js - ERROR Build directory is not writeable on EC2 - node.js

I'm running for the first time my Next.js app with a custom server.js on Elastic BeanStalk with 64bit Amazon Linux/4.11.0.
After the creation on the application, the environment and the deploy with the eb-cli I received a warning into the EB dashboard Environment health has transitioned from Degraded to Severe.
I changed the Node command into the config to npm run deploy. Nothing changed.
Here's my package.json.
"scripts": {
"start": "pm2 start server.js -i max",
"build": "next build",
"dev": "nodemon --exec babel-node server.js",
"start-next": "next start",
"deploy": "NODE_ENV=production next build && pm2 start server.js -i max",
"test": "echo \"Error: no test specified\" && exit 1"
},
I connected to the eb instance with eb ssh and after I've located the project dir I tried to execute npm run build but an error happened.
> NODE_ENV=production next build && pm2 start server.js -i max
> Build error occurred
Error: > Build directory is not writeable. https://err.sh/zeit/next.js/build-dir-not-writeable
at build (/var/app/current/node_modules/next/dist/build/index.js:1:6361)
at <anonymous>
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webreader-client#1.0.0 deploy: `NODE_ENV=production next build && pm2 start server.js -i max`
npm ERR! Exit status 1
I've created a .next directory with sudo but the error is still raised.
Docs:
https://github.com/zeit/next.js/blob/master/errors/build-dir-not-writeable.md

After spending nearly 4 hours on the phone with AWS support, their solution was as follows:
create a folder/file in the root of your project: .ebextensions/00_dir_permission.config
commands:
01_set_file_permissions:
command: "chmod 777 -R /tmp"
Of course this is less than ideal, but for some reason right now in EB permissions have changed such that you are not able to kick off the build without tweaking on permissions like this. Hoping this changes soon.

I was getting this same error locally and after about an hour of troubleshooting, I realized I had my node version set wrong. Seems like next 9.4 doesn't support version 9 of node. I updated to version 12 and it's working without issue.

Related

Nodejs deploy on heroku different node (each node has a different port number)

i have different node, here my package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"node_1": "nodemon --watch dev -e js dev/networkNode.js 3001 http://localhost:3001",
"node_2": "nodemon --watch dev -e js dev/networkNode.js 3002 http://localhost:3002",
"node_3": "nodemon --watch dev -e js dev/networkNode.js 3003 http://localhost:3003",
"node_4": "nodemon --watch dev -e js dev/networkNode.js 3004 http://localhost:3004",
"node_5": "nodemon --watch dev -e js dev/networkNode.js 3005 http://localhost:3005"
},
In my local env i run:
npm run node_1
npm run node_2
npm run node_3
npm run node_4
npm run node_5
And the node are accessibile in http://localhost:300X url.
Now i want to deploy on Heroku my prototype.
if i put:
"node_1": "nodemon --watch dev -e js dev/networkNode.js 3001 https://my-heroku-app.herokuapp.com:3001",
And then i go to:
https://my-heroku-app.herokuapp.com:3001
The app doesn't open, but the build is success.
I tried:
Create Procfile:
web: npm run node_1
-Running via Heroku Cli
heroku run npm run node_1
Not works...
How can i set this node on heroku?
What you are trying to do is not possible on Heroku. A deployed App on Heroku is assigned only one port. Furthermore you cannot specify the port. It is supplied to you by Heroku via the environment variable $PORT.
#Tin Nguyen answer is not exact. On Heroku it's mandatory to bind something on $PORT, but then you can bins something else to some other port.
See https://devcenter.heroku.com/articles/dynos#web-dynos
Also see How to run Django and node.js app on same dyno in Heroku? for how to run multiple backends on a dyno and let them communicate.
It makes the case with Django+Node, but it can be used with Node+Node as well.

How do check node js errors in Azure

I've deployed an app (node js backned and react on frontend) via a bitbucket pipeline to Azure. It executes without any errors.
pipelines:
branches:
master:
- step:
name: Install, build, test & deploy
caches:
- node
script: # Modify the commands below to build your repository.
- apt-get update || true && apt-get install zip
- cd backend && npm ci && npm run build && cd ../frontend && npm ci && npm run build && cd ../
- mv frontend/build backend/dist/
- cd backend && zip -r build-$BITBUCKET_BUILD_NUMBER.zip *
- curl -v -X POST -u $DEPLOY_USER:$DEPLOY_PASSWORD https://$DEPLOY_URL.scm.azurewebsites.net/api/zipdeploy -T "build-$BITBUCKET_BUILD_NUMBER.zip"
my package json
"scripts": {
"build": "npm run build:app",
"build:app": "tsc",
"dev": "NODE_ENV=development tsnd --respawn --transpileOnly ./index.ts",
"lint": "tslint -c tslint.json './**/*.ts'",
"lint:fix": "tslint -c tslint.json './**/*.ts' --fix",
"start": "NODE_ENV=production node dist/server.js",
"start:staging": "NODE_ENV=staging ts-node ./index.ts",
"test": "echo \"Error: no test specified\" && exit 1"
},
The site gives a 403 with "You do not have permission to view this directory or page."
I've downloaded the logs (diagnostic dump) from https://xxx.scm.azurewebsites.net/ but I don't find any errors.
Im running this on windows in Azure and Mac locally. Probably something wrong there. Can I somehow see the output from when then node app starts? Or how can I debug this?
Starting the web app:
403 generally shows up in Appservice when ever the application has not started. To fix this, in your app service click on Advanced Tools under Development Tools
This opens up a window with an option on top of the header - Bash. Click on that.
By default it will be in home directory. Now, using cd navigate to site -> wwwroot
here, you should be able to see all your files if properly deployed. Now issue the command npm start (or any custom command)
Monitoring Logs:
In your webapp under monitoring, you have Log Stream just click on that and you should be able to see the live logs.
You can give a restart on web app once these changes are done.
Lastly, under configuration check if you have provided a start up command for the app service in General Settings. If its node, hope you have given process.env.PORT to get the available port. Hope this helps!

npm run points to different .env file

We are working on nodeJs/ExpressJs we have configured multiple .env files for development and production and pointing it to package.json for different execution process, we have naming conversation issues at scripts.
Whenever we run npm run prod it takes to preprod configuration. what could be the issues?
Update: we have figured that the suffix of the script key is the same in the next script, after update/rename preprod to preProd the both runs fine. but why?
Eg :
"scripts": {
"dev": "clear; env-cmd -f ./config/hostedDev.env nodemon --exec babel-node index.js",
"prod": "clear; env-cmd -f ./config/prod.env nodemon --exec babel-node index.js",
"preprod": "clear; env-cmd -f ./config/preprod.env nodemon --exec babel-node index.js"
},
Apparently the issue is with the word 'pre'.
If you would have noticed it runs both preprod and prod commands (pre running first).
If you change the script name to 'postprod' the postprod script will run later.
So, I guess npm uses 'pre' as to run before the 'prod' script and then running 'prod' script itself.

How to chain custom script in package.json to call prestart mongod?

Trying to streamline my package.json and local development with a custom script to run Nodemon. I'm currently building an app with a front and back end I need to call mongod before start and before my custom in two tabs however I'm running into an issue.
mongod will only run in the terminal if the terminal path is set to local from testing and I've read:
Correct way of starting mongodb and express?
npm starts to execute many prestart scripts
How to npm start at a different directory
How do I add a custom script to my package.json file that runs a javascript file?
I can use prestart as:
"scripts": {
"prestart": "cd && mongod",
"start": "node app",
"nodemon": "./node_modules/.bin/nodemon app"
}
but I'm not seeing how I should chain a prestart with a custom scripts. When I try to chain it with nodemon as:
"scripts": {
"prestart": "cd && mongod",
"start": "node app",
"nodemon": "cd && mongod && ./node_modules/.bin/nodemon app"
},
Nodemon is fired first than mongodb crashes in my package.json when I call Nodemon as:
npm run nodemon
How can I start mongod before starting nodemon in my development process through one command in the package.json?

with grapejs - did "npm start", but localhost:8080 will say This site can’t be reached localhost refused to connect

I downloaded the zip (from https://github.com/artf/grapesjs) and unzipped, then did the "npm i" command. That tooks a while, then I ran "npm start" and the console displayed this:
e:\GitHub\NealWalters\GrapeJSDemo>npm start
grapesjs#0.14.5 start e:\GitHub\NealWalters\GrapeJSDemo
npm run build:css -- -w & webpack-dev-server --open --progress --colors
grapesjs#0.14.5 build:css e:\GitHub\NealWalters\GrapeJSDemo
node-sass src/styles/scss/main.scss dist/css/grapes.min.css --output-style compressed "-w"
When I try http://localhost:8080 in the browser, I get the error:
This site can’t be reached
localhost refused to connect.
Here is my directory structure:
I have run other NodeJS programs before with success. Running on Windows 10.
On npm start, the process gets bound to watching files and doesn't reach the next command to startup the server. Try adding start in the beginning of the start script to run a separate process for watching the files. Then the command to startup the server will get executed.
So in package.json, change the start script to the following:
{
...
"scripts": {
...
"start": "start npm run build:css -- -w & webpack-dev-server --open --progress --colors"
}

Resources