CircleCIをGitHubのリポジトリに導入したい😾
前にいた現場で使っていて便利だったので、自分のポートフォリオのリポジトリにも導入したい！
という訳でやってみました。（自動化っていい響き…）
またセットアップするときに忘れていそうだったので備忘録として書いておきます。
実現したいこと
- GitHubのリポジトリにプッシュしたときにSCSSが自動でyarn Lintされる
試したこと
1. CircleCIに登録
まずCircleCIのサイトに訪れてサインアップ。日本語化もされていてありがたいです🙏
しかしダッシュボードの使い方がわからず撃沈。
2. CircleCIのドキュメントを読む
公式ドキュメントを読まないのは本当に自分の悪い癖なので、気を取り直してドキュメントを読みます。
イントロダクションの通りに新しくテスト用のリポジトリを作ってすすめてみます。
【ここでやってしまったミス☟】
-
yamlファイルの拡張子を間違える → ○:*.yml×:*.yaml -
yamlファイルのインデントのミス (FAILEDの理由はほぼこれ)
yamlファイルには気を付けたいです…ともかくテストが通るようになったのでOK！
（数々のBuild Error…悲しみ）
3. ポートフォリオのリポジトリにCircleCIを実装する！
おまちかねの実装タイム！とりあえずリポジトリに.circleci/config.ymlを作成。
中身はイントロダクションページで紹介されている、
「Workspaces 機能を使ってみる」のコードを仮で入れてプッシュ。
（一回.circleci/.config.ymlにしてBuild Errorを食らいましたが）
無事通ったのでyarn lint:SCSSをするように書き換えてみます。
しかし「そもそもどうやってCircleCIにyarnしてもらうん？」レベルだったので
こちらの記事にお世話になりました🙏
→ CircleCI 2.0 で Node.js のテストを試す
version: 2
jobs:
lint_scss:
docker:
- image: node:12.13.0
steps:
- checkout
- restore_cache:
key: projectname-{{ .Branch }}-{{ checksum "yarn.lock" }}
- run:
name: System information
command: |
echo "Node $(node -v)"
echo "Yarn v$(yarn --version)"
- run:
name: Install dependencies
command: yarn
- run:
name: Lint
command: yarn lint:scss
- save_cache:
key: projectname-{{ .Branch }}-{{ checksum "yarn.lock" }}
paths:
- ~/workspace/node_modules
- ~/.cache/yarn/
workflows:
version: 2
lint_scss:
jobs:
- lint_scss
docker imageのnodeのバージョンが参考記事のままだとうまくいかなかったので
12.13.0に変更しています。
このconfig.ymlでプッシュした結果が…
Lintで怒られている…！CircleCIが動いているようです🎉🎉🎉うれしいError！
学んだこと
- CircleCIに関してはイントロダクションページを参考にすることである程度動かせるようになる（あまり怖がらなくて大丈夫）
-
yarn系の指示を出すにはnodeのイメージが必要 -
yamlファイルの書き方に注意（特にインデント）
おまけ
GitHubのリポジトリにPRなど動きがあったらSlackに通知が行くようにしたい！
-
ワークスペースにツールを連携のページに従ってhttps://slack.github.com/にアクセス🤗
-
SlackとGitHubの接続が済んだら、GitHubのPersonal settingsのApplicationsメニューを選んでSlackのConfigureをクリック。
ここでRepository accessなどを設定できます！（uninstallもここから） -
Slackに戻って通知を受け取りたいチャンネルのメッセージに
/github subscribe [ownerの名前]/[repository名]を書き込んで送信 -
繋がりました！通知が来るようになります！