如何在Azure网站上的React App中替换％PUBLIC_URL％

楚流觞

2023-03-14

问题内容：

我有一个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>

问题答案：

如何替换％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应用程序可以正确处理链接。

参考文献：

https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths
https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321

希望对您有帮助

如何在Azure网站上的React App中替换％PUBLIC_URL％

相关阅读

相关文章

相关问答

相关工具

相关文档