无法在Azure App服务上部署React JS应用程序

如何解决无法在Azure App服务上部署React JS应用程序

我正在浏览一些链接，以便在azure应用程序服务上部署React Js应用程序。但是我在部署应用程序时遇到了一些问题。

我已将web.config文件等所有必需的东西添加到public文件夹中，并且还将构建目录添加到了工作区中。

Deploying web app on azure app service

Deploy Node.js to Azure App Service using Visual Studio Code

按照所有步骤进行操作，但是当我尝试在azure应用程序服务上进行部署时出现以下错误。在部署之前，请务必运行以下命令

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

但是问题是同一应用程序可以使用以下命令在本地完美运行 npm install，npm start。

并仅通过以下命令验证在npm run build之后生成的内部版本是否正常运行

npm install -g serve

然后

serve -s build

然后在浏览器中打开应用程序。

解决方法

在进行谷歌搜索found solution之后。我们需要在Linux机器的应用程序服务配置中的启动命令中添加以下命令。

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

步骤：

- 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

,

从日志看来，这不是一个Node.js应用程序，而是一个react应用程序。因此react-scripts start是Azure App Service不了解的东西。

当您在本地主机上运行react应用程序时，该应用程序由development server供电，该服务器的确是Node.js服务器，但是一旦使用npm run build构建了该应用程序以进行生产它不过是由一堆index.html文件和样式表提供支持的.js文件。它本身没有网络功能。

另一方面，

serve是一个单独的故事。根据其在npmjs.com上的描述：假设您想提供静态站点，单页应用程序或仅提供静态文件（无论是在设备上还是在本地网络上），此软件包都是正确的选择为你。

但这不是类似Azure的方法。

但是，在生产中，如果使用的是Azure，我建议使用具有静态站点托管功能的Azure Blob Storage v2。在Blob存储中启用静态站点托管，并将build文件夹部署在名为$web的容器中。当然，如果您将vscode与Azure plugin一起使用，则所有这些操作都是自动完成的。假设您已通过vscode登录到Azure，请右键单击build文件夹并选择deploy to static site，然后按照以下步骤进行操作，即可使用react应用。

但是，如果您在Node.js express应用程序旁边确实有一个react后端，则可以将build文件夹放入与{{1} Node.js文件夹，并使用静态路由将前端和后端作为单个程序包工作。明确定义一条路由，以告诉node_modules在需要时使用express文件进行响应。然后，您可以将整个程序包部署到index.html中。

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',res) => { // Code to get user by id }); app.post('/api/user',res) => { // Code to save user }); app.listen(port,() => { console.log(`App bootstrapped on port ${port}...`); }); 后，将投放/。 API调用按index.html的定义进行服务。我发现这种机制非常有用。

祝你好运。