ไม่สามารถปรับใช้แอปพลิเคชัน React JS บนบริการ Azure App

Aug 19 2020

ฉันกำลังอ่านลิงก์บางส่วนเพื่อปรับใช้แอปพลิเคชัน React Js บนบริการแอป azure แต่ฉันกำลังประสบปัญหาในขณะที่ปรับใช้แอปพลิเคชัน

ฉันได้เพิ่มสิ่งที่จำเป็นทั้งหมดเช่นweb.configไฟล์ลงในpublicโฟลเดอร์และยังเพิ่มไดเร็กทอรีบิลด์ลงในพื้นที่ทำงาน

การปรับใช้เว็บแอปบนบริการแอป Azure

ปรับใช้ Node.js กับ Azure App Service โดยใช้ 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 [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 installnpm start

และเพียงเพื่อตรวจสอบว่าบิลด์ที่สร้างขึ้นหลังจากใช้npm run buildงานได้หรือไม่พยายามเรียกใช้แอปพลิเคชันจากไดเร็กทอรีบิลด์ด้วยคำสั่งด้านล่าง

npm install -g serve

แล้ว

serve -s build

จากนั้นแอปพลิเคชันจะเปิดขึ้นในเบราว์เซอร์

คำตอบ

2 rav Aug 19 2020 at 21:58

จากบันทึกดูเหมือนว่านี่ไม่ใช่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 ซึ่งมีความสามารถในการโฮสต์ไซต์แบบคงที่ เปิดใช้งานเว็บไซต์โฮสติ้งแบบคงที่ในการจัดเก็บหยดและปรับใช้โฟลเดอร์ในภาชนะที่มีชื่อว่าbuild $webแน่นอนว่าทั้งหมดนี้ทำได้โดยอัตโนมัติหากคุณใช้vscodeกับไฟล์Azure plugin. สมมติว่าคุณได้ลงชื่อเข้าใช้ Azure ผ่านvscodeคลิกขวาที่buildโฟลเดอร์แล้วเลือกdeploy to static siteทำตามขั้นตอนและคุณจะใช้งานแอปตอบกลับได้

อย่างไรก็ตามหากคุณมี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/*. ฉันพบว่ากลไกนี้มีประโยชน์หลายครั้ง

โชคดี.

2 PrateekNaik Aug 20 2020 at 15:33

หลังจากทำบาง googling วิธีการแก้ปัญหาที่พบ เราจำเป็นต้องเพิ่มคำสั่งด้านล่างในคำสั่งเริ่มต้นในการกำหนดค่าบริการแอปสำหรับเครื่อง Linux