React 路由器直接链接不适用于 Azure Web App Linux

React router direct links not working on Azure Web App Linux

我已经使用 ReactJs 开发了一个关于 PWA(渐进式 Web 应用程序)的 PoC,以展示如何从浏览器使用摄像头、地理定位、麦克风、光传感器等 API。

我已经为这个网络应用程序中的每个功能创建了一个路由,并且在 localhost 中一切正常。但是,当我在 Azure Wep App Linux service 上部署我的 React 应用程序的 npm 构建版本时,它无法正常工作。我可以访问主页 (index.html),然后我可以从那里导航到任何其他页面,但是当我尝试直接从其 url 访问任何路由时,我收到 404 错误。除了索引页面之外,所有 url 在手动刷新或写入时都不起作用。

例如:
https://pwa.mypoc.dev/ -- 工作正常
https://pwa.mypoc.dev/lights--不工作

我在 azure 上使用过这个命令 "Settings" > "General settings" > "Startup Command":

pm2 serve /home/site/wwwroot/build --no-daemon

我发现了一个与之相关的问题,但答案对我没有帮助,因为我没有使用 web.config,因为它是一台 Linux 机器 运行 节点 10 LTS

经过更多研究,我发现了问题所在。由于 Linux Azure Web Apps 使用 pm2 为节点应用程序提供服务,我在查看官方文档时找到了答案。

PM2 is a daemon process manager that will help you manage and keep your application online. Getting started with PM2 is straightforward, it is offered as a simple and intuitive CLI, installable via NPM.

https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml

只需将 --spa 选项添加到 Azure Web Apps Linux 上的 启动命令 常规设置

pm2 serve /home/site/wwwroot/build --no-daemon --spa

使用 --spa 选项 pm2 将自动将所有查询重定向到 index.html,然后反应路由器将发挥其魔力。