将Angular项目从GitHub部署到Azure App Service

时间:2017-06-23 13:24:28

标签: git angular azure azure-web-sites

我有一个Angular站点我正在使用GitHub在Visual Studio Code中开发源代码控制。不确定它是否与问题相关,但该站点是使用Angular CLI开始创建文件结构等。

然后,我创建了一个新的Azure应用服务,并使用Azure门户上的部署选项刀片连接到GitHub Repo。

不幸的是,该网站无法启动,因为整个仓库已经复制到App Service,而不仅仅是/src/dist的内容。实际上,App Service不知道main.ts在哪里,因此,它更像是文件存储而不是工作网站。

我没有看到Azure门户中的任何配置选项告诉网站从/src路径提供服务,那么如何才能使该网站正常运行?我需要在Angular代码中在项目级别进行配置吗?它似乎并非如此,因为所有文件都被推高了 - /src/dist只是看起来不像是将它们视为服务网站的起点。

更新当我可以指向/src/dist文件夹时,我发现了Azure门户中的设置,不幸的是,/dist文件夹仍然没有被推到GitHub,因此,没有进入Azure。当然,理想的做法是在Azure上发布/dist文件夹以节省空间,因为我不需要那里的完整副本。而且,即使我已将路径更改为/src,但它实际上并未运行,因为/src包含.ts个文件,而/dist文件夹包含所有归结为.js正如所料。

更新#2 在探索了SO和其他资源之后,我决定给出Fredrik的指南。最初,我不想在机器中使用另一个cog(VSTS),但实际上似乎没有任何其他方法可以获得以持续集成方式推送到Azure的部署/dist文件。

我无法感谢弗雷德里克的帮助!

1 个答案:

答案 0 :(得分:1)

如果你考虑 Visual Studio Team Services(VSTS),我有一个我在媒体上为此写的指南:

Setting up a CI pipeline for deploying your Angular application to Azure using Visual Studio Team Services and GitHub

基本上,您需要自动运行ng build --prod并仅部署/dist文件夹。可能还会添加web.config,以便将访问您网站的所有请求发送至/index.html。所有这些都包含在博客文章中:)

即使您使用的是其他构建工具/服务而不是VSTS,该指南也应该让您了解需要完成的工作。

相关问题