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

Question

我有一个在本地运行良好的 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>

Answer 1

这看起来像是取自 public 而不是 build 的索引文件。

如文档所述，%PUBLIC_URL% 在您构建项目时被替换。

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

Answer 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（或其他一些索引。* 命名）。要解决此问题，Azure 需要知道如何将预期路由传递到唯一 index.html 放置在站点根目录下的路由。在 /site/wwwroot 文件夹中创建一个名为 web.config 的新文件，内容如下：

<?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 应用程序可以正确处理这些链接。

参考文献：

希望对您有所帮助

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

How to replace %PUBLIC_URL% in react app on an azure website

reactjs

npm

azure-devops

azure-web-app-service

yarnpkg