React与Node.js项目部署Azure App Service后提示无权限访问目录或页面

根因分析 #

你当前部署到Azure App Service的是React项目的原始源码，未提前编译生成生产环境可用的静态产物。Azure App Service默认不会自动执行React的构建流程，也无法直接访问源码目录下的入口资源，因此触发了「无权限访问目录或页面」的报错。

解决步骤 #

1. 本地生成生产环境产物 #

进入本地React项目根目录，执行如下命令完成项目编译：
npm run build
命令执行完成后，项目根目录会生成build文件夹，内部包含所有可直接部署的静态资源，其中就包含站点入口文件index.html。

2. 调整部署配置，两种方案二选一即可 #

方案A：直接部署build文件夹（适合一次性部署场景）

• 打开VS Code的Azure App Service扩展
• 右键点击UI项目对应的应用服务，选择「Deploy to Web App」
• 路径选择时不要选中项目根目录，直接选择新生成的build文件夹
• 等待部署完成即可访问

方案B：配置自动构建（适合迭代频繁的场景）

• 打开UI项目的package.json，在scripts节点新增postinstall命令，让Azure部署时自动执行构建流程：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postinstall": "npm run build"
}

• 进入Azure门户对应应用服务的「配置」-「路径映射」页，将虚拟路径/对应的物理路径修改为site/wwwroot/build，保存设置后重启应用服务

3. 异常排查 #

如果部署完成后仍然报错，可进入Kudu控制台检查对应部署目录下是否存在index.html文件，确认默认文档配置中index.html的优先级高于其他文件即可。

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