如何在 azure 网站上的 react 应用程序中替换 %PUBLIC_URL%

IT技术 reactjs npm azure-devops azure-web-app-service yarnpkg
2021-05-10 18:32:03

我有一个在本地运行良好的 React 应用程序，当我将它部署到 Azure 时，我在 index.html 上遇到了一些 404 错误

所有这些都带有 %PUBLIC_URL% 标签

根据文档，它们将在构建过程中被替换，但不确定这是如何完成的，以便在部署时将正确的 url 放置到位

<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="theme-color" content="#000000">
    <!--
          manifest.json provides metadata used when your web app is added to the
          homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet" async>
    <link async rel="stylesheet" href="%PUBLIC_URL%/css/ionicons.min.css">
    <link rel="stylesheet" href="https://unpkg.com/react-instantsearch-theme-algolia@4.0.0/style.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
         integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
         crossorigin="" async/>
    <!--
          Notice the use of %PUBLIC_URL% in the tags above.
          It will be replaced with the URL of the `public` folder during the build.
          Only files inside the `public` folder can be referenced from the HTML.

          Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
          work correctly both with client-side routing and a non-root public URL.
          Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Isomorphic</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
          This HTML file is a template.
          If you open it directly in the browser, you will see an empty page.

          You can add webfonts, meta tags, or analytics to this file.
          The build step will place the bundled scripts into the <body> tag.

          To begin the development, run `npm start` or `yarn start`.
          To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
2个回答

如何替换 %PUBLIC_URL%

默认情况下，假设您的应用程序托管在服务器根目录下，Create React App 会生成一个构建。example.com 如果您的网站不是从此根提供服务，（也许您想从 提供服务example.com/relativepath，您可以通过在 package.json 中指定主页来覆盖它

"homepage": "http://example.com/relativepath",

这将使 Create React App 正确推断要在生成的 HTML 文件中使用的根路径。

但是，在您的情况下，我认为您会收到 404 错误，因为 Azure 正在尝试查找 index.html（或其他一些 index.* 命名）。为了解决这个问题，Azure 需要知道如何将预期的路由传递给位于站点根目录的唯一的 index.html。创建一个名为web.configinside/site/wwwroot文件夹的新文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
   <system.webServer>
      <rewrite>
         <rules>
            <rule name="React Routes" stopProcessing="true">
               <match url=".*" />
               <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                  <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
               </conditions>
               <action type="Rewrite" url="/" />
            </rule>
         </rules>
      </rewrite>
   </system.webServer>
</configuration>

这将告诉 Azure 重写所有 url，就好像它们指向我们的根文件一样，我们的 SPA 应用程序可以正确处理这些链接。

参考：

我希望这可以帮助你

这看起来像是从而public不是build.

就像文档说的那样，%PUBLIC_URL%在构建项目时被替换。

假设您使用了create-react-app，请确保您正在运行npm run build并托管build目录中的文件。

其它你可能感兴趣的问题
上一篇如何在工艺品切片机中启用专家模式？ 下一篇你能用热电偶替换损坏的 100k 热敏电阻吗 - 模拟输入也可能烧毁