通过API Gateway访问GCP App Engine静态文件出现404错误

我在App Engine中部署了一个Node.js应用，并配置了API Gateway来路由到该应用。

API配置（YAML） #

paths:
  /hello:
    get:
      summary: Hello
      operationId: hello
      x-google-backend:
        address: <url_from_appengine>
        jwt_audience: <my_jwt_key>
      responses:
        '200':
          description: A successful response
          schema:
            type: string

当通过API Gateway URL加上配置的路径（https://my-gateway.gateway.dev/hello）访问应用时，页面标题能显示，但页面空白，以下静态文件返回404错误：

• https://my-gateway.gateway.dev/static/css/main.xxxxxxxx.css
• https://my-gateway.gateway.dev/static/js/main.xxxxxxxx.js
• https://my-gateway.gateway.dev/manifest.json

直接访问App Engine应用则完全正常。是不是我的API配置路由有遗漏？

以下是我的app.yaml和文件结构：

app.yaml #

runtime: nodejs14
service: my-app

- url: /
  static_files: build/index.html
  upload: build/index.html

- url: /(.*)/$
  static_files: build/\1/index.html
  upload: build/.*/index.html

- url: /(.*\.(css|js|json|gif|eot|png|jpg|jpeg|ico|svg|xml|woff|woff2))$
  static_files: build/\1
  upload: build/.*\.(css|js|json|gif|eot|png|jpg|jpeg|ico|svg|xml|woff|woff2)$

- url: /.*
  static_files: build/index.html
  upload: build/index.html

文件结构 #

build
│
├── index.html
├── manifest.json
├── favicon.ico
│ 
└── static
    │
    ├── css
    │   └── styles.css
    └── js
        └── scripts.js

问题出在你的API Gateway配置只定义了/hello这一条路由规则，页面加载时请求的/static/*、/manifest.json等路径没有对应的路由配置，导致API Gateway无法将这些请求转发到App Engine，直接返回404。

你需要在API配置中添加覆盖静态资源和其他根路径的路由规则，让Gateway把这些请求也转发到App Engine后端。

方案一：精准匹配静态资源路径 #

更新后的API配置示例：

paths:
  /hello:
    get:
      summary: Hello
      operationId: hello
      x-google-backend:
        address: <url_from_appengine>
        jwt_audience: <my_jwt_key>
      responses:
        '200':
          description: A successful response
          schema:
            type: string
  # 匹配所有静态资源请求
  /static/*:
    get:
      summary: Serve static assets
      operationId: staticAssets
      x-google-backend:
        address: <url_from_appengine>
        jwt_audience: <my_jwt_key>
      responses:
        '200':
          description: Static asset response
  # 匹配根目录下的特定文件
  /{file}:
    get:
      summary: Serve root files
      operationId: rootFiles
      parameters:
        - name: file
          in: path
          required: true
          schema:
            type: string
            pattern: "^(manifest.json|favicon.ico)$"
      x-google-backend:
        address: <url_from_appengine>
        jwt_audience: <my_jwt_key>
      responses:
        '200':
          description: Root file response

方案二：通配符匹配所有未覆盖请求（更简洁） #

如果不想逐个配置路径，可以添加通配符路由（注意要放在所有规则最后，避免覆盖/hello的匹配）：

paths:
  /hello:
    get:
      summary: Hello
      operationId: hello
      x-google-backend:
        address: <url_from_appengine>
        jwt_audience: <my_jwt_key>
      responses:
        '200':
          description: A successful response
          schema:
            type: string
  # 匹配所有未被前面规则覆盖的请求
  /{proxy+}:
    get:
      summary: Proxy all other requests
      operationId: proxyAll
      x-google-backend:
        address: <url_from_appengine>
        jwt_audience: <my_jwt_key>
      responses:
        '200':
          description: Proxy response

配置完成后，API Gateway会把/static/*、/manifest.json等所有请求转发到App Engine，App Engine的app.yaml规则会处理这些静态资源的返回，页面就能正常加载了。

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