为什么我的React应用可以在本地运行，但不能在Azure上运行？

Question

我用ReactJS制作了一个网络应用程序。它在本地主机上运行良好。然而，当我部署到Azure时，每次导航到新页面或重新加载页面时，我都会收到404个错误。

我正在使用Browser路由器，我从网上查看中了解到这有时会导致问题，但我还没有找到解决它的方法。

我在 GitHub 中有该应用程序，因此在 Azure 中我链接到存储库。除了由create-react-app生成的代码外，我还有一个web.config文件，其中包含：

<?xml version="1.0"?>
<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>

所以我的GitHub代码有package.json

我已经建立了一个管道，它运行以下内容：

< li >获取源代码-将代码从GitHub复制到wwwroot < li >代理作业使用节点版本-设置为8.4
安装应用程序依赖项- npm命令为“Install”，参数为“-force”< br > NPM build-命令参数“run build”< br >存档文件< br >发布项目

我在网上看过各种各样的东西，它们建议使用静态构建，或者上传“build”文件夹，创建生产构建，或者配置serviceWorker，但是我已经尝试了我遇到的所有东西，没有任何效果。

我已经定义了路由< code > user overview = '/dashboard/users/:patient id '；但是当我试图在Azure上导航到它时，我得到一个404错误。另一方面，我可以毫无问题地导航到“landingpage”和“dashboard”——似乎是带有“:”的路线有问题。

我对 React 或 Azure 不太熟悉，所以我不知道从哪里开始寻找。任何建议不胜感激。

Answer 1

好吧，我在关注了阿吉特·沙阿的上述链接后解决了这个问题。

问题似乎是我在应用程序中使用浏览器路由器。我不知道为什么这会引起问题，但似乎。因此，我决定将应用的静态版本部署到 Azure 存储。

我使用创建了静态构建

npm run build

并且能够在本地使用

serve -s build

（必须执行npm安装-g服务才能完成此操作）。这让我可以作为静态站点在本地运行它，这样我就可以看到它在工作（注意：如果我使用服务构建（没有-s标志）启动它，那么重新路由等就不起作用，标志必须在那里）。

然后，我在Azure Storage上建立了一个静态网站。

我使用 VSCode，并安装了一个名为 Azure 存储的扩展，其中列出了所有存储 Blob，因此我在 VSCode 中打开了我的代码，找到了相应的 blob，右键单击并选择了“部署”。第一次工作正常。