无需VSTS，如何快捷部署Angular 5应用至Azure？

你完全不需要通过VSTS就能快捷部署Angular 5应用到Azure Web App，而且本地用Angular CLI构建完成后直接发布到Azure Web App的方案完全可行，非常适合你测试/演示阶段的需求——既能节省构建时间，又不影响后续生产环境切换到完整的VSTS CI/CD流水线。

下面给你几种简单直接的部署方法：

方法一：用Azure CLI一键部署（推荐） #

如果你习惯命令行操作，这个方法效率最高：

• 先在本地构建生产环境包：

  ng build --prod
  

  执行完后，你的优化好的应用文件会生成在项目根目录的dist/文件夹里。
• 确保你已经安装了Azure CLI，然后登录你的Azure账号：

  az login
  

• 直接把dist/目录部署到Azure Web App：

  az webapp up --sku F1 --name <你的Web App名称> --html
  

  这里的参数说明：
  • --sku F1：选择免费的定价层，如果你需要更高性能可以换成B1等付费层
  • --name：替换成你自己的Azure Web App名称
  • --html：告诉CLI这是静态HTML应用，Azure会自动配置对应的运行环境

如果你的Web App已经提前创建好了，也可以用本地Git推送的方式，但az webapp up能一步完成创建（如果还没创建）和部署，更省心。

方法二：Azure Portal图形界面上传 #

如果你更喜欢点鼠标操作：

1. 本地执行ng build --prod生成dist/目录，把这个目录里的所有文件打包成一个ZIP压缩包
2. 登录Azure Portal，找到你要部署的Web App
3. 在左侧菜单里找到「部署中心」，选择「本地 ZIP 文件」作为部署源
4. 点击「上传」，选择你刚才打包的ZIP文件，等待Azure自动完成部署即可

方法三：FTP/SFTP直接上传文件 #

1. 同样先本地构建好dist/目录
2. 在Azure Portal的Web App页面，左侧菜单选「部署中心」->「FTP」，获取FTP的主机地址、用户名和密码
3. 用任意FTP客户端（比如FileZilla）连接到这个FTP地址，把dist/目录下的所有文件上传到site/wwwroot目录
4. 上传完成后，重启一下Web App就能生效

几个小提醒 #

• 如果你的Web App不是部署在根路径（比如用自定义域名的子路径），构建时要指定base-href：

  ng build --prod --base-href "/你的应用子路径/"
  

• 后续切换到VSTS CI/CD也完全没问题：只需要把ng build --prod这个构建步骤集成到VSTS流水线，再配置部署任务到Azure Web App就行，和现在的直接部署方案完全兼容

内容的提问来源于stack exchange，提问作者tlt