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

Posted 2023-02-22

技术标签:

【中文标题】如何在 azure 网站上的 react 应用程序中替换 %PUBLIC_URL%【英文标题】：How to replace %PUBLIC_URL% in react app on an azure website 【发布时间】：2019-04-13 00:08:00 【问题描述】：

我有一个在本地运行良好的 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% 将被替换为构建中的实际值，如您所说。您确定要从build 目录而不是public 目录部署index.html 文件吗？我有 CI/CD，当有东西被提交到 vsts git repo 时，构建和部署就会被触发，让我给你一些截图不确定此屏幕截图是否有帮助。 screencast.com/t/y279smspa 那么部署管道真的很简单：screencast.com/t/033U0cZHm 【参考方案1】：

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

参考文献：

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

希望对你有帮助

【讨论】：

【参考方案2】：

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

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

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

【讨论】：

大问题，它被什么取代了？是否有一个参数文件我必须把这个公共网址放在哪里？您可以在package.json 内设置一个homepage 属性，用于指定react 应用程序的托管位置。如果未设置此属性，则构建命令假定应用程序托管在根目录下。如果已设置并且在域之后包含路径，则构建命令将 %PUBLIC_URL% 替换为路径。例如：如果我设置了"homepage": "http://example.com/reactapp/"，那么%PUBLIC_URL% 将替换为/reactapp，但如果"homepage": "http://example.com/" %PUBLIC_URL% 只是替换为一个空字符串。我检查了部署的文件。并在 index.html 中将 %PUBLIC_URL% 替换为空，所以应该没问题，如果您查看上面的屏幕截图以了解我的构建管道，我正在复制构建目录 @LuisValencia 你在哪里运行npm run build？ CI 是使用脚本还是只是一个 gui？当我找到这个答案时，我觉得很傻，但是你让我免于头疼，所以谢谢！

以上是关于如何在 azure 网站上的 react 应用程序中替换 %PUBLIC_URL%的主要内容，如果未能解决你的问题，请参考以下文章

如何将 azure b2c 与 react 集成

Azure 网站上的 SQL Server CE

如何保持启用 Azure 应用程序日志记录？

Azure 上的网站如何识别不同国家和地区的用户

如何调用部署在 azure 上的 WEB api 服务结构？

在 Chrome 中托管在 Azure 中的 ASP.NET Core Web 应用程序上的异常 HTTP 响应