咨询：在Azure同一App Service部署React+Node.js应用是否可行？

你的部署思路完全没问题，Azure App Service支持将前后端部署在同一服务实例中，下面是几种经过验证的实现方式：

方案一：修正Docker Compose多容器配置 #

之前部署失败大概率是配置细节没处理到位，核心调整点如下：

• 确保前端容器暴露3000端口（React默认），后端容器暴露API端口（比如5000）
• 在docker-compose.yml中配置默认网络，让两个容器能通过容器名互相访问
• Azure端配置：
  • 选择App Service的多容器部署选项，上传docker-compose.yml
  • 在应用设置里添加WEBSITES_PORT=3000，指定对外暴露的前端端口
  • 前端项目中把API请求地址设为http://backend:5000（用后端容器名代替IP）
• 示例docker-compose.yml：

version: '3.8'
services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend
  backend:
    build: ./backend
    ports:
      - "5000:5000"

• 注意：镜像要上传到Docker Hub或Azure Container Registry，确保Azure能拉取到

方案二：单容器打包前后端 #

把React静态文件嵌入Node.js后端，打包成一个镜像部署，步骤更简单：

1. 在React项目执行npm run build生成静态文件
2. 将build目录复制到Node.js项目的public目录下
3. 后端代码中添加静态文件托管（以Express为例）：

const express = require('express');
const app = express();
// 托管React静态文件
app.use(express.static('public'));
// API路由
app.get('/api/hello', (req, res) => {
  res.send('Hello from backend');
});
// 处理SPA路由，刷新页面不404
app.get('*', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});
app.listen(5000, () => console.log('Server running on port 5000'));

4. 编写Dockerfile：

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
EXPOSE 5000
CMD ["node", "server.js"]

5. 构建镜像并推送到容器注册表，部署到单容器App Service，设置WEBSITES_PORT=5000

方案三：无Docker直接部署 #

不想用Docker的话，直接部署Node.js应用即可：

1. 构建React前端得到build目录，移动到Node.js项目根目录
2. 按方案二配置后端的静态文件托管和SPA路由
3. 在Azure创建Node.js类型的App Service，通过Git/ZIP包上传整个项目
4. 应用设置中开启SCM_DO_BUILD_DURING_DEPLOYMENT=true，让Azure自动安装依赖并部署

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