如何在Azure Linux Web App中原生运行Angular应用？

我之前帮朋友搞定过这个场景，完全可以不用嵌套Docker容器，让Angular应用原生运行在Azure Linux Web App上！给你一步步拆解解决方案：

1. 先配置Azure Web App的Node.js环境 #

Azure Linux Web App本身默认支持Node.js，你得先确保环境版本和本地开发匹配：

• 打开Azure门户，进入你的Web App → 配置 → 常规设置 → 栈设置，选择和你本地一致的Node.js版本（比如18 LTS）
• 保存后重启Web App，确保环境生效

2. 安装Angular CLI（解决ng is not a known command问题） #

默认的Azure Node环境没有全局安装Angular CLI，这里给你两种靠谱的安装方式：

方式一：用部署脚本自动安装 #

在你的项目根目录创建一个postdeploy.sh脚本（Linux环境适用），内容如下：

# 全局安装指定版本的Angular CLI，替换成你用的版本号
npm install -g @angular/cli@16.2.0
# 验证安装是否成功
ng version

然后回到Azure门户的Web App → 配置 → 常规设置 → 启动命令，设置成：

bash postdeploy.sh && ng serve --host 0.0.0.0 --port 8080

注意：ng serve是开发服务器，生产环境绝对不要用，下面会说生产环境的正确姿势。

方式二：用Azure自带的Oryx工具自动构建（更推荐） #

Azure Linux Web App集成了Oryx工具，它能自动识别Angular项目并完成依赖安装、构建操作，完全不用手动折腾CLI：

1. 确保你的项目根目录有package.json，并且里面包含build脚本：

"scripts": {
  "build": "ng build --prod"
}

2. 安装一个轻量的静态文件服务器（比如serve）到项目依赖：

npm install serve --save

3. 在package.json里添加生产环境的启动脚本：

"scripts": {
  "start": "serve -s dist/你的项目名称 -l 8080"
}

4. 回到Azure门户，把启动命令设置成npm start即可。Oryx会自动帮你安装所有依赖（包括Angular CLI）、构建静态文件，最后用serve托管dist目录里的静态资源。

3. 生产环境最佳实践 #

• 绝对不要用ng serve部署生产环境，它是开发用的服务器，性能和稳定性都不达标
• 构建后的静态文件用轻量服务器（比如serve、Nginx）托管，Nginx的话可以自定义启动脚本配置
• 本地先测试npm run build和npm start，确保构建和启动都正常再推送到Azure

4. 常见问题排查 #

• 如果还是碰到ng is not a known command，可以尝试用npx ng代替ng，npx会临时安装CLI并执行命令
• 查看Web App的日志流（Azure门户 → 监控 → 日志流），检查安装过程中有没有网络错误或者权限问题

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