Azure Communication Service快速入门应用部署至Azure App Service报404如何解决

首先明确：该示例项目支持部署到生产环境，出现404的核心原因是默认配置仅适配本地开发场景，webpack内置的本地开发服务器不会在Azure App Service运行环境中生效，部署前需要完成生产环境适配配置。

1. 调整项目打包与服务配置 #

• 先修改package.json的脚本配置，添加生产构建命令与生产服务启动命令：

  "scripts": {
    "build": "webpack --mode production",
    "start": "node server.js"
  }
  

• 在项目根目录新建server.js作为生产环境服务入口，替代webpack内置的本地开发服务器，需要同时实现静态资源托管、前端路由兼容、Token生成接口三个核心能力：

  const express = require('express');
  const path = require('path');
  const { CommunicationIdentityClient } = require('@azure/communication-identity');
  const app = express();
  const port = process.env.PORT || 3000;
  
  // 读取Azure通信服务连接密钥，从App Service应用配置中读取避免硬编码
  const connectionString = process.env.AZURE_COMMUNICATION_CONNECTION_STRING;
  const identityClient = new CommunicationIdentityClient(connectionString);
  
  // 托管webpack构建出来的dist目录静态资源
  app.use(express.static(path.join(__dirname, 'dist')));
  
  // 迁移原dev server的Token生成接口
  app.get('/api/token', async (req, res) => {
    try {
      const user = await identityClient.createUser();
      const tokenResponse = await identityClient.getToken(user, ["voip"]);
      res.send({
        user: user,
        token: tokenResponse.token,
        expiresOn: tokenResponse.expiresOn
      });
    } catch (error) {
      res.status(500).send({error: 'Token生成失败'});
    }
  });
  
  // 兼容React History路由模式，避免直接访问子路由出现404
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
  });
  
  app.listen(port, () => {
    console.log(`服务运行在端口 ${port}`);
  });
  

• 本地执行npm run build验证构建流程，确认根目录生成dist文件夹，包含index.html及打包后的静态资源。

2. 配置Azure App Service部署规则 #

• 进入Azure门户对应App Service的「配置」-「应用程序设置」，添加键为AZURE_COMMUNICATION_CONNECTION_STRING的配置项，值为你的Azure通信服务连接字符串。
• 切换到「配置」-「常规设置」，将启动命令设置为npm start。
• 检查你的部署流程，确保部署过程会执行npm install、npm run build两个步骤，并且将dist文件夹、server.js、package.json都上传到App Service的运行目录。

3. 部署后排查 #

如果部署完成依然出现404，可以通过以下步骤定位问题：

• 进入App Service的「高级工具」打开Kudu控制台，查看site/wwwroot目录下的文件是否完整。
• 开启App Service的日志流，查看服务启动时的报错信息，比如依赖缺失、权限不足等问题。

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