Azure App Service에 React JS 애플리케이션을 배포 할 수 없습니다.

Aug 19 2020

azure 앱 서비스에 React Js 애플리케이션을 배포하기위한 몇 가지 링크를 살펴 보았습니다. 하지만 응용 프로그램을 배포하는 동안 몇 가지 문제가 있습니다.

web.config파일 과 같은 필요한 모든 것을 public폴더에 추가하고 작업 공간에 빌드 디렉토리도 추가했습니다.

Azure App Service에 웹앱 배포

Visual Studio Code를 사용하여 Azure App Service에 Node.js 배포

모든 단계를 따랐지만 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 [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

그러나 일이 같은 응용 프로그램이 명령 아래 완벽 지역에서 실행됩니다 npm install, npm start.

npm run build다음 명령을 사용하여 빌드 디렉토리에서 응용 프로그램 실행을 시도한 후 생성 된 빌드가 작동 하는지 확인하십시오.

npm install -g serve

그때

serve -s build

그런 다음 응용 프로그램이 브라우저에서 열립니다.

답변

2 rav Aug 19 2020 at 21:58

로그에서 이것은 Node.js애플리케이션이 아니라 애플리케이션 인 것처럼 보입니다 react. 따라서 react-scripts startAzure App Service는 아무것도 알지 못합니다.

당신이 실행하면 react로컬 호스트에서 응용 프로그램을, 그것은에 의해 제공됩니다 development server참으로 인 Node.js서버, 그러나 당신이 사용하는 생산을 구축하면 npm run build그것은 아무것도하지만,하지 index.html의 무리에 의해 구동 파일 .js파일과 스타일. 그 자체로는 웹 기능이 없습니다.

serve반면에 별도의 이야기입니다. 다음의 설명에 따라 npmjs.com: 정적 사이트, 단일 페이지 애플리케이션 또는 정적 파일 (장치 또는 로컬 네트워크에 관계없이)을 제공하고 싶다고 가정하면이 패키지가 적합한 선택입니다.

그러나 이것은 Azure와 같은 접근 방식이 아닙니다.

그러나 프로덕션에서 Azure를 사용하는 경우 정적 사이트 호스팅 기능이있는 Azure Blob Storage v2를 사용하는 것이 좋습니다. 블롭 저장 정적 사이트 호스팅을 활성화하고 배포 build라는 이름의 용기에 폴더를 $web. 물론이 모든 vscode것은 Azure plugin. 를 통해 Azure에 로그인했다고 가정 vscode하고 build폴더를 마우스 오른쪽 단추로 클릭 하고을 선택 deploy to static site하고 단계를 수행하면 반응 앱을 사용할 수 있습니다.

그러나 앱 Node.js express과 함께 백엔드 가있는 경우 폴더와 동일한 수준 의 프로젝트에 폴더를 react넣고 정적 라우팅을 사용하여 프런트 엔드와 백엔드가 모두 단일 패키지로 작동하도록 할 수 있습니다. 요청시 파일 로 응답하도록 지시 할 경로를 명시 적으로 정의합니다 . 그런 다음 전체 패키지를 .buildNode.jsnode_modulesexpressindex.htmlAzure 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/*. 이 메커니즘이 여러 번 유용하다고 생각합니다.

행운을 빕니다.

2 PrateekNaik Aug 20 2020 at 15:33

인터넷 검색을 한 후 해결책을 찾았습니다 . 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