👛

AppEngineをつかって無料枠内でSPAをホストするためのapp.yaml

2023/12/05に公開

Google App Engine

SPA

tech

はじめに

タイトル通りですが、たまに必要になるものの頻繁に使用しないので忘れてしまいがちな設定としてメモしておきます。
本記事では Vue3 で作成した SPA をデプロイする想定で書いていますが、他のフレームワークでも同様かと思います。

ちなみによく間違えますが、 app.yml じゃなくて app.yamlです。

デフォルトサービスの場合

runtime: php82

handlers:
  - url: /(.*\..+)$
    secure: always
    static_files: dist/\1
    upload: dist/(.*\..+)$

  - url: /.*
    secure: always
    static_files: dist/index.html
    upload: dist/index.html

  - url: /
    secure: always
    static_files: dist/index.html
    upload: dist/index.html

env: standard
instance_class: F1

automatic_scaling:
  min_idle_instances: automatic
  max_idle_instances: 1
  min_pending_latency: 3000ms
  max_pending_latency: automatic
  max_instances: 2

特定のサービスの場合

service2 というサービスを　/service2　というパスにデプロイする場合、/service2 がベースURLになるように vite.config.te の base プロパティに /service2 を指定しておきます。

runtime: php82
service: service2

handlers:
  - url: /service2/(.*\..+)$
    secure: always
    static_files: dist/\1
    upload: dist/(.*\..+)$

  - url: /service2/.*
    secure: always
    static_files: dist/index.html
    upload: dist/index.html

  - url: /service2
    secure: always
    static_files: dist/index.html
    upload: dist/index.html

  - url: .*
    script: auto

env: standard
instance_class: F1

automatic_scaling:
  min_idle_instances: automatic
  max_idle_instances: 1
  min_pending_latency: 3000ms
  max_pending_latency: automatic
  max_instances: 2