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文件夹。