基于Terraform的AWS ECS Fargate前后端通信405故障求助

一、405 Method Not Allowed 错误排查 #

405错误核心是请求方法与后端接口不匹配，按以下优先级排查：

• 接口方法匹配检查：确认前端发起的请求方法（GET/POST/PUT等）与FastAPI后端接口定义的方法完全一致。比如前端用POST请求了仅支持GET的接口，必然触发405。
• 后端ALB监听规则：检查私有子网内后端ALB的监听配置，确认监听规则允许对应的请求方法。若ALB仅开放了GET请求，前端发送POST会被直接拦截。
• CORS配置验证：本地测试正常但线上报错，大概率是FastAPI的CORS中间件未配置允许前端公网ALB域名的origin，或未放开对应的请求方法。本地origin是localhost，线上是公网ALB域名，需将其加入CORS允许列表。
• VPC安全组连通性：
  • 前端ECS任务的安全组需允许出站访问后端ALB的端口（如80/443）；
  • 后端ALB的安全组需允许来自前端任务安全组的入站流量。

二、React环境变量读取问题与Dockerfile修复 #

React在build阶段会将环境变量注入静态文件，运行时无法直接读取容器系统环境变量。针对你遇到的Dockerfile错误，提供两种可行方案：

方案1：运行时动态注入环境变量（推荐） #

通过启动脚本替换静态文件中的占位符，实现容器启动时动态加载ECS任务的环境变量：

修正后的Dockerfile（多阶段构建）

# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 运行阶段
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
# 复制启动脚本
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

启动脚本 entrypoint.sh

#!/bin/sh
# 替换静态文件中的占位符为容器环境变量
sed -i "s/REACT_APP_BACKEND_PLACEHOLDER/$REACT_APP_BACKEND_URL/g" /usr/share/nginx/html/static/js/*.js
sed -i "s/REACT_APP_BACKEND_PLACEHOLDER/$REACT_APP_BACKEND_URL/g" /usr/share/nginx/html/index.html
# 启动nginx
exec "$@"

React代码适配

在代码中使用占位符作为默认值：

const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || "REACT_APP_BACKEND_PLACEHOLDER";

方案2：构建时注入环境变量（用env-cmd） #

若坚持在build阶段注入，需确保Dockerfile安装命令和build脚本正确：

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
# 全局或开发依赖安装env-cmd
RUN npm install env-cmd --save-dev
RUN npm install
COPY . .
# 指定环境变量配置文件执行build
RUN npx env-cmd -f .env.production npm run build
# 复制构建产物到nginx目录
COPY build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

注意：此方式环境变量会固化在镜像中，无法通过ECS任务定义动态修改。

三、Terraform配置验证 #

确认ECS任务定义中环境变量已正确传递后端ALB域名：

resource "aws_ecs_task_definition" "frontend" {
  family                   = "frontend-task"
  network_mode             = "awsvpc"
  requires_compatibilities = ["FARGATE"]
  cpu                      = "256"
  memory                   = "512"
  execution_role_arn       = aws_iam_role.ecs_execution_role.arn
  task_role_arn            = aws_iam_role.ecs_task_role.arn

  container_definitions = jsonencode([
    {
      name      = "frontend"
      image     = aws_ecr_repository.frontend.repository_url
      essential = true
      portMappings = [
        {
          containerPort = 80
          hostPort      = 80
        }
      ]
      environment = [
        {
          name  = "REACT_APP_BACKEND_URL"
          value = aws_lb.backend.dns_name
        }
      ]
    }
  ])
}

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