CircleCIで指定したブランチにプッシュした際にS3に自動デプロイを設定したく、何日か挑戦してなんとか成功しました。
そして成功して喜んでいた後に再度動かしてみるとビルドエラーが起きたのでドキュメントを読んで解決したりしました。
結論から書くと自分でconfig.ymlからパイプ |を消したのが原因でした。
そういえば最初CircleCIからS3にデプロイ成功した後に、ymlファイルのスクリプトをリファクタリングしようとしてパイプを消していました。
元々成功していたconfig.ymlの一部を抜粋します。
# 実行コマンドの定義
commands:
npm_install:
steps:
- run:
name: Start npm install
command: |
cd client
sudo apt-get install npm
npm install
# ジョブの定義
jobs:
vue_deploy:
executor: default
steps:
- checkout
- npm_install
- run:
name: build
command: |
cd client
npm run build
- aws-s3/sync:
from: client/dist
to: s3://picture-app.link/
overwrite: true
パイプを消してビルドに失敗していたconfig.ymlは以下。
# 実行コマンドの定義
commands:
npm_install:
steps:
- run:
name: Start npm install
command:
cd client
sudo apt-get install npm
npm install
# ジョブの定義
jobs:
vue_deploy:
executor: default
steps:
- checkout
- npm_install
- run:
name: build
command:
cd client
npm run build
- aws-s3/sync:
from: client/dist
to: s3://picture-app.link/
overwrite: true
ymlで気をつけるのはインデントのみと思い込んでいて原因を調査するのが大変でした。
ビルドが通らない原因がわからず公式ドキュメントを読んでいると以下の記述を発見。
最初のパイプ | は、複数行のシェル コマンドがあることを示します。
なるほど、パイプを消したためにcommandが複数行として認識されていなかったようです。
完全にこれが原因だと気づきCirceCIのログを確認してみました。
するとVueアプリのあるclientディレクトリにcdしてnpm run buildを行うはずのコマンドが以下のようにひとつになってしまっていました。
cd client npm run build
これによって、distディレクトリが作成されずその後のS3にデプロイのコマンドでno such file or directoryエラーになっていました。
再度パイプをつけてCircleCIを動かすと以下のように想定通りコマンドが認識されていました。
cd client npm run build
現場でやらかす前に個人開発でCircleCIの知見が貯めれたのでよかったですが、一度成功しているコードをリファクタリングする時は気をつけるようにしないといけないなと思いました。
そもそも失敗したらすぐに成功したときのコードで動作確認するべきだったな。
インデントを気にするばかりでパイプは完全に気にしてませんでした。
なんにせよCI/CDはできてきたので嬉しいです。
引き続き開発を進めます。
