Vite + React + TypeScriptのアプリをGoogle App Engineにデプロイ

プロジェクトの作成

Vite + React + TypeScriptのプロジェクト (my-project) を作成してから動作確認します。

yarn create vite my-project --template react-ts
cd my-project
yarn
yarn dev

GAE(Google App Engine)にデプロイ

GAEの設定ファイル (app.yaml) を以下の内容で作成します。
Viteのデフォルト設定ではビルド結果がdistディレクトリに出力されるのでそちらを参照します。

runtime: nodejs16

instance_class: F1

automatic_scaling:
  max_instances: 1
  min_instances: 1
  max_idle_instances: 1
  min_idle_instances: 0

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

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

Viteでビルドを実行した後にGAEにビルド結果をデプロイします。

yarn build
gcloud app deploy