はじめに
半年前にReactで作成したWeb Appを更新しようと思ったところ、パソコンをMac Book Air 2017 > Mac Book M2に買い替えたこともあり、やや手間取った。gcloud CLIのインストールからやり直したので、備忘録として手順を残しておく。
gcloud CLIのインストール
作成したWebAppをデプロイするにあたり、gcloud CLIは必須だ。私はMac Book M2を使用しているので、macOS 64 ビット (ARM64, Apple M1 silicon)のパッケージをダウンロードした。
ホームフォルダ直下に解凍後、以下のスクリプトを実施。
./google-cloud-sdk/install.sh
ターミナルを再起動してインストールは終了。念の為ターミナルにgcloud versionと打ち込み、正しくインストールされているか確認。
npmのインストール
npmはインストール済だったので今回作業はしなかったが、初めての人はこちらを参照すると良いだろう。
app.yamlの作成
Reactアプリのルートディレクトリにapp.yaml ファイルを配置する。基本的な中身は以下の通り。アプリの設定を定義するために使用する。
runtime: nodejs16
handlers:
- url: /(.*\..+)$
static_files: build/\1
upload: build/(.*\..+)$
- url: /.*
static_files: build/index.html
upload: build/index.htmlデプロイ手順
gcloud init
このコマンドを初めて打つと、You must log in to continue. Would you like to log in (Y/n)?と聞かれる。Yと回答すると自身のGoogleアカウントに飛んでログイン・情報共有についての可否を問われるので許可をクリックしよう。
その後、自身がクラウド上で管理するプロジェクトの一覧が表示されるので、デプロイしたいプロジェクトを選択。
ビルド
React Appのコード更新が完了したら以下のコマンドでビルド。
npm run build
デプロイ
デプロイは以下のコマンドで実施。Google App Engineへのデプロイはシンプルだ。
gcloud App deploy
まとめ
パソコンをM2にした + gcloud CLIを用いたデプロイ手順を忘れかけていたとあって、デプロイがトラブル無く出来るかやや不安があったものの、非常にスムーズにデプロイ出来た。
コメント