node.js - 如何将 React 应用部署到 Azure 应用服务

问题描述

所以我试图将一个简单的反应应用程序部署到 Azure，我最初是从我试图部署的一些复杂的东西开始的。我收到了很多没有意义的错误代码，这是我第一次尝试在天蓝色上获得类似的东西。所以我决定回到基础，尝试让一个最简单的 React 应用程序在应用程序服务上运行。所以我创建了一个新的 react 应用程序，npx create-react-app myapp我创建了一个新的存储库并将该代码上传到我的 github，转到 azure，创建了一个新的应用程序服务，以尽可能低的分层定价，并将我的 github 连接到该应用程序服务以进行部署。不过，在部署期间，我收到了这个错误堆栈

Run npm install

> core-js@2.6.11 postinstall /home/runner/work/react-basic/react-basic/node_modules/babel-runtime/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js@3.6.4 postinstall /home/runner/work/react-basic/react-basic/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js-pure@3.6.4 postinstall /home/runner/work/react-basic/react-basic/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules/jest-haste-map/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1646 packages from 787 contributors and audited 1786 packages in 26.789s

65 packages are looking for funding
  run `npm fund` for details

found 781 vulnerabilities (100 low, 182 moderate, 499 high)
  run `npm audit fix` to fix them, or `npm audit` for details

> hello@0.1.0 build /home/runner/work/react-basic/react-basic
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  39.38 KB  build/static/js/2.43f2ee7e.chunk.js
  770 B     build/static/js/runtime-main.d67d11c1.js
  284 B     build/static/js/main.2c72b389.chunk.js
  72 B      build/static/css/main.d498bfb3.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy


> hello@0.1.0 test /home/runner/work/react-basic/react-basic
> react-scripts test

No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
In /home/runner/work/react-basic/react-basic
  2 files checked.
  testMatch: /home/runner/work/react-basic/react-basic/src/**/__tests__/**/*.{js,jsx,ts,tsx}, /home/runner/work/react-basic/react-basic/src/**/*.{spec,test}.{js,jsx,ts,tsx} - 0 matches
  testPathIgnorePatterns: /node_modules/ - 2 matches
  testRegex:  - 0 matches
Pattern:  - 0 matches
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hello@0.1.0 test: `react-scripts test`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the hello@0.1.0 test 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/runner/.npm/_logs/2021-09-10T15_42_53_869Z-debug.log
Error: Process completed with exit code 1.

我查看了几篇文档，但我还没有找到任何显示在 azure 上设置 React 应用程序的正确方法的内容，一个这样的文档已经接近，它让我从应用程序服务下载发布配置文件并保存它进入 github 密钥，然后从 github 操作设置工作流，这个例子让我最接近，因为应用程序将构建和部署，除了它不起作用，它就像它不会进入构建文件夹并定位 index.html ，并在 kudu 控制台上的 wwwroot 处。包括构建文件夹在内的所有文件都存在。

在这一点上，我只想用最简单的方法将 SPA 部署到 azure 应用服务。任何具体的文件将不胜感激！

标签： node.jsreactjsazure

node.js - 如何将 React 应用部署到 Azure 应用服务

问题描述

解决方案

推荐阅读