AZURE Web應用程序：從Github存儲庫部署Angular SPA和Node Express服務器

Question

我在Github存儲庫中有一個Webapp，該存儲庫具有Angular客戶端和Node Express后端服務器。 我不知道如何將這些同時部署到Azure Webapp。 這些教程都沒有涵蓋此內容。 他們告訴您的唯一操作是在根目錄中包含index.html或server.js，這不是我的應用程序的結構。

但是我確實嘗試將服務器移至根目錄中的server.js，然后在那里什么也沒有發生。

我不知道從哪里開始。 非常感謝您的幫助。

告訴我您還需要什么信息，因為我不知道，並且相關文檔為零。

更新：這一切似乎都不起作用。 我嘗試將/的虛擬路徑切換到index.html所在的dist文件夾，但這沒有任何作用。

Answer 1

看來您還在https://social.msdn.microsoft.com/Forums/azure/en-US/a6cbc494-dc42-4962-99c7-947cee7ff25a/nodejs-deploying-angular- spa-application-node-server-through-github-continuous-integration？forum = windowsazurewebsitespreview 。

Azure上的Node.js應用程序應在應用程序的根目錄中具有app.js或server.js 。

因此，如果您希望dist文件夾中的angular應用程序充當Web應用程序的前端，而expressjs應用程序充當后端服務，則這是一種解決方法。

您也可以在根目錄中部署express js應用程序，並在同一根目錄中部署angular app文件夾。 然后，您可以在exrepssjs路由中配置angular應用。 例如

假設您的角度應用入口是根目錄下dist文件夾中的index.html ：

app.get('/', function(req, res) {
    res.sendfile(__dirname+'/dist/index.html')

}); 

它將“ /”路由到您的角度應用程序。

Answer 2

為了解決您的問題，我建議您以復數形式觀看shayne boyer和john papas的課程。 他們很好地解釋了這個話題。 Play-by-play-angular-2-app-deployment 。

我本人是從那里開始的，但必須進行一些調整才能使其完全正常工作。

訣竅是在本地生成文件，然后將生成的文件提交到單獨的文件夾（dist）中。

另外，您將需要添加：

1. server.js文件。 要點到server.js （就像您提到的那樣）
2. package.json文件。 要點是pacakge.json 。 這可以告訴azure使用哪個節點和npm版本。
3. 添加web.config。 要點到web.config

如果您希望應用在提交時自動部署，則需要設置一個githook 。 單擊鏈接以獲取說明。 同樣，為使githook正常工作，您還需要在名為“ Project”的天藍色Web應用程序中聲明一個APP設置variabele，其值等於您的構建文件夾（在我的情況下為= dist）。

我有一個ng2倉庫，上面有一個工作中的天藍色演示 。 Ng2a.Frontend 。 您可以在其中找到dist文件夾。