如何將React Webpack Web應用程序部署到Azure App Service？

Question

我從Dropbox部署的Azure Web應用程序無法正常工作。

我正在運行一個應用程序服務。 我正在嘗試部署我的React Webpack應用程序。 我曾嘗試從Bitbucket存儲庫中進行部署，但是由於Kudu顯然認為這是一個node.js應用程序，所以整個項目都被加載到了D：\\ home \\ site \\ wwwroot中，並且就坐在那里。 從我讀到的內容來看，Kudu會對帶有package.json文件的任何git部署進行此操作。 因此，我嘗試從Dropbox進行部署。 我將應用程序的源正確設置到我的Dropbox / Apps / Azure /目錄中，然后單擊“同步”。 我得到以下結果：

標題同步請求已提交描述Web應用程序存儲庫正在更新。 狀態信息時間戳2016年11月23日星期三08:44:09（東部標准時間）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

根據我的經驗，如果wwwroot floder中包含app.js/server.js ，那么Kudu會認為這是一個node.js應用程序並生成web.config 。 因此，如果您的應用程序不是node.js應用程序，則wwwroot floder不應覆蓋app.js和server.js。

供您參考，我編寫了react＆webpack hello world項目並將其成功部署到Azure。 以下是具體步驟，請您嘗試一下嗎？

1. 將您的項目放入類似於Bitbucket的GitHub存儲庫中。 它們都提供出色的Git服務，您可以在這里改用Bitbuket。

2. 在Azure門戶的應用程序菜單刀片中，單擊“ APP DEPLOYMENT” >“ 部署選項” 。 點擊選擇源 ，然后選擇部署源。

3. 在“ 部署源”刀片中，選擇要從中進行部署的項目和分支。 完成后，點擊確定 。

4. 在Azure門戶中，單擊“ APP DEPLOYMENT” >“ 部署選項” 。 然后單擊刀片中的同步 。
5. 在“ 默認”文檔中設置條目HTML文件，如下所示：
6. 最終，瀏覽您的網站，您將看到類似以下內容：