【学習記録】CircleCIでS3にデプロイ成功した&ハマったポイント

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はできてきたので嬉しいです。
引き続き開発を進めます。