如何在AWS容器网站中暴露3030端口并调用server.js接口？

部署到AWS容器后，浏览器中发起的localhost:3030请求指向的是用户本地机器，而非AWS容器内的后端服务，这是请求失败的核心原因。

1. 合并前端与后端到同一容器 #

将React静态文件与Node后端打包进同一个Docker容器，让前端通过容器内部地址访问后端：

• 更新Dockerfile，先构建前端静态资源，再启动后端并托管前端文件：

# 构建React前端
FROM node:18-alpine AS build-stage
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 生产环境镜像
FROM node:18-alpine
WORKDIR /app
# 复制前端构建产物
COPY --from=build-stage /app/build ./build
# 复制后端依赖与代码
COPY src/server/package*.json ./src/server/
RUN npm ci --prefix src/server
COPY src/server/ ./src/server/

EXPOSE 3030
CMD ["node", "src/server/server.js"]

• 修改server.js，添加静态文件托管逻辑，让后端同时提供前端页面和API服务：

const express = require('express');
const path = require('path');
const app = express();

// 托管React静态文件
app.use(express.static(path.join(__dirname, '../../build')));

// API接口
app.get('/api/data', (req, res) => {
  res.send('Sample response from server');
});

// 所有非API请求返回React入口页
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../../build', 'index.html'));
});

const PORT = process.env.PORT || 3030;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

• 前端请求地址改为相对路径/api/data，不再依赖localhost:3030。

2. 用环境变量区分开发/生产环境 #

通过环境变量配置API地址，避免硬编码：

• 项目根目录创建.env.development和.env.production：
  • .env.development：REACT_APP_API_BASE=http://localhost:3030/api
  • .env.production：REACT_APP_API_BASE=/api
• 前端请求时引用环境变量：

fetch(`${process.env.REACT_APP_API_BASE}/data`)
  .then(res => res.text())
  .then(result => {
    // 更新UI逻辑
  });

3. 验证AWS容器配置 #

• 检查ECS任务定义：确保容器的3030端口已正确映射到主机端口（或在ALB目标组中配置目标端口为3030）。
• 确认安全组规则：允许外部流量访问容器实例的3030端口（或ALB的监听端口）。

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