如何通过本地Git部署Angular 4应用至Azure Web App？解决服务不可用问题

我来帮你搞定这个问题！你遇到的“Service Unavailable”大概率是因为直接部署了Angular源码，而没有先构建生产环境的静态文件。下面是通过本地Git部署Angular 4到Azure Web App的完整正确步骤：

Angular是单页应用，必须先编译成浏览器能直接识别的静态资源才能部署。在本地项目根目录打开终端，执行：

ng build --prod

这个命令会在项目的dist/文件夹下生成压缩后的HTML、CSS、JS等生产文件，这才是我们要部署的核心内容。

登录Azure门户，找到你的目标Web App，按以下步骤操作：

• 进入部署中心，选择本地Git作为部署源
• Azure会自动生成一个Git远程仓库地址，把这个地址复制下来（格式类似 https://<你的WebApp名称>.scm.azurewebsites.net/<你的WebApp名称>.git）
• 设置好部署凭据（用户名和密码），后续Git推送会用到这个身份验证

我们只需要部署dist/里的静态文件，不能直接用你现有的项目Git仓库推送（里面包含大量开发依赖和源码），所以要单独创建部署仓库：

• 进入本地项目的dist/文件夹，打开终端
• 初始化Git仓库：

  git init
  

• 添加所有静态文件到暂存区：

  git add .
  

• 提交部署版本：

  git commit -m "Deploy Angular 4 production build"
  

• 关联Azure的Git远程仓库（替换成你之前复制的地址）：

  git remote add azure https://<你的WebApp名称>.scm.azurewebsites.net/<你的WebApp名称>.git
  

执行推送命令，输入你之前设置的部署凭据用户名和密码：

git push azure master

推送完成后，Azure会自动完成部署，稍等1-2分钟再访问你的Web App地址。

• 检查Web App的应用服务计划是否处于运行状态，有没有被意外暂停
• 确认dist/里的index.html是否在部署仓库的根目录：如果你的dist下还有一个以项目名命名的子文件夹，需要把这个子文件夹里的内容直接移到dist根目录再提交
• 查看Azure的日志流（在Web App的「监控」菜单里），这里会显示具体的错误信息，比如文件路径错误、端口配置问题等
• 确保Web App的运行时设置为Node.js：Angular静态文件需要Node环境托管，或者你也可以切换到「静态网站托管」模式（在Web App的「配置」里开启）

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