【React】GAEにyamlファイルでアプリをデプロイする

こんにちは。
今回はReactで作成したアプリをGoogleAppEegineにデプロイする方法を書いていきます。

ファイル構成

src
  -component
    -Card
      -Card.js
      -Card.css
    -Nabver
      -Nabver.js
      -Nabver.css
  -utils
    -module.js
  -App.css
  -App.js
  -index.css
  -index.js
package-lock.json
package.json
app.yaml

割とよくあるファイル構成ですね。
・componentファイル以下にコンポーネントファイル。
・utilsにapiを取得するようなjsファイル。
・App.jsでコンポーネントの読み込みや判定処理。
・index.jsでAppの読み込み。
みたいなテンション。

Google App Engineでデプロイする手順

1.アプリのビルド
2.app.yamlファイルの作成
3.デプロイ

アプリビルド

下記のコマンドでアプリケーションをbuildします。

npm run build

これでbuildファイルが作成されます。
クラウドでアプリを実行する際、複数のjavascriptファイルを一つのバンドルファイルにまとめるためビルドしたファイルをアップロードする必要があり、このコマンドでbuildファイルを作成します

GAEにデプロイする際、今回はreactアプリでは下記のyamlファイルが必要になります。
※nodejsのバージョンは各自の環境で確認してください
※serviceは記述がないとdefaultにアップロードされます。

app.yaml

runtime: nodejs20
service: <任意>
handlers:

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

app.yamlファイルはGAEにデプロイする際に必ず必要なファイルで、実行言語やアップロードするファイルを明記します。
それではデプロイしましょう。

gcloud app deploy --project=(プロジェクト名)

デプロイできました！
それでは下記のコマンドでブラウザでも確認します。（GoogleCloudの管理画面でも確認可能です。）

gcloud app browse -s (サービス名)