I have been struggling with deploy a next js application to azure app service as we want to render the application both static and dynamic so we need the node server to run. Is any body there is help me.
Note: I have already watched these videos and also applied these methods like adding the web.config and server.js files to root of my website but no luck it does not work. Also this article
https://parveensingh.com/next-js-deployment-on-azure-app-service/
but no luck.
A more detailed answer including steps using source control you can refer to.
I also test deploying directly from VS Code, which works fine, too.
Just like the link Monika post, the step to modify package.json you might forget. And make sure your project works well locally before publish to Azure.
package.json:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "node server.js"
Below mentioned way's do not need server.js file or next export or pm2 scripts for deployment process.
Keep your package.json scripts as default next scripts:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
}
Way 1: VS Code - Azure Extension
Add below environment variable in your Azure App Service from Settings > Configurations
SCM_DO_BUILD_DURING_DEPLOYMENT="true"
Right Click on Azure App Service item and select Deploy to Web App option.
Select root folder for deployment.
Way 2: CI/CD Pipeline through Azure Devops(https://dev.azure.com/)
Here is a sample post you can refer
All credits goes to Suhas Talekar
https://itbusinesshub.com/blog/nextjs-node-app-on-azure-app-service/#how-to-host-next.js-app-on-azure's-app-service
Only change is you don't need pm2 script as startup command and no
need to create ecosystem.config.js file as well.
Rest process is same.
Starting nextjs app is taken care by Azure.
Related
I am trying to integrate PM2 to Google Cloud App Engine but I just couldn't work it around. I am using PM2 for my site's staging site and I am very impressed with it. I use Digital Ocean droplet for staging. I realized that Google Cloud App Engine is not that flexible.
This is my package.json:
"main": "server.js",
"scripts": {
"start": "NODE_ENV=production npm run server:prod",
"server:prod": "node server.js",
"server:stage": "NODE_ENV=stage pm2 start server.js --exp-backoff-restart-delay=100 -i max",
"dev": "nodemon server.js",
"gcp-deploy-stage": "gcloud app deploy app.backend.stage.yaml --project=xxxxx",
"gcp-deploy-prod": "gcloud app deploy app.backend.prod.yaml --project=xxxx -v=alpha-16"
},
When I set production script start as staging like this:
"server:prod":"pm2 start server.js --exp-backoff-restart-delay=100 -i max"
and deploy this Google Cloud App Engine normally crashes because there is no global PM2 installed via NPM to start PM2.
Is there anybody went through this and made it work? Or any piece of code or any documentation that could lead me to the right solution?
Or the only option is migrating this to Google Cloud Compute Engine?
Thank you for reading this and your help.
If you want to use any module, you're going to have to include it in your package.json. Have you tried running npm install --save-dev pm2, and then redeploying your site? My guess is, that's going to get you where you want to go.
All of that aside - this probably isn't a good idea :) pm2 does a lot to manage processes on the machine, specifically dealing with crashes. App Engine Flexible does a lot of this at the infrastructure layer, automatically looking at instance health. It uses docker under the hood, which has it's own restart strategy. And then on top of that, if the the docker retry strategy doesn't work, the Google Load Balancer kicks in and will start a new compute instance for you. It's entirely possible doing process level monitoring and restarting like this will work, I just want to make sure you understand everything else that's happening under the hood.
Curiosity killed the cat - why did you end up going with App Engine Flexible over App Engine Standard?
I'm a senior .NET developer wanting to move into MERN, full-stack. Is there a scaffolding tool that will quickly get me setup and that also supports authorization (register/login features, etc), built-in?
Express development is fairly unopinionated. As a result of that flexibility, there's a lot less built into it than there is in more opinionated framework like Rails for example.
The other thing is that since the MERN stack isn't monolithic, you'll need to set up the front and back ends independently.
The two most common 'scaffolding' tools I've come across in MERN development are Create React app and Express generator. These will get you started with a front end and a server that will run immediately, but for things like auth, you'll either need to build your own, or install packages that will handle it for you.
I've seen open source templates on Github that you can start with, but since things change so fast, I personally don't like the idea of starting off with someone else's outdated code.
Hope that helps!
For whoever lands on this page like I did.
I found two option for MERN scaffolding. The first is deprecated and the second seems to be abandoned and/or incomplete:
mern-cli (http://npmjs.com/package/mern-cli) (DEPRECATED)
mern (http://npmjs.com/package/mern) (ABANDONED)
My solution was to keep my React UI and Express API on separate directory, say "ui" and "server", in my project's root directory.
Then I use the cors module (http://npmjs.com/package/cors) to handle cross site resource sharing for development environment only, so that my react app can talk to my express server, which is running on a different port during development, like this (in server.js)
const cors = require('cors');
if (app.get('env').trim() == 'development') {
app.use(cors());
}
For production I just run a batch script that copies all the files from my ui/build directory to server/public directory after the react build process is complete. The scripts section of my package.json looks like this:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"postbuild": "copy-build.bat",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
And the content of batch file reference in the postbuild key is
xcopy "build\*" "..\server\public" /s /y
If you prefer or have to use a bash script instead you can make a copy-build.sh file with the content
cp -r build/* ../server/public
I am very new to server side scripting. And I am using NodeJS. My Problem is that after adding some new features to the app, i.e. after changing the code, these changes will be applied only after restarting the server. Till then NodeJS behaves so as though I hadn't changed anything. So for instance if I add console.log("works") and don't restart the server, then it hasn't any effect.
I am using Nuxt.js, which is actually the Vue.js framework but with additional and very usefull features mainly for server side rendering. I didn't integrate the express.js at the beginning of the project, beacause it wasn't planned to write any server side code. So I am normally exporting express and using it, which is pretty fine for me, since I need just a couple lines of code to use the NodeJS file system.
So, as it is pretty hard to code, if I should restart the server once I changed anything, I want to ask you if there is any solution to this problem.
Use nodemon
step 1 : npm install -g nodemon <- this will install nodemon globaly in your system
step 2 : change your start script within package.json
"scripts": {
"start": "nodemon fileName" <- like this //filename is you root file which starts the app like app.js
}
step 3 : npm start
This is already build in into nuxt. You just need to run it in dev mode, not in production.
E.g. for dev with change monitoring
nuxt
For production without monitoring
nuxt start
So in this particular case the following changes to the "scripts" in package.json have solved my problem.
"scripts": {
"dev": "nodemon --watch api --exec \"nuxt\"",
"start": "nodemon nuxt",
}
The following link could also be usefull to you.
Install nodemmon in your application to allow live update npm -g install nodemon
and add the following codes inside your packages json file :
"main": "app.js",
"scripts": {
"start": "node app"
},
on your command line, just type : start
I have a node app which in development is usin 2 servers one for my node side and another for my react side. I am running this using a line in my package.
"scripts": {
"start": "node app.js",
"server": "nodemon --inspect-brk app.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
when I run npm run devit all works, however when I run node start the server starts running however when you go to the / root url it gives a 404 status error. I assume that's because the app doesn't know where to look for the index.html file or how to kick off the app though I could be completely wrong.
my folder structure is:
As you can see my client folder holds all of the react stuff. the src is the uncompiled react and the build holds my actual index.html fil along with the static folder which holds the compiled react stuff :
so how do I get that to actually work or point me in the direction to look? I guess i've been spoiled with most apps just knowing out of the box how to do this.
UPDATE:
so i have 2 routes currently setup
//initiate route handlers
app.use('/login', require('./routes/authRoutes'));
app.use('/tiles', require('./routes/tileRoutes'));
inside of /login I have for example
router.get('/', (req, res)=>{
some code here...
}
however going to either of those, so if I navigate to localhost:5000/login, I still get a 404 error
If I understand this correctly it works when I run npm run dev because 2 serves spin up. the one server handles all my node code and the second handles all my react code. However I don't want to run 2 servers as my deployment to heroku definitely won't. So how do I merge to 2 so to speak?
Use express.static() function to host static files on your express server. See more here: https://expressjs.com/en/starter/static-files.html
I'm struggling to figure out how to deploy multiple nodejs services on google app engine flexible.
I'm using multiple nodejs classes with firebase-queue to process my tasks.
Right now, i'm using my package.json to trigger starting everything at once.
However, this has become problematic. I would like to be able to push a change to one particular service/script without having to stop every other script.
My package.json currently looks like something like this:
"scripts": {
"task1": "node ./src/task1.js",
"task2": "node ./src/task2.js",
"start": "npm-run-all -p task1 task2"
}
I'm using different .yaml files to determine which build variant I want to push (Debug or Release) but am finding it hard to deploy each task individually. I found documentation on how to do so in python, but nothing on nodejs. Does anyone have any suggestions?
(Answering my own question, big thanks to Justin for helping)
I was specifically having issues dynamically changing the script to start in my package.json.
I found the package.json can access environment variables using '$'
package.json:
"scripts": {
"start": "node $SCRIPT_TO_RUN"
}
myService.yaml
runtime: nodejs
vm: true
api_version: 1
instance_class: B4
manual_scaling:
instances: 1
service: cart-monitor-dev
env_variables:
SCRIPT_TO_RUN: './src/mytask.js'
Then deploy using:
gcloud app deploy myService.yaml
This is exactly why App Engine services exist :) You can create a {serviceName}.yaml for each service you want to deploy. Then, call gcloud app deploy service.yaml for each one. That creates multiple services in the same app. For an example see:
https://github.com/JustinBeckwith/cloudcats
Hope this helps!