如何在 azure 网站上的 react 应用程序中替换 %PUBLIC_URL% [英] How to replace %PUBLIC_URL% in react app on an azure website
问题描述
我有一个在本地运行良好的 React 应用程序，当我将它部署到 Azure 时，我在 index.html 上有一些 404 错误
I have a react app that works perfectly fine locally, when I deploy it to Azure, I have a few 404 errors, on the index.html
所有这些都带有标签 %PUBLIC_URL%
All of them with the tag %PUBLIC_URL%
根据文档，它们将在构建过程中被替换，但不确定这是如何完成的，以便在部署时放置正确的 url
According to the documentation, they will be replaced in the build process, but not sure how this is done, so that when deployed, the correct urls are put in place
<!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 中指定主页来覆盖它
By default, Create React App produces a build assuming your app is hosted at the server root. example.com
If your website isn't served from this root, (maybe you want to serve from example.com/relativepath, you can override this by specifying the homepage in your package.json
"homepage": "http://example.com/relativepath",
这将使 Create React App 正确推断要在生成的 HTML 文件中使用的根路径.
This will let Create React App correctly infer the root path to use in the generated HTML file.
但是，在您的情况下，我认为您会收到 404 错误，因为 Azure 正在尝试查找 index.html(或其他命名的 index.*).为了解决这个问题，Azure 需要知道如何将预期的路由传递给位于站点根目录的唯一 index.html.在 /site/wwwroot 文件夹中创建一个名为 web.config 的新文件，其内容如下:
In your case, however, I think you get a 404 error because the Azure is trying to find an index.html (or some other index.* named). To fix this, Azure needs to know how to pass the intended route to the one and only index.html placed at the site's root. Create a new file named web.config inside /site/wwwroot folder with the following content:
<?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 应用程序可以正确处理链接.
This will tell Azure to rewrite all urls as if they are pointing to our root file and our SPA application can handle the links correctly.
参考文献:
https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321
希望对你有帮助
这篇关于如何在 azure 网站上的 react 应用程序中替换 %PUBLIC_URL%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
