はじめに
この記事では、リモートレポジトリにpushするたびにLintテストを走らせるように設定を紹介します。
- [vueスタイルガイド導入編(vue/recommendの活用)] (https://qiita.com/yfujii1127/items/e80f8a61c4eac7126c13)
- ファイルセーブで自動化編(エディタ自動校正機能)
- コミット度にlintを走らせる編(lint-stagedとhuskey)
- Circle CIでESLint導入編←本記事
PR前のテストの一環で、この設定をしておくことで、共有リポジトリに取り込む前にLintの確認を行うことができます。基本的には前の記事で紹介した、commit度のlint確認で大丈夫なのですが、その設定が各自のローカル環境で整っていない場合などがあり、その対策として最終の防衛線になります。
プロジェクトは前回から引き続き使用したものを使って行きます。gitのリポジトリ設定や操作方法等については、ここでは詳細に話さないのでご了承ください。
こちらは、VSCode、Githubを使って解説していきます。
確認
Circle CIとは
継続的インテグレーション(デリバリー)サービスです。コミットからデプロイまでのパイプラインを作成し、継続的な統合/配信を使用してソフトウェア開発プロセスを自動化できます。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2F08b6bd51-01d6-a31f-d8ef-27a9712d155e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4c2e76c742678d3359837b88a8822feb)
ここでは深掘りしませんので、詳しくは公式サイトやCircleCIで始めるCI/CD導入の基本のキを参照ください。この記事の最後の方にも参考記事を載せました。
設定
Circle CIの設定
では、まずCircle CIの設定から行いましょう。すでにご利用の方はここのステップは飛ばしてもらって構いません。
まずは、Circle CIのトップ画面に行きます。
![circleciのトップ.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2Fb8100142-7647-80ee-8506-46f1668f1248.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e1c8e56db0a8c8e1c1c73a5ffb8d935a)
すでにアカウントをお持ちの方はloginから、まだの人はsign upから入ってください。Githubアカウントで登録できるのでそのままいきましょう。
入れたら、次に左端のメニューからsetting
へ行きます。次に出てくる画面の左側にProjectsがあるので、それを選択して、Circle CIと連携させたいレポジトリを選びます。
![circleciの設定.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2Fd39ab783-1276-593e-c431-0280d91475b2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=74b3a82d738c4073608439d108c613e5)
すると、プロジェクトの概要画面が出てくるので、ここでFollow Project
を押しましょう。
![レポジトリのfollow.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2Fcaffca95-5122-b1fd-90c1-65a48612ab9f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=cb52ea93d1153f93680d9607bb7d7399)
これで、Circle CiとGithubのレポジトリがつながりました。
しかし、もちろんまだ、.circleci/config.yml
の設定をしていないので、buildは成功しません。
![Buildが走っている.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2F750f9529-06ac-9359-d637-70c5979bd211.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=16dc08a95a697977e9008f38991fa931)
![ymlファイル設定前の失敗.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2Fe5979db8-592e-9e2c-e7f6-b2e1e751ccfd.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=32cefd31c284320221b931b1d608e6d1)
.circleci/config.yml
の設定
さて、ここからコードを書いて実装していきます。
まず、ルートディレクトリに.config
フォルダを作ります。
その次に、その中にconfig.yml
ファイルを作ります。
![configyamlファイルの作成.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2F649cedc6-8ee3-b104-6566-3842b60f160e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=50201c678048a4b1683d3eddb748ed0d)
このファイルをCircle CIが読んでくれて、指定した動きをしてくれるようになります。
では、次に中身の記述についてですが、以下を記述してください。
(これは一例であり、他にも方法はいくつもあります)
version: 2.1
executors:
default:
working_directory: ~/repo
docker:
- image: circleci/node
environment:
TZ: Asia/Tokyo
commands:
restore_npm:
steps:
- restore_cache:
name: Restore npm dependencies
key: npm-v1-{{ checksum "package-lock.json" }}
save_npm:
steps:
- save_cache:
name: Cache npm dependencies
key: npm-v1-{{ checksum "package-lock.json" }}
paths:
- ~/repo/node_modules
jobs:
setup:
executor:
name: default
steps:
- checkout
- restore_npm
- run:
name: Install npm dependencies
command: npm ci
- save_npm
lint:
executor:
name: default
steps:
- checkout
- restore_npm
- run:
name: Run lint
command: npm run lint
workflows:
linting:
jobs:
- setup
- lint:
requires:
- setup
ではここで、何を書いたかの説明を行います。
1.executors
実行環境の情報を定義して再利用する機能になります。
executors:
default:
working_directory: ~/repo
docker:
- image: circleci/node
environment:
TZ: Asia/Tokyo
ひとまずここでは、デフォルト設定として、
working_directory
では、下に出てくるstepsを実行する場所を
image
ではnode.jsを、
environment
では、Docker Imageのタイムゾーンをそれぞれ指定しています。
2.commands
ジョブの中で再利用したいものを定義しています。
commands:
restore_npm:
steps:
- restore_cache:
name: Restore npm dependencies
key: npm-v1-{{ checksum "package-lock.json" }}
save_npm:
steps:
- save_cache:
name: Cache npm dependencies
key: npm-v1-{{ checksum "package-lock.json" }}
paths:
- ~/repo/node_modules
ここでは、restore_npm
とsave_npm
を定義しています。
これは何をするステップかというと、キャッシュを利用しています。毎回bundleやnpmをインストールすると時間がかかりますので、こちらを利用することで時間の短縮ができます。
参考:circleciを使って特定のbranchにデプロイ処理をさせる
3.jobs
こちらはステップの集合体です。後々に出てくる、workflows
で指定するコマンドの中身をまとめます。
jobs:
setup:
executor:
name: default
steps:
- checkout
- restore_npm
- run:
name: Install npm dependencies
command: npm ci
- save_npm
lint:
executor:
name: default
steps:
- checkout
- restore_npm
- run:
name: Run lint
command: npm run lint
ここには大きく分けて2つ設定してあります。
-
setup
=> npmパッケージのインストールとキャッシュを行います。 -
lint
=> lintを走らせる際の手順を書いています。
まず、上の方で書いた、executer
を呼び出して、実行環境の指定を行っています。
次にsteps
で、先ほど準備したcommands
を使いながらジョブを走らせます。
それぞれcheckout
が書かれていますが、そこで、最初に設定したpath(ここでいうworking_directory
)にて走る形になっています。
4.workflows
最後に、workflowsに先ほどのjobs
の実行順序を指定していきます。
workflows:
linting:
jobs:
- setup
- lint:
requires:
- setup
ここでは、linting
という名の下、先ほど準備したsetup
とlint
を記述しました。こうして2つが実行される形になります。しかし、lint
にrequires
をつけることで、setup
が成功したら初めてlint
が実行されるようにしています。
全体確認
ちょっと長いですが、こんな感じですね。
![configymlの設定.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2F766ae047-c417-bd8a-5b52-2af2816f33cd.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=76f0b2d815a7e3eb61bd233bf7c944f2)
リモートへ変更をpush
設定は終わりましたので、一度今回の変更をリモートにpushしておきましょう。
すると、Circle CIが動き出して、ビルドが成功していることが確認できます。
![設定後のcircleci確認.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2Fe2dff946-2bf7-a96e-062b-120ef9654e84.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3641932e8f61450fe0714672aa742913)
これで設定が完了していることが確認できました。
検証
では、本当にきちんと動いているのか確認しましょう。
まず、ブランチを切って作業してみます。
ここでは、まだdevelopを切っていないので、developにしておきます。
(ブランチ名は何でもいいです)
![スクリーンショット 2019-03-17 17.55.37.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2F7ac7d00c-a051-4d76-233b-67cc31085a4e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e5cae7a57932c5ed03a173c526300542)
次に、サンプルでコードを書いて、コミットそしてpushしてみます。
![サンプルコードの追記.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2F2bca0fa5-2749-1237-2ff4-644307d04280.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b929bbc4eec2760cbbcf702cc6f8b29e)
![サンプル追記後のコミット名.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2F87f17ea3-ecf8-c8e2-5ef5-7af8f2a362bf.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=94509ef781381f48ecb4612a855f87bc)
![リモートにpush.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2Fb8dd8155-8961-d76a-5093-5c01a96aeeae.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b8b07a3dd956f63ba12f20e55fe97259)
では、リモートに新しいdevelopブランチができたので、そこからmasterブランチにプルリクをしてみます。
![PRの中身.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2F4f6635f2-e2c3-7ac4-9bed-881c0ddfadcb.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2929f5d37ae67f7d6aa9ea1c4dc333d3)
すると、全てのチェックが無事に通っていることが確認できます!もし、lintで引っかかるものがある場合などは、ここが赤くなって失敗しているメッセージが出ますので、その時はDetails
から確認しましょう。
これで、Circle CIのESLint設定は完了です!DONE!!!
最後に
これで、レポジトリにpushするたびにlintが走るようになりました。
チーム開発の場合は、このCircle CIが通らない場合はmerge pull request
を押せないように設定しておいたりもできます。Circle Ciでは、他にも特定のブランチのみにテストを走らせたり、色々これを機に触れてみるのも面白いですね。
もしわからない部分や、そこ間違ってるんじゃない?という指摘あれば嬉しいです!
参考記事
- いまさらだけどCircleCIに入門したので分かりやすくまとめてみた
- Circle CI入門 ver2.0ドキュメント
- CircleCI2入門③ CirlceCI上でLintを実施する
- CircleCI 2.1 の新機能を使って冗長な config.yml をすっきりさせよう!
- Circle CI 2.0の基礎的な設定まとめてみた(GAE/Goのサンプル付き)