2

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

我已经添加了所有必要的东西，比如web.config文件到public文件夹，并将构建目录添加到工作区。

在 Azure 应用服务上部署 Web 应用

使用 Visual Studio Code 将 Node.js 部署到 Azure 应用服务

遵循所有步骤，但当我尝试在 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

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

4

2 回答 2

7

在做了一些谷歌搜索后找到了解决方案。我们需要在 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
于 2020-08-20T08:33:26.917 回答
3

从日志看起来这不是一个Node.js应用程序，而是一个react应用程序。因此react-scripts start，Azure App Service 对此一无所知。

react当您在 localhost 上运行应用程序时，它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. 假设您已通过 登录 Azure vscode，右键单击该build文件夹并选择deploy to static site，按照步骤操作，您将使用您的 react 应用程序。

但是，如果您Node.js express在应用程序旁边确实有一个后端react，那么您可以将build文件夹放入与文件夹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', (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}...`);
});

当/被击中，然后index.html被服务。API 调用按照/api/*. 我发现这种机制很多次都很有用。

祝你好运。

于 2020-08-19T14:58:02.433 回答