今回は個人で開発したアプリケーションをGoogle cloud platformのApp Engineにデプロイするまでを解説します。

前提

解説にあたって、前提があります。

Reactのアプリをデプロイするので、React寄りの解説になります。(他の言語やフレームワークでもやり方は似ています)
すでにデプロイするアプリができていること(途中でもOKです)
アプリ自体の作成については解説しません

上記の前提の上で解説していきます。

解説

【STEP1】 GCPのアカウント、プロジェクト、GAEの設定

まずは、準備です。
Google Cloudに登録していない人は、アカウント登録をしましょう。

アカウント登録が済んだらコンソールにログインします。

ログイン後、ダッシュボードのヘッダーの部分にあるロゴの隣にプロジェクトを選択するドロップダウンメニューがあるのでそれを開きます。

すでにFirebaseを利用しているなどの場合だと、プロジェクトの一覧部分に該当のプロジェクトがあるかもしれませんが、ない場合は右上の新しいプロジェクトからプロジェクトを作成しましょう。

【STEP2】 SDKをインストール

次に、Cloud SDKをインストールします。

インストールに関しては公式のクイックスタート: Cloud SDK スタートガイドがわかりやすいです。

【STEP3】 gcloud initを実行する

STEP2で紹介したドキュメントにも書いてありますが、SDKのインストール後、初期化をおこないます。

この初期化では、ユーザーのログインやプロジェクトの選択などを行います。

$gcloud init

初期化に関しても公式ドキュメントをご覧ください。
Cloud SDK の初期化

地味にハマったポイント

SDKをインストール後、

$gcloud init

を実行しようとしたところ、

-bash: gcloud: command not found

というエラーが出ました。インストールは完了しているはずなのにと思って調べていると、下記の記事を発見。
gcloud コマンドが認識されないとき（初心者向け）

$ cd ~
$ ls -A

と打った後に、

$ vi .bash_profile

iを押してINSERTモードにし、一番下に以下の2行を追加。

source <sdkを展開したディレクトリ>/google-cloud-sdk/completion.bash.inc
source <sdkを展開したディレクトリ>/google-cloud-sdk/path.bash.inc

ここで、SDKを展開したディレクトリってどこ(??)となるかもしれませんが、もしMacをお使いの場合は、(おそらく)ダウンロードフォルダに入っていると思います。ない場合はfinderの検索機能を使いましょう。(google-cloud-sdkと打てば見つかるはずです)
僕の場合はわからなかったので検索して見つけました。
SDKを展開したフォルダを開いて、completion.bash.incとpath.bash.incを探し、先ほど開いたbash_profileにドラッグ&ドロップ。

escキーを押してINSERTモードから出た後、:wqで保存し終了します。

一度、ターミナルをexitして再起動。もう一度gcloud initを試すと、上手くいきました。

どうやらパスが通っていなかったらしい。。。
パスを通すの意味がイマイチな人は下記の記事を参考にしてみてください。
「PATH を通す」の意味をできるだけわかりやすく説明する試み

【STEP4】 app.yamlファイルを作成する

app.yamlファイルをプロジェクトのルートディレクトリに作成します。

(↑プロジェクトルートにapp.yamlを作成したという図です。)

app.yamlでは、App Engineのアプリの設定を行います。

GAEは従量課金制のため、スケーリングされればされるほど課金されます。
なので、個人開発でそんなにアクセスが見込めない場合はあまりスケーリングしないような設定にしておいた方がいいかもしれません。

以下は僕のapp.yamlですが、各種設定項目に関しては公式ドキュメントを見つつ、どれがどういう設定項目なのかを理解した上で、ファイルを記述することをお勧めします。

※余談ですが、僕はAWSのEC2で設定をミスって(というか全く理解しないまま適当にやって)、10万円請求されたことがあります。なので、オートスケールするようなGCPなどのクラウドサービスを使うときは特に慎重に設定を進めています 😅

app.yaml

runtime: nodejs12
env: standard
handlers:
  - url: /static
    static_dir: build/static
  - url: /(.*\.(json|ico|js))$
    static_files: build/\1
    upload: build/.*\.(json|ico|js)$
  - url: .*
    static_files: build/index.html
    upload: build/index.html
    expiration: "0s"
instance_class: F1
automatic_scaling:
  min_idle_instances: automatic
  max_idle_instances: 1
  min_pending_latency: 3000ms
  max_pending_latency: automatic
  max_instances: 1
  min_instances: 0

ざっくり説明すると、runtimeではnodejs、envではスタンダード環境で実行してくださいという指定を、handlersの部分ではbuildフォルダ内ののファイルを使ってくださいという指定をしています。また、オートスケールしないように、automatic_scalingの部分で、max_instancesを１に設定しています。instance_classに関しては、こちらの記事から引用させていただきます。

Dialy無料枠はF1:28H, B1:8Hなので、F2やB2などの上のinstance_classを使うと、無料枠の減少が早くなります。
必要最低限のinstance_classを指定すると安くていいです。

つまり、特に必要がなければ無料枠内で使いたい場合、F1に設定しておいた方が(無料枠の減りが早くなくて)いいということです。

以下は、app.yamlを書く上で参考にした記事です。
Google App Engine(GAE)を無料枠で収めるための勘所
 Create React Appで作成したReactアプリをGoogle App Engineにデプロイする際の設定
 App Engine Scaling Config

【STEP5】デプロイする

app.yamlの設定が終わったら最後はデプロイです。

ですが、その前に$ npm run buildでもう一度ビルドをしておきます。

ビルドが完了したら以下のコマンドを実行してください。

$ gcloud app deploy app.yaml --project [project-id]

Beginning deployment of service [default]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 0 files to Google Cloud Storage                ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...done.                                               
Setting traffic split for service [default]...done.                              
Deployed service [default] to [ここにはURLが表示されます]

You can stream logs from the command line by running:
  $ gcloud app logs tail -s default

To view your application in the web browser run:
  $ gcloud app browse

デプロイが上手くいっている場合は上記のようになると思います。
[ここにはURLが表示されます]と書いたところに、あなたのアプリケーションのホスト先のURLが書いてあるので、アクセスできるか確認してみましょう。

ちゃんと、想定通りの画面になっていればデプロイ完了です！！

お疲れ様でした🎉

最後に

ここまで、Google App Engineにアプリをデプロイする方法について解説してきました。

筆者の僕自身、まだクラウドはわからないことだらけで調べつつなんとかデプロイするところまで辿り着きました。ですので、今後App Engineを使う人が少しでも楽できればと思いこの記事を書いています。

また、間違いに気づいたり、今後なんらかのアップデートやapp.yaml、そしてGCPなどのクラウドに関する知見が溜まったら少しづつ、この記事に書き足していく予定です。

最後までご覧いただきありがとうございました。

前提

解説