无法将 React 应用（构建）文件夹部署到应用服务 Azure

Posted 2023-02-19

【中文标题】无法将 React 应用（构建）文件夹部署到应用服务 Azure

【英文标题】：Failed to deploy React app (build) folder to App Service Azure

【发布时间】：2020-07-07 18:44:06

【问题描述】：

我正在关注下面的链接，了解如何将 React 应用程序部署到应用服务 Azure。 How to deploy React app to App service Azure

但是，我看不到我的应用程序页面，只能看到 Azure 应用服务默认页面。 “嘿，Node 开发人员！”

在这里，我附上了有关部署条件和日志的屏幕截图。 [应用服务1

请指教。

【问题讨论】：

@BowmanZhu- 感谢您回复我的信息。我可以知道在哪里可以设置默认文件吗？该应用在 Linux 上运行。

你好，如果你是基于linux的，那么默认文件是没有设置的。您需要在根目录中添加一个 .htaccess。这是文件的内容：DirectoryIndex yourfilefolder/thedefaultfile.

这可能不能完全解决你的问题，但是如果你是基于Linux的你一定要注意这一点。

@BowmanZhu - 我仍然不清楚你在这里提到了什么。您能否更具体地了解如何创建 htaac​​cess？我试图用谷歌搜索如何将 React 应用程序部署到 Azure 应用程序服务，但是没有人提到。

看看这个博客：medium.com/microsoftazure/…

【参考方案1】：

更新：

另一种方法：

这种方法的前提是你有Node.js env并且已经安装了npm工具。

1.在site/wwwroot下添加文件名index.js。

index.js：

var express = require('express');
var server = express();
var options = 
index: 'index.html'                                             //Fill path here.
;
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);

2.安装快递：

在wwwroot目录下运行此命令，

npm install -save express

3.重新启动您的应用服务并等待几分钟。

---

原答案：

首先，您可以通过此链接了解如何将您的 React 应用部署到 azure。

https://medium.com/microsoftazure/deploying-create-react-app-as-a-static-site-on-azure-dd1330b215a5

所有文件都会上传到物理文件夹D:/site/wwwroot。

基于 Linux 操作系统的 web 应用的默认页面设置非常相似。

例如，我在 public_html 文件夹下有一个名为 index.php 的文件，我想将它设置为我的网络应用程序的默认页面。

你需要在wwwroot下创建一个名为.htaccess的文件。

这是.htaccess文件的内容：

DirectoryIndex public_html/index.php

然后，成功设置默认页面：

【讨论】：

仍然没有解决我的问题。

@David 您的问题是网络应用没有显示您想要的页面还是其他什么？

@David 你能在 azure 上展示你的 web 应用程序的结构吗？

@BowmanZhu- 应用服务仍然显示应用服务默认页面，“嘿，节点开发者！”页面。不是 index.html。我猜是应用服务实例指向 HostingStart.html index.html 的。

@BowmanZhu- 这对我来说意义重大，让我试试这个方法，让你随时了解。