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

IT技术 reactjs progressive-web-apps azure-web-app-service azure-linux
2021-03-28 21:52:25

我已经使用 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

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，然后react-router将发挥其魔力。

不知道。但我相信这是不可能的，因为 linux web 应用程序是 PaaS 解决方案。您可以尝试使用 Web 应用程序容器在没有 PM2 的情况下进行尝试。
2021-05-24 21:52:25
我在 azure linux web 应用程序上的下一个 js 应用程序面临同样的问题，并且 ny 在上面添加，因为启动命令仍然存在相同的问题
2021-05-25 21:52:25
您是否更改/home/site/wwwroot/build了主文件的路径？
2021-05-31 21:52:25
有没有办法在没有 PM2 的情况下把它拉下来？有谁知道 linux web 应用程序是否尊重 htaccess 或其他什么？
2021-06-17 21:52:25
其它你可能感兴趣的问题
上一篇ECMAScript 6 箭头函数 下一篇无法遍历我的数组/对象。Javascript、React Native