Google App Engine で、Vueとnode.jsアプリをエンドポイントを分けて共存させたい

Question

やりたい事

Google App Engine上に以下のようにアプリをデプロイしたいと思っています。

Vueで作ったフロントエンド

vue-cliで作った、ルーターありのサンプルアプリそのままです。
ルートは、/と、/aboutの二種類です。

node.jsで作ったバックエンド

expresで作成したapiです。
最終的には、/apiでアクセスできるようにしたいです。

試した事

各アプリで、以下のようなyamlを作成してデプロイしました。

Vueで作ったフロントエンド

• app.yaml

runtime: php55
api_version: 1

handlers:
- url: /
  static_files: dist/index.html
  upload: dist/index.html

- url: /(.*)
  static_files: \1
  upload: dist/(.*)

node.jsで作ったバックエンド

• app.yaml

runtime: nodejs8
service: api
instance_class: F1

• dispatch.yaml

dispatch:
  - url: "*/api/*"
    service: api

問題

この設定のままだと、/apiのエンドポイントへのアクセスが/(.*)に食われて、バックエンドまでたどり着けないようです。ここまでは調べました。
https://stackoverflow.com/questions/25978198/appengine-module-routing-with-dispatch-yaml-not-working

ただ、ここからどのようにapp.yamlを編集したら良いか分からず困っています。
以下のように、必要と思われるルートだけを個別に設定する方法も試したのですが、設定が悪いのか必要なファイルが読み込めないためフロントエンドが表示されず、結局/api にも到達できませんでした。

• vue側のapp.yaml

runtime: php55
api_version: 1

handlers:
- url: /
  static_files: dist/index.html
  upload: dist/index.html

- url: /css/(.*)
  static_files: \1
  upload: dist/css/(.*)
  secure: always

- url: /js/(.*)
  static_files: \1
  upload: dist/js/(.*)
  secure: always

- url: /img/(.*)
  static_files: \1
  upload: dist/img/(.*)
  secure: always

Error: Not Found

The requested URL /api was not found on this server.

詳しい方いらっしゃいましたら、解決法をご教授頂けますと幸いです。
宜しくお願い致します。

Answer 1

dispatch.yaml は上からリクエストを処理していくようで、dispatch.yaml に default へのルートを追加して適切な順番で書いたらアクセスできました。

dispatch:

  - url: "*/api*"
    service: api

  - url: "*/*"
    service: default