以前、下記の記事で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