GCP上Angular应用连接Cloud SQL(PostgreSQL)出现404问题求助

核心问题总结 #

你的404错误源于请求路由不匹配、数据库连接配置不一致、代理配置逻辑错误三个核心问题，以下是逐个修正方案：

1. 修正app.yaml配置（关键：处理/api路由，统一DB配置） #

当前handlers规则会把所有请求导向Angular静态文件，包括/api开头的后端请求，直接导致404。同时DB配置与.env文件不一致，需统一调整：

runtime: nodejs16
instance_class: F2
env_variables: 
  BUCKET_NAME: "todomvc-bc"
  # 统一Cloud SQL实例ID，格式：项目ID:区域:实例名
  INSTANCE_UNIX_SOCKET: /cloudsql/trans-proposal-3771:us-central1:post
  DB_USER: postgres
  DB_PASS: 999999 # 和.env保持统一值
  DB_NAME: todomvc
handlers:
  # 优先处理/api开头的请求，转发到Express服务器
- url: /api/*
  script: auto
  # 处理根路径的单页应用入口
- url: /
  static_files: dist/todomvc-app/index.html
  upload: dist/todomvc-app/index.html
  # 处理其他静态资源文件
- url: /(.*)
  static_files: dist/todomvc-app/\1
  upload: dist/todomvc-app/(.*)

注意：script: auto会让App Engine自动运行你的Express服务器，需确保package.json中start脚本指向服务器入口文件。

2. 修正Express的.env配置（正确连接Cloud SQL） #

Cloud SQL在App Engine上通过Unix套接字连接，无需DB_PORT，且配置需与app.yaml完全统一：

DB_USER='postgres'
DB_PASSWORD='999999' # 与app.yaml的DB_PASS保持一致
# 移除错误转义单引号，确保实例ID与app.yaml一致
DB_HOST='/cloudsql/trans-proposal-3771:us-central1:post'
DB_DATABASE='todomvc' # 与app.yaml的DB_NAME保持一致

使用pg库连接时，需用套接字路径配置：

const { Client } = require('pg');
const client = new Client({
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_DATABASE,
  host: process.env.DB_HOST // 直接使用套接字路径
});

3. 修正代理配置逻辑（部署环境无需本地代理） #

你当前的代理配置把/api指向localhost:5432完全错误——PostgreSQL使用数据库协议而非HTTP协议，代理应指向你的Express服务器，且该代理仅适用于本地开发环境：

• 开发环境代理目标改为Express服务器端口（如3000）：

{ "/api": { "target": "http://localhost:3000", "secure": false } }

• 部署到GCP后，无需代理，Angular的/api请求直接发送到App Engine域名即可（例如https://你的应用ID.uc.r.appspot.com/api/xxx）。

额外检查项 #

• 确认Cloud SQL实例已授权App Engine服务账号访问（在Cloud SQL控制台「连接」→「授权服务账号」中添加App Engine默认服务账号）。
• 确保Express服务器监听端口使用process.env.PORT || 3000（App Engine会自动分配端口）。
• 检查Cloud SQL实例处于运行状态，且todomvc数据库已创建。

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