エンジニアであれば、自分のアプリやスタックの一部を動かす・デプロイするために、チュートリアルや記事を探し回った経験は誰しもあるのではないでしょうか。
先日もそうしたケースがありました。あるお客様がReact / NodeJS製アプリをGoogle App Engineへデプロイできずに悩まれていたのです。当社チームがサポートに入り、ご相談から1時間以内に問題なく動作する状態までこぎつけました。
以前、12-factor原則に沿ったReactベースアプリのDocker化の例(ENV変数を活用)を公開していたこともあり、今回は自分でも試してみることにしました。create-react-appでシンプルなReactアプリケーションを作成し、Googleのgcloud SDKを使ってApp Engineへデプロイ。ほんの数分でクラウド上に立ち上げることができたので、その手順をご紹介します。
ゴール
手順通りに進めれば、数分後にはブラウザで以下のような画面が表示されるはずです(URLはもちろん環境ごとに異なります)。
App Engine上で動作するReactアプリの例(所要時間は数分)
前提条件
- NodeJSがインストール済みであること(Macの場合は
brew install node) - GCloud SDKがインストール済み(インストール手順)かつ認証済みであること
- 有効なGoogle Cloud Platform (GCP) プロジェクトがあること
動作確認済みスクリプト
結論から言うと、私の環境で動作したのは以下の手順です。コマンドを1つずつ実行してもよいですし、ファイルをそのままコピーして実行権限を付与し、プロジェクトIDを書き換えてローカルで実行することもできます。
数分でアプリが立ち上がり、ブラウザからアクセスできるようになります。クイックスタート用のサンプルリポジトリも以下に用意しました。
クリーンアップ
クラウドアカウントで意図しない課金が発生しないよう、プロジェクトごと削除するか、以下のコマンドでデプロイしたアプリを削除してください。
# remove app engine service
gcloud app services delete <YOUR APP NAME># if warnings, potentially delete versions
gcloud app versions listgcloud app versions delete <VERSION ID> # repeat