git - 将 Angular 项目从 GitHub 部署到 Azure 应用服务

Question

我有一个 Angular 网站，正在 Visual Studio Code 中开发，并使用 GitHub 作为源代码管理。不确定它是否与该问题相关，但该网站是使用 Angular CLI 启动的以创建文件结构等。

然后，我创建了一个新的 Azure 应用服务，并使用 Azure 门户上的部署选项边栏选项卡连接到 GitHub 存储库。

不幸的是，该站点无法启动，因为整个存储库已复制到应用服务，而不仅仅是 /src 或 /dist 的内容。实际上，应用服务不知道 main.ts 在哪里，因此，它更多的是文件存储而不是工作网站。

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

更新不幸的是，当我可以指向 /src 或 /dist 文件夹时，我在 Azure 门户中找到了该设置，/dist 文件夹仍然没有被推送到 GitHub，因此也没有到达 Azure。当然，理想的情况是仅在 Azure 上发布 /dist 文件夹以节省空间，因为我不需要那里的存储库的完整副本。而且，即使我已将路径更改为 /src，它实际上也不会运行，因为 /src 包含 .ts 文件，而/dist 文件夹包含按预期归结为 .js 的所有内容。

更新 #2 在研究了 SO 和其他资源之后，我决定尝试一下 Fredrik 的指南。最初，我不想在机器 (VSTS) 中安装另一个齿轮，但实际上似乎没有任何其他方法可以将部署 /dist 文件推送到 Azure持续集成方式。

我对 Fredrik 的帮助感激不尽!

Answer 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 之外的其他构建工具/服务，该指南也应该让您了解需要做什么。