问题
I was going through the some of the links to deploy React Js application on the azure app service. But i am facing some problem while deploying the application.
I have added all the necessary things like web.config file to public folder and also added build directory to the workspace.
Deploying web app on azure app service
Deploy Node.js to Azure App Service using Visual Studio Code
followed all the steps but getting below error when i try to deploy on azure app service. Before deploying i do run these commands
npm run build.
2020-08-19T10:44:45.762075166Z A P P S E R V I C E O N L I N U X
2020-08-19T10:44:45.762079567Z
2020-08-19T10:44:45.762083667Z Documentation: http://aka.ms/webapp-linux
2020-08-19T10:44:45.762088167Z NodeJS quickstart: https://aka.ms/node-qs
2020-08-19T10:44:45.762092268Z NodeJS Version : v12.16.3
2020-08-19T10:44:45.762096468Z Note: Any data outside '/home' is not persisted
2020-08-19T10:44:45.762100768Z
2020-08-19T10:44:45.789282727Z Found build manifest file at '/home/site/wwwroot/oryx-manifest.toml'. Deserializing it...
2020-08-19T10:44:45.792738514Z Build Operation ID: |OtQwveNuO0A=.83a2ec6c_
2020-08-19T10:44:47.255197638Z Writing output script to '/opt/startup/startup.sh'
2020-08-19T10:44:47.960307930Z Running #!/bin/sh
2020-08-19T10:44:47.960336532Z
2020-08-19T10:44:47.960345833Z # Enter the source directory to make sure the script runs where the user expects
2020-08-19T10:44:47.960355334Z cd "/home/site/wwwroot"
2020-08-19T10:44:47.960363235Z
2020-08-19T10:44:47.960370735Z export NODE_PATH=$(npm root --quiet -g):$NODE_PATH
2020-08-19T10:44:47.960378436Z if [ -z "$PORT" ]; then
2020-08-19T10:44:47.960386136Z export PORT=8080
2020-08-19T10:44:47.960393937Z fi
2020-08-19T10:44:47.960401238Z
2020-08-19T10:44:47.960408638Z echo Found tar.gz based node_modules.
2020-08-19T10:44:47.960416339Z extractionCommand="tar -xzf node_modules.tar.gz -C /node_modules"
2020-08-19T10:44:47.960424040Z echo "Removing existing modules directory from root..."
2020-08-19T10:44:47.960431740Z rm -fr /node_modules
2020-08-19T10:44:47.960439141Z mkdir -p /node_modules
2020-08-19T10:44:47.960446542Z echo Extracting modules...
2020-08-19T10:44:47.960453842Z $extractionCommand
2020-08-19T10:44:47.960461243Z export NODE_PATH="/node_modules":$NODE_PATH
2020-08-19T10:44:47.960468943Z export PATH=/node_modules/.bin:$PATH
2020-08-19T10:44:47.960476344Z if [ -d node_modules ]; then
2020-08-19T10:44:47.960483745Z mv -f node_modules _del_node_modules || true
2020-08-19T10:44:47.960491245Z fi
2020-08-19T10:44:47.960498446Z
2020-08-19T10:44:47.960505546Z if [ -d /node_modules ]; then
2020-08-19T10:44:47.960524748Z ln -sfn /node_modules ./node_modules
2020-08-19T10:44:47.960532849Z fi
2020-08-19T10:44:47.960540149Z
2020-08-19T10:44:47.960547550Z echo "Done."
2020-08-19T10:44:47.960554951Z npm start
2020-08-19T10:44:48.258132115Z Found tar.gz based node_modules.
2020-08-19T10:44:48.258154316Z Removing existing modules directory from root...
2020-08-19T10:44:48.260461807Z Extracting modules...
2020-08-19T10:44:48.262765098Z tar (child): node_modules.tar.gz: Cannot open: No such file or directory
2020-08-19T10:44:48.262778299Z tar (child): Error is not recoverable: exiting now
2020-08-19T10:44:48.262970515Z tar: Child returned status 2
2020-08-19T10:44:48.262983816Z tar: Error is not recoverable: exiting now
2020-08-19T10:44:48.290740216Z Done.
2020-08-19T10:44:48.512406278Z npm info it worked if it ends with ok
2020-08-19T10:44:48.512836614Z npm info using npm@6.14.4
2020-08-19T10:44:48.512976126Z npm info using node@v12.16.3
2020-08-19T10:44:48.578204629Z npm info lifecycle adal_appp@0.1.0~prestart: adal_appp@0.1.0
2020-08-19T10:44:48.584464048Z npm info lifecycle adal_appp@0.1.0~start: adal_appp@0.1.0
2020-08-19T10:44:48.589867495Z
2020-08-19T10:44:48.589881796Z > adal_appp@0.1.0 start /home/site/wwwroot
2020-08-19T10:44:48.589887297Z > react-scripts start
2020-08-19T10:44:48.589891697Z
2020-08-19T10:44:48.597331914Z sh: 1: react-scripts: not found
2020-08-19T10:44:48.598224588Z npm info lifecycle adal_appp@0.1.0~start: Failed to exec start script
2020-08-19T10:44:48.599091959Z npm ERR! code ELIFECYCLE
2020-08-19T10:44:48.599182267Z npm ERR! syscall spawn
2020-08-19T10:44:48.599258573Z npm ERR! file sh
2020-08-19T10:44:48.599314678Z npm ERR! errno ENOENT
2020-08-19T10:44:48.600738196Z npm ERR! adal_appp@0.1.0 start: `react-scripts start`
2020-08-19T10:44:48.600749897Z npm ERR! spawn ENOENT
2020-08-19T10:44:48.600754497Z npm ERR!
2020-08-19T10:44:48.600758798Z npm ERR! Failed at the adal_appp@0.1.0 start script.
2020-08-19T10:44:48.600763398Z npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-08-19T10:44:48.605436585Z npm timing npm Completed in 125ms
2020-08-19T10:44:48.605621800Z
2020-08-19T10:44:48.605672405Z npm ERR! A complete log of this run can be found in:
2020-08-19T10:44:48.605750311Z npm ERR! /root/.npm/_logs/2020-08-19T10_44_48_601Z-debug.log
But the thing is the same application runs perfectly on local with below commands
npm install , npm start.
and just to verify whether the build which generated after npm run build works or not tried running the application from the build directory with below commands
npm install -g serve
then
serve -s build
then application opens up in browser.
回答1:
From the log it looks like this is not a Node.js application, but a react application. Therefore react-scripts start is something the Azure App Service doesn't know anything about.
When you run a react app on localhost, it is powered by a development server which indeed is a Node.js server, but once you build it for production using npm run build it is nothing but an index.html file powered by a bunch of .js files and stylesheets. It has no web capabilities in itself.
serve on the other hand is a separate story. As per their description at npmjs.com: Assuming you would like to serve a static site, single page application or just a static file (no matter if on your device or on the local network), this package is just the right choice for you.
But this is not an Azure-like approach.
In production however, if you are using Azure, I recommend using Azure Blob Storage v2, which has static site hosting capabilities. Enable static site hosting in the blob storage and deploy the build folder in a container named $web. Ofcourse all of this is automatically done if you are using vscode with the Azure plugin. Assuming you have signed into Azure thru vscode, right-click on the build folder and select deploy to static site, follow the steps and you will be live with your react app.
However, if you do have a Node.js express backend alongside the react app, then you may put the build folder into the Node.js project at the same level as the node_modules folder and use static routing to have both frontend and backend work as a single package. Explicitly define a route to tell express to respond with the index.html file when asked for. Then you can deploy the whole package into an Azure App Service.
const express = require('express');
const path = require('path');
const port = process.env.PORT || 3006;
const app = express();
app.use(express.json())
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json({extended: true}));
app.use(express.static(__dirname + '/build'));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname + '/build/index.html'))
});
// Then prefix your API endpoints with /api
app.get('/api/user/:id', (req, res) => {
// Code to get user by id
});
app.post('/api/user', (req, res) => {
// Code to save user
});
app.listen(port, () => {
console.log(`App bootstrapped on port ${port}...`);
});
When / is hit, then index.html is served. API calls served as defined with /api/*. I find this mechanism useful many a times.
Good luck.
回答2:
After doing some googling found solution. We need to add the below command in start up command in app service configuration for the Linux machines.
pm2 serve /home/site/wwwroot --no-daemon
Steps:
- Go to App Service
- Navigate to Configuration
- Click on General Settings
- add the above command in Start up command, click on save
- then restart the server
来源：https://stackoverflow.com/questions/63485396/unable-to-deploy-react-js-application-on-azure-app-service