问题

Question

我按照本教程将反应应用程序部署到Azure WebApp

https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321

通过FTP上传Build文件夹后，当我访问该URL时，我收到以下消息：

“您无权查看此目录或页面。”

我尝试使用和不使用 web.config 文件。

然后我尝试将其添加到web.config文件中，但之后它只是呈现带有正确页面标题的白页。

<defaultDocument enabled="true">
         <files>
            <add value="build/index.html" />
         </files>
</defaultDocument>

我假设因为它无法访问 index.html 中引用的.js文件。

Answer 1

我去了部署选项。配置我的本地Git存储库。配置我的本地Git。然后在build文件夹里面运行：

git init
git add .
git commit -m "initial build"
git remote add <azure your-git-clone-url>
git push azure master

它现在运行

Answer 2

我也遵循了the tutorial的尝试。

有时它可以工作，有时不起作用。

问题

即使重新启动服务器后，新的静态内容也不会反映到端点。（例如https://my-endpoint.azurewebsites.net）

或者我的web.config无法正确更新路由。

环境

Webapp（节点10.14 + Windows），MacOS的FileZilla
源代码：React-boilerplate

解决方案

将build目录中的所有文件复制并粘贴到服务器的webroot目录中，除了web.config
然后，复制并粘贴web.config

我不知道为什么Azure无法达到我的期望。 我已经制作了几个Azure Web应用程序进行部署。每当我创建新的Azure Web应用程序时，就会使用web.config触发器来更新某些实例，而使用index.html触发器来更新其他实例。但是，根据我的经验，web.config似乎是最终触发因素。
如果您遇到Web应用程序教程页面中未提及的4xx，5xx错误，请删除Web应用程序并创建另一个新应用程序。我还尝试连接DevOps CI / CD Azure到Web应用程序的管道。但是，在成功构建和部署过程之后，我的网站没有更新，并且服务器目录中没有文件（我通过FileZilla检查）此后，直接FTP部署不起作用。对我而言，唯一的解决方案是删除它并创建新的Web应用。
由于这个问题，我花了2-3天的时间。如果有人对我的案子有关于Azure内部逻辑的建议，正确的指南或正确的信息，请对其进行评论，以节省以后的时间。

Web.config

下面是我的the tutorial

<?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>

通过FTP将React应用程序部署到Azure WebApp

2 个答案:

问题

环境

解决方案

评论

Web.config