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

Question

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

Run npm install

> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d3dfc2d59ddac3f0829e869e8181" rel="noreferrer noopener nofollow">[email protected]</a> postinstall /home/runner/work/react-basic/react-basic/node_modules/babel-runtime/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24474b5641094e5764170a120a10" rel="noreferrer noopener nofollow">[email protected]</a> postinstall /home/runner/work/react-basic/react-basic/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3834293e763128762b2e293e1b68756d756f" rel="noreferrer noopener nofollow">[email protected]</a> 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: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b6a3b5a6b5bea4a390e1fee2fee1e2" rel="noreferrer noopener nofollow">[email protected]</a> (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46203523302328323506776874687774" rel="noreferrer noopener nofollow">[email protected]</a>: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="761005130013180205364458455844" rel="noreferrer noopener nofollow">[email protected]</a> (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ef8edfbe8fbf0eaeddeacb0adb0ac" rel="noreferrer noopener nofollow">[email protected]</a>: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afc9dccad9cac1dbdcef9e819d819e9c" rel="noreferrer noopener nofollow">[email protected]</a> (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6a7f697a6962787f4c3d223e223d3f" rel="noreferrer noopener nofollow">[email protected]</a>: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f3e6f0e3f0fbe1e6d5a4bba7bba4a7" rel="noreferrer noopener nofollow">[email protected]</a> (node_modules/jest-haste-map/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f2e7f1e2f1fae0e7d4a5baa6baa5a6" rel="noreferrer noopener nofollow">[email protected]</a>: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98feebfdeefdf6ecebd8aab6a9b6aa" rel="noreferrer noopener nofollow">[email protected]</a> (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1b0e180b1813090e3d4f534c534f" rel="noreferrer noopener nofollow">[email protected]</a>: 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

> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d35383131321d6d736c736d" rel="noreferrer noopener nofollow">[email protected]</a> 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


> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9a1aca5a5a689f9e7f8e7f9" rel="noreferrer noopener nofollow">[email protected]</a> 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! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="18707d747477582836293628" rel="noreferrer noopener nofollow">[email protected]</a> test: `react-scripts test`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6008050c0c0f20504e514e50" rel="noreferrer noopener nofollow">[email protected]</a> 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 key 中，然后从 github 操作设置工作流程，这个示例让我最接近，因为应用程序将构建和部署，但它不起作用，就像它不会进入构建文件夹并以index.html，以及 kudu 控制台上的 wwwroot。包括构建文件夹在内的所有文件都存在。

此时我只想要最简单的方法将 SPA 部署到 azure 应用程序服务。任何具体的文档将不胜感激!

Answer 1

我已经在我的环境中进行了测试。

您可以使用 VS 代码将 React 应用部署到 Azure 应用服务。

在 VS Code 中打开您的项目。

转到扩展。搜索 Azure 应用服务并单击“安装”。

转到 Azure 应用服务。登录您的 Azure 帐户。

单击“部署到 Web 应用程序”。

选择您的订阅。选择您的应用服务。

现在您应该能够将 React 应用程序部署到 Azure 应用服务