Permission denied on deploying react web app on azure - azure

I am deploying a react web app on azure by creating a workflow on github.
Now after committing changes it shows an error on creating build as:
The same error occured when I was deploying it using surge.sh
Can anyone help me out?

It seems to be a problem related to the Node.js module in your repository. Therefore, I suggest you do the following
Part 1: Reinstall the Node module
yarn uninstall
yarn install
Part 2: Redeploy the project via GitHub Action
Part 3: Deploy the React app directly from Azure Portal

Adding to Mark's response. Try the following steps to further narrow-down the issue:
-Please check if there is a .deployment file in the root of the repository, and provide this file if present, along with the deploy._ file if present (deploy.cmd, deploy.sh, deploy.ps1).
-Just to isolate, test the deployment directly from your local Git repository to a new App Service.
--If a .deployment and deploy.sh file are included in the root directory of the app code, Kudu will use the legacy build to run the commands specified in the deploy.sh script.
--Just to highlight on this, Kudu is the engine behind Git deployments on both Windows and Linux. By default, App service uses Oryx to build/install and Kudu will determine type of stack is used and creates a generic deploy.sh script to install the packages.
-App Service sets the environment variable PORT in the Node.js container, and forwards the incoming requests to your container at that port number. your app should listen to that port using process.env.PORT
const port = process.env.PORT || 3000
1.Add a start-up script: Add the PM2 configuration file or your script file
2.Go to Azure Configuration>General Settings
If your build folder is at the root of the project:
Start up command: pm2 serve /home/site/wwwroot --no-daemon --spa
Certain web frameworks may use custom startup scripts when running in production mode.
Refer this doc Customize build automation for more details.

Related

Error running nextjs with PM2 on Azure App Service on Linux

The pipelines and releases seem to work finely as they get the artifact deployed on the app service or so it seems as the output error happens on start of the PM2 process.
I haven't found anything on this error on google, and don't know if there is a way to update PM2 on the app service machine as PM2 itself suggests.
These are the logs.
Error message
summary image
I was expecting the app to work and no longer show an application error as I fixed both build and release pipelines.
This is a picture of the important bit of info of the error as its really long
Check the below steps to run nextjs with PM2.
First create a nextJS app.
Run npm run dev command to run the app in development.
Deploy the app to Azure Linux App Service.
Open the SSH of the Azure App Service to run the PM2 commands.
We can open directly with the below URL.
Path to SSH - https://YourDeployedAppName.scm.azurewebsites.net/
OR
Navigate to the deployed Azure Linux App => Advanced Tools => Go => SSH.
Run the below command to install PM2.
npm install pm2 -g
Thanks #Azure OSS Developer Support for the commands.
In Configuration section => General Settings add the Startup command.
pm2 start site/root/index.js --name mynpmnextapp
Your path may differ for the index.js file.
My app entry point is index.js.For some apps it can be server.js.Change it according to your app.
cannot find module `../build/output/log'
Make sure you are not running the PM2 with the output folder. As mentioned above it has to be the entry point either server.js or index.js based on your code files.
don't know if there is a way to update PM2 on the app service
In the KUDU Console use npm install pm2#latest -g to update the PM2.
References taken from MSDoc and npmjs.

Changing Jelastic Node.js root folder

I am trying to deploy a React app in my Jelastic Node.js server but I am not being able to make it work.
I am using vite for building. To test the deployment, I am building my app on my local environment and deploying the build directory into the Node.js server which works fine sometimes but sometimes it too doesn't work and the site is unreachable. I don't know what causes this.
But I want to make this process automatic and set the root directory to dist directory which is default build directory for vite so that I could pull it from GitHub and run build command and deploy it automatically. I searched for changing the configurations in Jelastic Node.js but couldn't find any relating to this issue.
You can either a) add VCS project into any non ROOT context, and for ROOT create a symlink through WebSSH (but this can cause downtime during deployment) or b) add VCS project into any non ROOT context and add a deployment hook to which copy content from dist into ROOT (and in this case downtime is minimized).

Connect Node.js API to virtual machine on Microsoft Azure / Azure CLI

Currently, I'm working on a project which is hosted on Microsoft Azure as a resource. The project is presented on a virtual machine and is operated using commands on the Azure CLI.
Now I've been asked to create a web app for it using Node.js and React.js. I'm totally lost on how to connect the Node.js API to the virtual machine. Is there any way to trigger those Azure CLI commands through a Node.js app. Any help would be appreciated!
EDIT:
Managed to solve the issue. Used this npm package 'ssh-exec' which lets you execute commands on a virtual machine remotely after connecting using IP Address, username, password. Very simple to use.
Link to package - https://www.npmjs.com/package/ssh-exec
Managed to solve the issue. Used this npm package 'ssh-exec' which lets you execute commands on a virtual machine remotely after connecting using IP Address, username, password. Very simple to use.
Link to package - https://www.npmjs.com/package/ssh-exec
There are some few steps to connect Node.js API to VM,
Firstly, we need to clone the project that we will be deploying to the Azure VM. This project is a basic Node.js API with a single endpoint for returning an array of todo objects. Go to the location where you want to store the project and clone it:
git clone --single-branch --branch base-project https://github.com/coderonfleek/node-azure-vm.git
Once the project has been cloned, go to the root of the project and install dependencies:
cd node-azure-vm
npm install
Run the application using the npm run dev command. The application will start up at the address http://localhost:5000. When the application is up and running, enter http://localhost:5000/todos in your browser to see the list of todos.
enter image description here
Now, go to the package.json file of your project and add these scripts in the scripts sections:
"scripts": {
.....,
"stop": "pm2 kill",
"start": "pm2 start server.js"
}
The start and stop scripts will use the pm2 process manager to start and stop the Node.js application on the VM. The pm2 script will be installed globally on the VM when it has been set up.
At the root of the project, run the rm -rf .git command to remove any .git history. Then push the project to GitHub. Make sure that this is the GitHub account connected to your CircleCI account.
Then, Setting up a virtual machine on Azure to run Node.js.
Next, create a new VM on Azure and set its environment up for hosting the Node.js application. These are the steps:
Create a new VM instance
Install nginx
Configure nginx to act as a proxy server. Route all traffic to port 80 on your VM to the running instance of the Node.js application on port 5000
Install Node.js on the VM and clone the app from the GitHub repo into a folder in the VM
Install pm2 globally
Do not be intimidated by the complexity of these steps! You can complete all five with one command. At the root of your project, create a new file named cloud-init-github.txt; it is a cloud-init file. Cloud-init is an industry-standard method for cloud instance initialization.
cloud init- code
(REFER THE BELOW LINK FOR COMPLETE DETAILS)
https://circleci.com/blog/cd-azure-vm/

Azure Application error, but no issue in the logs

It is really frustrating as I am not able to resolve this issue of Application error. The app is up and running however when I try to access via azure URL, it gives the application error. Help would be appreciated
The error message
No issue in the logs, app is up and running
Your webapp is deployed on the Linux platform, and it is temporarily unclear what language your webapp is written in from the log.
Regarding the problem of Application Error, we usually add Startup Command to solve this problem.
Prerequisites:
Make sure that the port defined in the code uses the process.env.PORT parameter.
Example: In the nodejs project, when we are testing locally, we can define it like this:
const port = 8081 || process.env.PORT.
Then we need to add the startup command.
① If it is a vue project, the recommended command is
pm2 serve /home/site/wwwroot --no-daemon --spa
②If it is react or angular, it is recommended to use
npx serve -s
If you are using Python, you can refer to the following document.
Configure a custom startup file for Python apps on Azure App Service

Angular CLI app not running when deploying to Linux App Service

I'm trying to deploy an Angular CLI app to Azure App Service on Linux OS, using Azure Dev Ops - but no success. I get Image 1. No error in the server or application logs.
This is what I done so far:
Built the Angular CLI app using DevOps Build and placed the resulted "dist" folder to the "drop" folder. See below (Image 2) the tasks that compose my build. This is working fine and creating the expected files.
Created a release in DevOps, deploying all the dist files in the wwwroot folder in the Azure App Service in Linux. Shown below are both, the wwwroot folder (left) and my local dist folder (right) after I run a ng build --prod.
I have the suspicion that I need to kickstart the angular by feeding some time of command when doing the deployment. I have tried running "ng serve --host 0.0.0.0" but that didn't work.
Check the Azure App Service > Linux section on this page. Essentially, you have to serve the app. You can configure this with a ecoysystem.config.js PM2 file in the root directory, with this inside.
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
I also added npx serve -s in the App Service Configuration > General Settings > Startup Command
See also: https://burkeholland.github.io/posts/static-site-azure
I had to give the npx serve -s as the startup command
Then set the Runtime Stack with node framework 10.16 (NODE|10.16). See below
Then everything started working.
If you still want to use App Service - Web App you can just the Windows OS instead of Linux.
Here are the parameters I Used:
Since the output of building angular is a static web app, IIS will serve the site right away.
When using Linux App Service container, you may also select PHP stack containing Apache2 Server. Since, Angular files are static ones (JS, CSS, HTML), so you just need some web server to serve this content.
Example configuration:
If you look at the default 'Deploy Node.js App to Azure App Service' release template, it uses the 'Deploy Azure App Service' task and adds the following commands to the task. this might help you out.
There is a subtle and big difference between the Linux and Windows App service: IIS - which in Windows is actively looking to serve any app, whereas in Linux you have to spin up something on your own to serve it - Express for example.
After some research I discovered that I don't need a full App service dedicated to run a static app (such as Angular or React). It can be done just as efficiently and much cheaper with something like Storage. -> https://code.visualstudio.com/tutorials/static-website/getting-started
I had the same problem on Azure App Service with Linux and Node, solved it using below startup command
pm2 serve /home/site/wwwroot --no-daemon --spa

Resources