Impossible de déployer l'application React JS sur Azure App service

Aug 19 2020

J'étais en train de parcourir certains des liens pour déployer l'application React Js sur le service d'application azure. Mais je rencontre un problème lors du déploiement de l'application.

J'ai ajouté toutes les choses nécessaires comme le web.configfichier au publicdossier et également ajouté le répertoire de construction à l'espace de travail.

Déployer une application Web sur Azure App Service

Déployer Node.js sur Azure App Service à l'aide de Visual Studio Code

suivi toutes les étapes, mais obtenir l'erreur ci-dessous lorsque j'essaye de déployer sur Azure App Service. Avant de déployer, j'exécute ces commandes

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

Mais la chose est la même application fonctionne parfaitement sur local avec des commandes ci - dessous npm install, npm start.

et juste pour vérifier si la construction qui a généré après les npm run buildtravaux ou non a essayé d'exécuter l'application à partir du répertoire de construction avec les commandes ci-dessous

npm install -g serve

alors

serve -s build

puis l'application s'ouvre dans le navigateur.

Réponses

2 rav Aug 19 2020 at 21:58

D'après le journal, il semble que ce n'est pas une Node.jsapplication, mais une reactapplication. C'est donc react-scripts startquelque chose dont Azure App Service ne sait rien.

Lorsque vous exécutez une reactapplication sur localhost, elle est alimentée par un serveur development serverqui est en effet un Node.jsserveur, mais une fois que vous l'avez créée pour la production, npm run buildelle n'est rien d'autre qu'un index.htmlfichier alimenté par un tas de .jsfichiers et de feuilles de style. Il n'a pas de capacités Web en soi.

served'autre part, c'est une histoire à part. Selon leur description sur npmjs.com: En supposant que vous souhaitiez servir un site statique, une application d'une seule page ou simplement un fichier statique (que ce soit sur votre appareil ou sur le réseau local), ce package est juste le bon choix pour vous.

Mais ce n'est pas une approche de type Azure.

En production, cependant, si vous utilisez Azure, je vous recommande d'utiliser Azure Blob Storage v2, qui dispose de capacités d'hébergement de site statique. Activez l'hébergement de site statique dans le stockage d'objets blob et déployez le builddossier dans un conteneur nommé $web. Bien sûr, tout cela est fait automatiquement si vous utilisez vscodeavec le Azure plugin. En supposant que vous êtes connecté à Azure via vscode, cliquez avec le bouton droit sur le builddossier et sélectionnez deploy to static site, suivez les étapes et vous serez en direct avec votre application de réaction.

Cependant, si vous avez un Node.js expressbackend à côté de l' reactapplication, vous pouvez placer le builddossier dans le Node.jsprojet au même niveau que le node_modulesdossier et utiliser le routage statique pour que le frontend et le backend fonctionnent comme un seul package. Définissez explicitement une route pour indiquer expressde répondre avec le index.htmlfichier lorsque cela vous est demandé. Ensuite, vous pouvez déployer l'ensemble du package dans un fichier 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}...`);
});

Quand /est frappé, puis index.htmlest servi. Appels d'API servis comme défini avec /api/*. Je trouve ce mécanisme utile plusieurs fois.

Bonne chance.

2 PrateekNaik Aug 20 2020 at 15:33

Après avoir cherché une solution sur Google . Nous devons ajouter la commande ci-dessous dans la commande de démarrage dans la configuration du service d'application pour les machines Linux.