通过VS Code部署React应用至Azure App Service后遇应用错误的解决方法

1. 确保部署的是生产构建文件 #

create-react-app的源码无法直接在Azure上运行，必须先构建静态文件：

• 本地项目根目录执行：npm run build，生成build文件夹
• 部署时，选择build文件夹作为部署目标，而非整个项目目录。如果用VS Code的Azure扩展，部署时指定build文件夹即可。

2. 配置正确的启动命令 #

Azure App Service需要web服务器托管静态文件，推荐用serve包：

• 本地安装依赖：npm install --save-dev serve
• 在package.json的scripts中添加："start:prod": "serve -s build"
• 登录Azure门户，进入你的App Service → 配置 → 常规设置，将启动命令设置为npm run start:prod

3. 匹配Node.js版本 #

本地与Azure的Node.js版本不一致可能导致兼容性问题：

• 本地执行node -v查看版本
• 在Azure门户的App Service → 配置 → 常规设置，设置对应的Node.js版本；或者在项目根目录创建.nvmrc文件，写入版本号（比如18.17.0），Azure会自动识别并使用该版本。

4. 查看日志定位具体错误 #

通过Azure的诊断工具获取详细报错信息：

• 登录Azure门户，进入App Service → 诊断和解决问题 → 选择“应用程序日志”或“日志流”，查看具体的错误输出（比如端口占用、依赖缺失、路径错误等）
• 也可以在VS Code的Azure扩展中，打开对应App Service的“日志流”，实时查看运行日志。

5. 检查部署路径与文件结构 #

确认部署的文件在Azure的site/wwwroot目录下的结构正确：

• 如果部署的是build文件夹，确保wwwroot下直接包含index.html、static等文件；如果部署的是整个项目，确保wwwroot下有build文件夹，且启动命令中指定了正确的路径（serve -s build）。

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