No se puede implementar la aplicación React JS en el servicio de aplicaciones de Azure

Aug 19 2020

Estaba revisando algunos de los enlaces para implementar la aplicación React Js en el servicio de aplicaciones de Azure. Pero estoy enfrentando algún problema al implementar la aplicación.

Agregué todas las cosas necesarias, como web.configarchivo a publiccarpeta, y también agregué el directorio de compilación al espacio de trabajo.

Implementación de una aplicación web en el servicio de aplicaciones de Azure

Implemente Node.js en Azure App Service con Visual Studio Code

Seguí todos los pasos pero obtuve el siguiente error cuando intento implementar en el servicio de aplicaciones de Azure. Antes de implementar, ejecuto estos comandos

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 [email protected]
2020-08-19T10:44:48.512976126Z npm info using [email protected]
2020-08-19T10:44:48.578204629Z npm info lifecycle [email protected]~prestart: [email protected]
2020-08-19T10:44:48.584464048Z npm info lifecycle [email protected]~start: [email protected]
2020-08-19T10:44:48.589867495Z 
2020-08-19T10:44:48.589881796Z > [email protected] 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 [email protected]~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! [email protected] 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 [email protected] 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

Pero la cosa es que la misma aplicación se ejecuta perfectamente en local con los siguientes comandos npm install, npm start.

y solo para verificar si la compilación que se generó después npm run buildfunciona o no intentó ejecutar la aplicación desde el directorio de compilación con los siguientes comandos

npm install -g serve

después

serve -s build

luego la aplicación se abre en el navegador.

Respuestas

2 rav Aug 19 2020 at 21:58

Del registro parece que esto no es una Node.jsaplicación, sino una reactaplicación. Por lo tanto react-scripts start, es algo de lo que Azure App Service no sabe nada.

Cuando ejecuta una reactaplicación en localhost, funciona con development serverun Node.jsservidor, pero una vez que la crea para la producción npm run build, no es más que un index.htmlarchivo alimentado por un montón de .jsarchivos y hojas de estilo. No tiene capacidades web en sí mismo.

servepor otro lado es una historia aparte. Según su descripción en npmjs.com: Suponiendo que le gustaría servir un sitio estático, una aplicación de una sola página o simplemente un archivo estático (sin importar si está en su dispositivo o en la red local), este paquete es la opción correcta para usted.

Pero este no es un enfoque similar al de Azure.

Sin embargo, en producción, si usa Azure, le recomiendo usar Azure Blob Storage v2, que tiene capacidades de alojamiento de sitios estáticos. Habilite el alojamiento de sitios estáticos en el almacenamiento de blobs e implemente la buildcarpeta en un contenedor denominado $web. Por supuesto, todo esto se hace automáticamente si está utilizando vscodecon el Azure plugin. Suponiendo que haya iniciado sesión en Azure a través vscodede , haga clic con el botón derecho en la buildcarpeta y seleccione deploy to static site, siga los pasos y estará en vivo con su aplicación de reacción.

Sin embargo, si tiene un Node.js expressbackend junto con la reactaplicación, puede colocar la buildcarpeta en el Node.jsproyecto al mismo nivel que la node_modulescarpeta y usar el enrutamiento estático para que tanto el frontend como el backend funcionen como un solo paquete. Defina explícitamente una ruta para indicarle expressque responda con el index.htmlarchivo cuando se le solicite. Luego, puede implementar todo el paquete en un archivo 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}...`);
});

Cuando /se golpea, entonces index.htmlse sirve. Las llamadas a la API se sirven según lo definido con /api/*. Encuentro este mecanismo útil muchas veces.

Buena suerte.

2 PrateekNaik Aug 20 2020 at 15:33

Después de buscar en Google , encontré una solución . Necesitamos agregar el siguiente comando en el comando de inicio en la configuración del servicio de aplicaciones para las máquinas Linux.

pm2 serve /home/site/wwwroot --no-daemon

Pasos:

- 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