如何将带Node后端与Redis缓存的React应用部署至Azure静态应用？

一、Node.js后端适配Azure环境 #

• Azure静态Web应用支持将Node.js代码作为API后端部署，默认要求后端代码放在api目录下，也可在部署时自定义路径。
• 替换Redis本地连接配置：本地用localhost的方式在Azure环境不生效，需要先在Azure上创建Azure Cache for Redis实例，获取其连接字符串后，通过环境变量注入后端代码：

  const redis = require('redis');
  const client = redis.createClient({
    url: process.env.REDIS_CONNECTION_STRING
  });
  

• 登录Azure门户，找到你的静态Web应用，进入“配置”→“应用程序设置”，添加环境变量REDIS_CONNECTION_STRING，值为Azure Cache for Redis的连接字符串。

二、调整项目结构 #

• 确保项目结构符合Azure静态Web应用的部署约定，示例结构如下：

  项目根目录/
  ├── api/          # Node.js后端代码，入口文件建议为index.js
  ├── src/          # React前端源码
  ├── package.json  # 前端依赖配置
  └── api/package.json  # 后端依赖配置
  

• 若原后端不在api目录，可直接移动代码，或在部署设置中指定API目录路径。

三、更新部署配置 #

• 如果你用GitHub Actions部署，修改.github/workflows下的Azure静态Web应用部署配置文件，确保API位置、前端位置和打包输出目录正确：

  api_location: "api"
  app_location: "/"
  output_location: "build"
  

• 提交配置更改后，触发自动部署，Azure会自动构建React前端并部署Node.js后端。

四、验证服务可用性 #

• 部署完成后，访问API测试路径（如https://<你的应用域名>.azurestaticapps.net/api/xxx），检查Redis缓存功能是否正常工作。
• 若出现连接问题，可通过Azure静态Web应用的“日志”选项卡排查API错误，或检查Azure Cache for Redis的防火墙规则（需允许Azure服务访问实例）。

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