getting error while trying to deploy a React app to Azure App Service

Question

I am trying to deploy a React site in Azure App Service. i get error and logs shows errors like below. Its a huge log so i pasted a part of it. when i run "npm run build" it works and generates a "dist" folder. but this error is when i try to publish to azure using App Azure Service extention of VSCode.

Any suggestions whats going on here.?

modules 0 active npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build: cross-env NODE_OPTIONS='--max-old-space-size=8192' NODE_ENV=production VIZ=true webpack --mode production --config webpack.config.prod.js --color -p --progress npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/.npm/_logs/2020-12-23T00_47_33_640Z-debug.log ../deps/libexpat/lib/xmlparse.c:6:32: warning: unknown option after ‘#pragma GCC diagnostic’ kind [-Wpragmas]\n #pragma GCC diagnostic ignored "-Wimplicit-fallthrough"\n ^~~~~~~~~~~~~~~~~~~~~~~~\nngrok - error unpacking binary Error: Could not find the End of Central Directory Record\n at DecompressZip.findEndOfDirectory (/tmp/8d8a6d70a2473e5/node_modules/decompress-zip/lib/decompress-zip.js:176:15)\n at _fulfilled (/tmp/8d8a6d70a2473e5/node_modules/q/q.js:854:54)\n at /tmp/8d8a6d70a2473e5/node_modules/q/q.js:883:30\n at Promise.promise.promiseDispatch (/tmp/8d8a6d70a2473e5/node_modules/q/q.js:816:13)\n at /tmp/8d8a6d70a2473e5/node_modules/q/q.js:624:44\n at runSingle (/tmp/8d8a6d70a2473e5/node_modules/q/q.js:137:13)\n at flush (/tmp/8d8a6d70a2473e5/node_modules/q/q.js:125:13)\n at processTicksAndRejections (internal/process/task_queues.js:79:11)\nngrok - install failed, retrying\n ⚠ Command failed: /tmp/8d8a6d70a2473e5/node_modules/cwebp-bin/vendor/cwebp -version\n/tmp/8d8a6d70a2473e5/node_modules/cwebp-bin/vendor/cwebp: error while loading shared libraries: libGL.so.1: cannot open shared object file: No such file or directory\n\n\n

Answer 1

Do the scripts below locally:

npm install
npm run build
npm start

Deploy to Azure Web App (Check the stack Configuration):

There should be one log like this shows compressing the Modules:

It should work: