如何将React Webpack Web应用程序部署到Azure App Service？

Question

我从Dropbox部署的Azure Web应用程序不起作用。

我正在运行App服务。我正在尝试部署我的React Webpack应用程序。我尝试从我的Bitbucket仓库部署，但整个项目被加载到D：\ home \ site \ wwwroot并且只​​是坐在那里因为Kudu显然认为它是node.js应用程序。从我读过的内容来看，Kudu使用package.json文件进行任何git部署。所以我尝试从Dropbox部署。我将我的应用程序源正确设置到我的Dropbox / Apps / Azure /目录，然后单击“同步”。我得到了以下结果：

  

标题   同步请求已提交   描述   Web应用程序的存储库正在更新。   状态   信息化   时间戳   Wed Nov 23 2016 08:44:09 GMT-0500（东部标准时间）   UTC时间戳   2016年11月23日星期三13:44:09 GMT   相关ID   447bf0d0-a533-49dd-898A-57b5be6b5738   完成百分比   100

但D：\ home \ site \ wwwroot中的位仍显示旧git repo部署的代码。在我的Dropbox页面上，我有一些我想要部署的位，即在Webpack构建运行后从build文件夹。它们在根目录下有index.html，所以我希望如果只是复制到Azure就可以正确地提供它。

我对这整个Azure很新，有人可以帮忙吗？

以下更多信息编辑。

要清楚，我没有部署包含在wwwroot文件夹中的app.js / server.js之类的代码。我只将Webpack构建中的结果复制到指定给Azure作为源的Dropbox文件夹。 Dropbox文件夹如下所示：

asset-manifest.json
favicon.ico
index.html
splash.css
static
    css
        main.63e4d058.css
        main.63e4d058.css.map
    js
        main.68797484.js
        main.68797484.js.map
    media
        dell-300-426.b435b6bd.png
        duck.1d942aad.svg
        example1.9443ef49.png
        icon_question.3672f035.png
        ipad-montecarlo-demo.2d964854.png
        moneyplan-imac-300-552-new.8814ce0f.png
web.config

index.html文件有一个脚本标记，其代码指向main.68797484.js文件，该文件是捆绑的应用程序代码。

但是在Azure部署选项中，单击“同步”后， 结果显示“未找到部署”，即使有通知“正在更新Web应用程序的存储库。”

Answer 1

我创建了一个可以通过自动部署解决此问题的仓库。

https://github.com/ulrikaugustsson/azure-appservice-static

简而言之，它将构建项目，然后将构建文件夹复制到wwwroot。

Answer 2

根据我的经验，如果app.js/server.js floder中包含wwwroot，则Kudu会认为它是node.js应用并生成web.config。因此，如果您的应用不是node.js应用，则wwwroot floder不应该既不包括app.js也不包括server.js。

为了您的参考，我写了反应和＆amp; webpack hello world项目并成功部署到Azure。以下是具体步骤，请您试试？

1. 将您的项目放入GitHub repo，类似于Bitbucket。它们都提供了很棒的Git服务，在这里你可以使用Bitbuket。

2. 在 Azure门户的应用程序菜单中，单击 APP DEPLOYMENT ＆gt; 部署选项。单击选择源，然后选择部署源。

3. 在部署源刀片中，选择要从中部署的项目和分支。完成后，点击确定。

4. 在Azure门户中，单击 APP DEPLOYMENT ＆gt; 部署选项。然后点击刀片中的同步。
5. 在默认文档中设置您的输入HTML文件，如下所示：
6. 最后，浏览您的网站，您会看到如下内容：