React路由器直接链接在Azure Web App Linux上不起作用 [英] React router direct links not working on Azure Web App Linux

问题描述

我已经使用ReactJ开发了有关PWA(渐进式Web应用程序)的PoC，以展示如何使用浏览器API中的摄像头，地理位置，麦克风，光传感器等.

I've developed an PoC about PWA (Progressive Web Apps) using ReactJs to show how to use camera, geolocation, microphone, light sensors and etc from Browser API.

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

I've created a route for each feature in this web app and everything works fine in localhost. But when I deploy the npm build version of my react app on Azure Wep App Linux service it don't work properly. I can access the main page (index.html) and from there I can navigate to any other page, but when I try access any route direct form its url I receive an 404 error. Except from index page all urls don't work when refreshing or writing manually.

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

Ex:
https://pwa.mypoc.dev/ -- Works fine
https://pwa.mypoc.dev/lights -- Do Not Work

我在天蓝色的设置">常规设置">启动命令"上使用了此命令:

I'v used this command on azure "Settings" > "General settings" > "Startup Command":

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

我发现了与之相关的问题，但答案没有帮助我，因为我没有使用web.config，因为它是运行节点10 LTS的 Linux计算机: React App无法在Azure App服务中启动

I've found a question related to it but the answer did not help me, as I'm not using web.config because it is a Linux machine running Node 10 LTS: React App not starting in azure app service

推荐答案

经过更多研究后，我发现了问题所在.当Linux Azure Web Apps使用pm2服务节点应用程序时，我在查阅官方文档时找到了答案.

After a little more research I found the problem. As Linux Azure Web Apps uses pm2 to serve a node app I found the answer looking into the official documentation.

PM2是一个守护进程管理器，可以帮助您管理和保持应用程序在线. PM2入门非常简单，它是一个简单直观的CLI，可以通过NPM安装.

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 常规设置上的启动命令中:

Just need to add the --spa option into the Startup Command on Azure Web Apps Linux General Settings:

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

使用--spa选项pm2将自动将所有查询重定向到index.html，然后react router将发挥其魔力.

Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.

这篇关于React路由器直接链接在Azure Web App Linux上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！