Google App Engine：未找到处理程序引用的静态文件：./dist/index.html

Question

我在 Google Cloud Platform 上有一个带有 Google App Engine 的项目，它有 2 个服务，1 个 NodeJS 后端和 1 个用于服务静态前端。

我的目录结构如下：

backend/
- app.yaml # service: api

front/
- app.yaml # service: default
- dist/
- src/
- - *.ts
- - *.vue

我部署了这两个服务，都通过 Cloud Build 构建并成功部署。 api 可以在 api.mydomain.com 访问，但是当我在 mydomain.com 访问前端时，我得到一个 404 并且在 GCP 日志中我发现了这个：Static file referenced by handler not found: ./dist/index.html.

现在我头撞墙了 1 天，但仍然无法找出问题所在，我检查了部署在 App Engine 上的源代码，index.html 文件在那里：

这是前端 app.yaml 的内容，他专为 VueJS SPA 服务而设计（PS：我还尝试从路径中删除前导 ./）：

runtime: nodejs12

env_variables:
  NODE_ENV: 'production'

handlers:

# Serve all static files with url ending with a file extension
- url: /(.*\..+)$
  secure: always
  static_files: ./dist/
  upload: ./dist/.*\..+$

# Catch all handler to index.html
- url: /.*
  secure: always
  static_files: ./dist/index.html
  upload: ./dist/index.html

你知道这是怎么回事吗？

Answer 1

在您的 app.yaml 中尝试将 ./dist/ 更改为 dist/ 因此：

handlers:

# Serve all static files with url ending with a file extension
- url: /(.*\..+)$
  secure: always
  static_files: dist/
  upload: dist/.*\..+$

# Catch all handler to index.html
- url: /.*
  secure: always
  static_files: dist/index.html
  upload: dist/index.html

另请参阅我对与您的问题类似的问题的回答。我认为让你的 catch-all 处理程序只是 return index.html 是个坏主意（查看 EDIT 1 和 EDIT 2）

My react frontend is not changing when I deploy to Google App Engine

Answer 2

最后我解决了为 SPA 应用程序创建 NodeJS 静态文件服务器 + 重写规则的问题，它非常基础并且使用 koa 和 koa-static 依赖项（koa-logger 是可选的） :

const Koa = require('koa')
const koaLogger = require('koa-logger')
const koaStatic = require('koa-static')

const RE_ASSET_PATH = /\.\S{2,4}$/
const PORT = process.env.PORT || 3000

const app = new Koa()

app.use(koaLogger())

app.use(async (ctx, next) => {
  if (!ctx.url.match(RE_ASSET_PATH)) {
    ctx.url = '/'
  }

  await next()
})

app.use(koaStatic('dist'))

app.listen(PORT, () => {
  console.log('Client served at port', PORT)
})

服务器通过 app.yaml 运行，现在是 ~empty:

runtime: nodejs12

最后我在 package.json

中添加了一个启动脚本

"start": "node server.js",

Google App Engine：未找到处理程序引用的静态文件：./dist/index.html

Google App Engine: Static file referenced by handler not found: ./dist/index.html

deployment

google-app-engine

google-cloud-platform

vue.js