CircleCI その2 フロントエンドタスクの最適化

CI はパフォーマンスのチューニングも大切ですが、意味があるテストを適切なタイミングで適切な負荷で行う事が大切です

フロントエンドの技術顧問という事なので、そういった視点で意味のあるテストにするためのチューニングもしています

vue-type-check のテスト範囲を変更して速度を改善する

Carely のフロントエンドは Vue.js の SFC で構成されています

React に対して Vue.js が敬遠される理由の一つにテンプレート構文において、型のチェックが厳密ではないという点があります。 Carely ではその部分の型チェックとして vue-type-check を導入して方のチェックを行っていました

このライブラリは、 language server を経由して依存グラフの型を抽出して SFC の型チェックを行うライブラリなのですが。すべての依存を解析してから実行されるため処理が重く、また、すべての依存グラフが必要なため並列実行もできず、テストのボトルネックになっていました

そもそも、 Carely のフロントエンドではすべてのファイルに対して CI を行っておらず差分となるファイルだけが対象だった事もあり、ファイルを指定した上でそのファイルの依存関係のみを読み込んで型チェックができるバージョンを個別に作成してそちらを利用する事で現実的な時間で型チェックができるようになりました

https://www.npmjs.com/package/@icare-jp/vue-type-check/v/1.1.3

CircleCI で GraphQL のスキーマ生成をチェックする

Carely では実装ファーストでアプリケーションの GraphQL のエンドポイントからスキーマを生成しています。生成したファイルはレポジトリにコミットされているのですが、この更新がされておらず、別の作業ブランチで更新をすると想定外の差分が出る状況が発生していました

これを避けるために CI 上で最新のスキーマになっているかをチェックしたいという要望があったのですが、実際にアプリケーションを起動してそのエンドポイントからスキーマの生成を行っていたため、それを CI 上で実行するコストが大きく実現していませんでした

これを Ruby on Rails の実装からスキーマを生成する rake task を実装して、そこから実行する事で、アプリケーションを起動せずに CI 上でも最新のスキーマファイルであることをチェックできるようになりました

namespace :graphql do
  namespace :schema do
    desc 'generate schema.graphql'
    task dump: :environment do
      dump(NewCarelyChatSchema, "app/frontend/gen/schema.graphql")
    end

    desc 'generate schema.graphql for admin'
    task dump_admin: :environment do
      dump(CarelyAdminSchema, "app/frontend/gen/admin/schema.graphql")
    end
  end
end

def dump(schema, path)
    schema_defn = schema.to_definition
    File.write(Rails.root.join(path), schema_defn)
    puts "Updated #{path}"
end

また、ローカルでのスキーマ生成にかかる時間も大幅に軽減できています

CircleCI で storyshots の失敗時の差分をみられるようにする

フロントエンドの CI で悩みどころになるのは、 Storybook のビジュアルリグレッションテストだと思います。 iCARE ではチェックはしているが運用されていない（エラー状態でもコミットしてしまう）状態が続いていました。

ちゃんと差分をチェックしようという意識向上は必要なのですが、そもそも差分が発生した場合以下のように煩雑な作業が必要となっていました

1. CircleCI でエラーが発生する

2. ローカルで storyshots を実行する

3. 差分を確認する

4. ローカルで storyshots を更新する

これでは差分解消に時間がかかってしまい、とりあえず更新コマンドを叩いて作業をすすめてしまう、、、という気持ちになってしまうことも理解できます

こちらへの対応として、 CircleCI のアーティファクトの設定を使って差分を CI 上で見えるようにしました。これで 2〜3 の手順を CI 上で確認できるようになりました。大幅な工数削減です

- store_artifacts:
          path: app/frontend/__tests__/storybook-image-snapshots/__image_snapshots__/__diff_output__

---

この記事は iCARE の技術顧問がどんな事をやっているか - 2021アドベントカレンダー の6日目の記事です