フロントエンドのレビューで動作確認するのが、ちょっと面倒だったけど、GCPのお陰で、レビューの手間が減った話
はじめに
恐らくフロントエンドのレビューってこんな感じだと思う。
- github上で、コードチェック
- 現在作業中のコード変更分をstashなどに退避する
- レビューするブランチにswitchする
- 動作確認
- レビュー終わったら作業中のブランチにswitchしstashから戻す
この２〜５が意外に面倒なんですよね。
しかも、今の現場がそうだけど、1日に、４、５回もレビューする時は、この２〜５の作業がバカにならない。
しかーし、GCPを使えばこんなことをしなくて良くなる
GCPで解決
題名の通りのことをできれば、２〜５の作業をしなくて済む
- プルリクエストを作成
- githubにpush
- mainブランチに対してプルリクエストを作成
- プルリクエストが作成されたら、GCPにアプリをデプロイ
これができれば、レビューするときの動作確認はGCP上のアプリに対してすれば良いので、ローカルの作業をいちいち退避する必要がない！
参考資料
ベースは下記を参考にした。
やってみる
GCP側
参考資料に記載の通りに、GCPにプロジェクトを作成し、Cloud Buildの設定をする。
その後も、IAMやロールを設定する
アプリ側
app.yaml作成する
基本、参考資料の通りです。
一応、コード載せておきますね。
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /
static_files: dist/apps/myorg/index.html
upload: dist/apps/myorg/index.html
- url: /
static_dir: dist/apps/myorg
skip_files:
- e2e/
- node_modules/
- src/
- ^(.*/)?\..*$
- ^(.*/)?.*\.json$
- ^(.*/)?.*\.md$
- ^(.*/)?.*\.yaml$
- ^LICENSE
cloudbuild.yaml作成する
こちらも参考資料を元にしましたが、少し変更してます。
steps:
- name: 'gcr.io/cloud-builders/docker'
args:
- 'build'
- '--build-arg=NODE_VERSION=18.10.0'
- '--tag=gcr.io/17551150001/yarn:node-18.10.0'
- '.'
# Install node packages
- name: 'gcr.io/17551150001/yarn:node-18.10.0'
args: [ 'install' ]
# Build productive files
- name: 'gcr.io/17551150001/yarn:node-18.10.0'
args: [ 'run', 'build', '--prod' ]
# Deploy to google cloud app egnine
- name: 'gcr.io/cloud-builders/gcloud'
args: ['app', 'deploy', '--version=${_PR_NUMBER}', '--no-promote']
ポイントとしては、gcloudコマンドの下記2つ
- '--version=${_PR_NUMBER}' でgithubのプルリク番号
- '--no-promote'でユニークなURL
プルリク作成してみる
これで、プルリク作成すると、参考資料のとおり、失敗するので、gcloud app createコマンドを実行。
ちょっとうろ覚えだけど、自分は試行錯誤で色々プロジェクト作成してて、プロジェクトを指定してこのコマンドを実行した気がする（うろ覚えですいません）
参考資料のとおり、Retryしてみたけど、まだ失敗。。。
permissionエラーだったので、下記を参考に解消。
で、再びリトライすると・・・
ビルド成功
はい、ビルド成功！！
赤線のURLに接続するとちゃんと画面が表示されました。
最後に
これは、本当に便利！！
もう、レビューのために、コード退避したり、ブランチ切り替えなくて良くなる！！
まだ少し、課題があって、今後対応予定。
- github側に接続URLを表示したい（今はGCP見に行かなきゃいけない）
- 古いバージョンは自動的に削除したい（現状、残り続けるはず、お金が勿体無い）