読者です 読者をやめる 読者になる 読者になる

amakanでyarnを使うようにした

amakanをUnicornからPumaに移行した - ✘╹◡╹✘ に引き続き、小さい改善を加えた。


変更の概要

https://amakan.net/ への今後の変更に備えて、テストやデプロイに掛かる時間を短くする恩恵が良いだろうと思い、node_modulesの管理に使うツールとしてyarnを使うことにした。結果的に、テスト用ビルドの所要時間が130秒から70秒に、デプロイ用ビルドの所要時間が300秒から200秒になった。

CircleCIの設定変更

継続的なテストとデプロイ作業の実行のために、amakanではCircle CIを利用している。Circle CIを使っている理由は、仕事でも使っている上にPrivateでも無料だから。

yarnを利用するためにCircle CIに追加する必要があった設定は、以下の通り。

  • 指定したバージョンのyarnが入っていない場合はインストールする
  • グローバルにインストールしたyarn自体をCircle CIにキャッシュしてもらう
  • yarnがキャッシュに使うディレクトリをCircle CIにキャッシュしてもらう
  • テストの実行前に依存パッケージをインストールする

結果的にcircle.ymlはこういうコードに。

machine:
  environment:
    YARN_VERSION: 0.18.0
  node:
    version: 6.9.1
  post:
    - if [[ $(yarn --version 2>/dev/null) != "${YARN_VERSION}" ]]; then curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version $YARN_VERSION; fi
dependencies:
  cache_directories:
    - "~/.cache/yarn"
    - /home/ubuntu/nvm/versions/node/v6.9.1/bin
    - /home/ubuntu/nvm/versions/node/v6.9.1/lib/node_modules
  override:
    - bundle install --jobs 4 --path vendor/bundle
    - yarn install --prefer-offline
deployment:
  production:
    branch: production
    commands:
      - bundle exec cap production deploy
test:
  override:
    - yarn run test

必要なときだけyarnをインストールする、という設定に少し手こずった。

デプロイスクリプトの設定変更

amakanではデプロイにCapistranoを利用している。SassやBabelを利用してWebブラウザ用のコードを実装している都合から、デプロイ時にWebpackなどを使ってCSSJavaScriptのファイルを生成してあげる必要があり、これは現状、デプロイ時に対象のサーバ内で実行しているので、結果としてデプロイ対象のサーバにもnode_modulesが入っている必要がある。つまり、デプロイ時に yarn install を実行してもらう必要がある。

このために https://github.com/j-arnaiz/capistrano-yarn を使った。これは元々 capistrano-npm を利用していたので、ほとんどそのGemを入れ替えるだけで済んだ。amakanで手を加えたところとして、:app:resque の2種類のデプロイ対象のサーバがあるので、node_modulesが必要な :app でだけ yarn install を実行するようにしたこと。それから、高速化のために --prefer-offline のオプションを追加した。

# config/deploy.rb
set :yarn_flags, "--prefer-offline --production"
set :yarn_roles, :app

yarnに移行した感想

設定を調べるのは面倒だったが、依存解決部分がとても速くなったので良かった。--prefer-offline を付けると特に。Chrome拡張やNode.js用のライブラリなどの管理では既にYarnを利用してはいたものの、Railsアプリで利用するようにしたのは初めてだったので、Capistrano周りの事情も考慮しながら設定する方法を勉強できたのも良かった。

本筋とは逸れるけど、yarnを見直したついでにwebpackやpackage.jsonの設定、本番環境で利用するNode.jsのバージョンなども整理した。変更のついでに触れた箇所を綺麗にしておくというのも大事だし、そういうことが起きるように能動的に小さい変更を発生させるようにしておくというのも、精神的な部分での飽きを防ぐという意味も含めて、小さなアプリケーションの改善のエコシステムとして効果的かもしれない。