Question

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

我正在使用BrowserRouter，从网上浏览时我发现这有时会引起问题，但是我还没有找到解决它的方法。

我在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和web.config文件，以及src和公共文件夹。这就是在Azure中复制到wwwroot的内容。

我已经建立了运行以下内容的管道：

获取源代码-将代码从GitHub复制到wwwroot
代理人工作使用节点版本-设置为8.4
安装应用程序依赖项-npm命令为'install'，参数为'--force'
npm build-命令参数'run build'
存档文件
发布工件

我已经在线阅读了各种内容，这些内容建议使用静态版本，或者上载“ build”文件夹，创建生产版本，或者配置serviceWorker，但是我已经尝试了遇到的所有内容，没有任何改变。

我已经定义了路由USEROVERVIEW = '/dashboard/users/:patientId';，但是当我尝试在Azure上导航到它时，出现404错误。另一方面，我可以毫无问题地导航至“着陆页”和“仪表板”-这似乎是带有“：”的路线。

我对React或Azure不太熟悉，所以我不知道从哪里开始寻找。任何建议表示赞赏。

Answer 1

好的，我按照上面Ajeet Shah的链接解决了这个问题。

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

我使用

创建了静态版本

npm run build

并能够使用

在本地启动

serve -s build

（必须执行npm install -g serve才能完成此工作）。这让我可以在本地将其作为静态站点运行，因此我可以看到它正在运行（注意：如果我使用serve build（没有-s标志）启动了它，则重新路由等均不起作用，则该标志必须为在那里）。

然后我跟随this在Azure存储上建立一个静态网站。

我使用VSCode，并安装了一个名为Azure Storage的扩展，其中列出了所有的存储Blob，因此我在VSCode中打开了代码，找到了合适的Blob，右键单击并选择了“部署”。第一次运行良好。

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

1 个答案: