remember-circleci-for-me

インフラ勉強会登壇資料
https://wp.infra-workshop.tech/event/midnight-circleci/

スライド内のリンク集
https://speakerdeck.com/nagashimaw/what-is-tanoshi-works
https://portal.engineers-lt.info/
https://engineers.connpass.com/
https://circleci.jp/
https://github.com/nagashima-w/test-project/blob/master/.circleci/config.yml

Transcript

1. 深夜のCI/CD ~CircleCI編~ 2019/03/29 /インフラ勉強会 @nagashi_ma_w
2. はじめに
3. はじめに - これは知見がある人がCircleCIを紹介するスライドではありません - そういうの期待してる人がいたら、申し訳ないですが役に立たないと思います - 発表者が振り返りのために作成した資料になります - マサカリは歓迎します - スライドの内容と関係なかったり、回答がわからない質問は回答しません
4. 自己紹介
5. 自己紹介 ながしー（Twitter：nagashi_ma_w） - SaaSベンダーでインフラエンジニアをします - 4月から - 今日まで有給消化期間中でした - サークルでPodcastを配信したり開発したりしている - たのしいWorksで検索してね - リンクからPodcastの紹介スライドに飛べます
6. 自己紹介 ながしー（Twitter：nagashi_ma_w） - エンジニアの登壇を応援する会 運営 - 「すべてのエンジニアに成長と幸福をもたらす」がビジョン - ポータルサイトとかConnpassとか見てみてください - 3度のメシよりボードゲームが好き（今日一番大事なところ）
7. CircleCIってなんだっけ
8. CircleCIってなんだっけ
9. CircleCIってなんだっけ - 雑に言うとCI/CDのSaaSです （誰かいい感じの説明はよ） - 余計な手作業せずに、開発者はコード書くのに集中しようねってヤツ - GitHub or BitbucketへのPushを検知して動いてくれます - というか、それらのアカウントがないと Sign Upできないです - 日本語の公式ページ：https://circleci.jp/ - ビルドやテスト、デプロイを自動化して通知もしてくれます - 便利！
10. CircleCIってなんだっけ 自分の場合は、こんな使い方をしています - コードを書いたらGitHubにPush → 自分でやるのはここだけ！ - Pushされたことを検知して CircleCIがnpm testとnpm buildを実行 - buildが通ったらFirebaseにデプロイ - jobの実行結果をSlackに通知 - これらの処理はコンテナが動いてて、1コンテナだけなら無料で使えます - ※例外アリ
11. CircleCIってなんだっけ - リポジトリのルートに.circleci/config.yml を置いて、 そこにCircleCIでやってほしいことを書きます - こんな感じです↓ - https://github.com/nagashima-w/test-project/blob/master/.circleci/config.yml - ※このリポジトリで使ってる CircleCIはSlack連携してないです - たのしいWorksの開発ではSlackに通知するようにしてます - 次のページからconfig.ymlをおさらいしていきます
12. おれのconfig.yml
13. おれのconfig.yml 6行目
14. おれのconfig.yml 6行目 - 使用するCircleCIのバージョンを指定しています - このconfigだと2.0です - 最新は2.1で、1系のバージョンはもう使えないので注意！ - 最近(2019/03)に使えなくなりました - ググるときは惑わされないようにしましょう - そのうち2.1に書き換えるつもりです (書き換えるとは言ってない)
15. おれのconfig.yml 7行目～16行目
16. おれのconfig.yml 7行目～16行目 - 1つ目のジョブで使うDocker Imageの情報です - CircleCIのnode.js 10.15を指定しています - Working Directoryとして ~/【リポジトリのルート】を指定しています
17. おれのconfig.yml 7行目～16行目 - Working Directoryの部分は過去に自分がハマったポイントです - 「どこのディレクトリで実行されているのか？」 - 「カレントディレクトリの中どうなってる？」 - ls -la とかを挟みながら確認しつつ対処しました
18. おれのconfig.yml 18行目～36行目
19. おれのconfig.yml 18行目～36行目
20. おれのconfig.yml 18行目～36行目 - 過去のジョブの依存関係のキャッシュを呼び出しています - あんまり気にしてないですけど、使いまわせる部分を使いまわして jobの完了までの時間を短縮する意図があるんだと思います - 途中の20行目〜29行目はコメントにあるようにデバッグの残骸たちです
21. おれのconfig.yml 38行目～53行目
22. おれのconfig.yml 38行目～53行目
23. おれのconfig.yml 38行目～53行目 - 見ればわかると思いますが、やってることは以下の通りです - npm install - 依存関係とかをキャッシュに保存 - npm test - npm run build - 7〜16行目で指定したコンテナの内部で上記の処理を実行しています
24. おれのconfig.yml 54行目～57行目
25. おれのconfig.yml 54行目～57行目 - 後続のjob記述したパスの中身を引き継いでいます - コメントの通り、コンテナ内部の./distを引き継ぐために指定しています
26. おれのconfig.yml 59行目～62行目
27. おれのconfig.yml 59行目～62行目 - 2つ目のjobの書き始めです - この部分で1つ目のjobと同じく Docker ImageとWorking Directoryを指定しています
28. おれのconfig.yml 63行目～72行目
29. おれのconfig.yml 63行目～72行目
30. おれのconfig.yml 63行目～72行目
31. おれのconfig.yml 63行目～72行目 - ここでやってることは以下の通り - 先ほど引き継ぐと記述した distをWorking Directoryにattach - Firebaseにデプロイするので、必要なツールをインストール - Firebaseへのデプロイ
32. おれのconfig.yml 見てわかると思いますが........ - 以下の環境変数を使用しています - $Firebase_Project - $FIREBASE_DEPLOY_TOKEN - コンソールから定義できるので、こういう情報は環境変数を使いましょう - こんなのべた書きすると危険が危ないのでやらないようにしましょう
33. おれのconfig.yml 74行目～
34. おれのconfig.yml 74行目～
35. おれのconfig.yml 74行目～ - ここではjobの依存関係の設定やブランチの指定をしています - 見てわかると思いますが、以下のような設定をしています - deploy-job(2つ目のjob)はbuildが正常終了しないと実行しない - マスターブランチにPushされたときのみCircleCIのワークフローが実行される
36. いかがでしたか？
37. いかがでしたか？ CircleCI、いかがでしたか？ - yamlで書かれてるので可読性高いし、 基本的に無料で使えます - 先ほどは触れませんでしたが、 OS Xのコンテナは1つだろうと有料です - つまりiOSアプリのCI/CDに使う場合は有料ということです - 興味を持ってもらえたら、やってよかったなって思います - うまく動いたときのやったった感がすごいので手作業から解放されよう！
38. ありがとうございました