默认情况下,假设您的应用托管在服务器根目录下,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.config
inside/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
希望对您有帮助