以前、下記の記事でGCPにAngularアプリをデプロイしたけど、待ち時間が長いので、短くできないかと思い、題名の作業をしたので記事にする。

現状やってたこと

以前の記事見ればわかるけど、おさらい。

Dockerイメージをビルド
yarn install
Angularアプリをビルド
Google App Engineにデプロイ

問題

yarn installが遅くて、2分7秒もかかってる。

対応

以前、関わってたプロジェクトがyarnからpnpmに変えて速くなった記憶があるので、これを真似する。

基本、node_modulesはボリュームが大きいので、キャッシュするのが効果的だと思う。

なので、下記2点を対応する

yarnからpnpmに変更
node_modulesをキャッシュする

yarnからpnpmに変更

ちょっと調べたんだけど、gcpにデフォルトでpnpmのDockerイメージが無さそうだったので、自分でDockerイメージを作ることにした。

Dockerファイル修正

こんな感じ

ローカルでビルドしてGCPにpush

# gcloudにログイン
gcloud auth login

# docker認証
gcloud auth configure-docker

# docker build
docker build -t gcr.io/{プロジェクトID}/pnpm:node-20.9.0 .

# push
docker push gcr.io/{プロジェクトID}/pnpm:node-20.9.0

これで、pnpmがインストールされたdockerイメージを使うことができます。

cloudbuild.yamlの修正

Dockerビルドしてたのをやめる（pushしたDockerイメージを使う）
yarnではなく、pnpmを使う

node_modulesをキャッシュする

cloudbuild.yamlを以下のように修正します。
※2-13行目はnode_modulesをリストアしてます。1回目は失敗するので、コメントしてCI成功後、コメントアウトを外した感じです。
※33-48行目がnode_modulesをGoogle Cloud Storageに保存してるとこです。（事前にGoogle Cloud Storageにバケットを作成してます）

結果

ステップ	修正前	修正後
Dockerビルド	21秒	-
node_modulesダウンロード	-	10秒
node_modules解凍	-	18秒
pnpm install	-	29秒
yarn install	2分7秒	-
Angular build	3秒	3秒
デプロイ	32秒	44秒
node_modules圧縮	-	37秒
node_modulesアップロード	-	7秒
合計	3分10秒	2分34秒

34秒の改善です。
今後、node_modulesが大きくなってくると、差はさらに開いてくると思います。

また、表にして気づいたんですが、修正後のnode_modules圧縮とアップロードは変更なければスキップするような処理を入れることができるとさらに改善されそう。

コミットはこちら↓↓↓
https://github.com/ksakae1216/angular2022/pull/140