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

Question

我已经使用 ReactJs 开发了一个关于 PWA（渐进式 Web 应用程序）的 PoC，以展示如何使用来自浏览器 API 的相机、地理定位、麦克风、光传感器等。

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

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

我在天蓝色的“设置”>“常规设置”>“启动命令”上使用了这个命令：

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

我发现了一个与之相关的问题，但答案对我没有帮助，因为我没有使用web.config它，因为它是一台运行 Node 10 LTS的Linux 机器： React App not started in azure app service

Answer 1

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

PM2 是一个守护进程管理器，它将帮助您管理和保持您的应用程序在线。PM2 入门很简单，它以简单直观的 C​​LI 形式提供，可通过 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，然后反应路由器将发挥其魔力。