如何通过FileZilla将Angular SSR构建文件部署至Azure Web App？

一、本地构建确认 #

• 确保项目已配置SSR（官方示例项目通常已完成此配置）
• 执行构建命令：npm run build:ssr，构建完成后会生成dist/[你的项目名称]目录，目录内包含browser（前端静态资源）和server（SSR服务端代码）两个核心文件夹

二、Azure Web App 前置配置 #

• 创建Web App时，选择与本地一致的Node.js运行时版本（如18.x、20.x）
• 在Azure门户进入Web App的「配置」→「常规设置」：
  • 设置启动命令：node dist/[你的项目名称]/server/main.js（若直接将dist内容上传至wwwroot，则路径改为node server/main.js）
  • 开启「始终开启」选项，避免服务休眠

三、FTP部署步骤 #

1. 通过FileZilla连接Azure Web App的FTP服务，进入wwwroot目录
2. 将本地dist/[你的项目名称]下的所有文件及文件夹（包括browser、server）完整上传至wwwroot
3. 回到Azure门户，重启Web App使配置生效

四、常见问题解决 #

• 上传browser+server后提示「无权查看此目录或页面」：未配置启动命令，Azure无法识别SSR服务入口，需按上述步骤设置启动命令并重启服务
• 仅上传browser内容，直接访问路由报错：此为纯静态部署，未启用SSR，无法处理Angular的客户端路由；需采用完整SSR部署方式，由服务端接管路由请求
• 仅上传server内容报错：server依赖browser的静态资源（如页面模板、样式、脚本），单独上传缺少核心前端资源，导致服务无法正常运行

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