CircleCI Hands-on for Beginners

GitHubのサンプルリポジトリをCircleCIのプロジェクトとして追加し、Buildを動かしてみるまで。Kanazawa.rb meetup #45

Transcript

1. CircleCI 101
   @wtnabe
   Kanazawa.rb meetup #45
   2016-05-21 (Sat) at DMM.com Labo Kanazawa Minami-chou
   

   View Slide

2. お品書き
   今⽇のゴール
   CircleCI紹介
   やってみた
   今後の課題
   

   View Slide

3. 今⽇のゴール
   

   View Slide

4. 1. GitHubのサンプルrepoをfork
   2. CircleCIと紐付け
   3. GitHubのコードを変更してbuild結果を確認
   

   View Slide

5. CircleCI紹介
   

   View Slide

6. https://circleci.com/ 2016-04-30 現在
   2011年誕⽣
   今のところGitHubのみ対応
   Linux x 1 parallelなら無料
   private reposも無料で対応
   2つめから $50 / para
   

   View Slide

7. プロジェクトのアクセス権限はすべてリ
   ポジトリと紐づいているので管理が楽
   

   View Slide

8. やってみた
   

   View Slide

9. 1. GitHubのrepoをfork
   2. GitHubアカウントでCircleCIにLog In
   3. GitHub reposをADD PROJECTS
   4. コードを変えて結果を⾒る
   

   View Slide

10. サンプルrepo
    https://github.com/wtnabe/todomvc-
    vanillajs
    

    View Slide

11. CircleCI
    https://circleci.com/
    

    View Slide

12. Sign Up or Sign In
    CircleCIアカウントを持って
    いない場合は右のフローに従
    ってSign Up
    持ってる場合はLog In With
    GitHub
    

    View Slide

13. View Slide

14. もうBuildが⾛ります
    そういう設定がrepoの中にあるから
    

    View Slide

15. コードを変更してみよう
    

    View Slide

16. 今回のBuildの秘密
    

    View Slide

17. package.jsonがあった場合
    Node.jsプロジェクトと判断
    とりあえずnpm testを実⾏する
    他の⾔語でも似たような感じ
    

    View Slide

18. ちなみに
    GitHub API経由でsshのread onlyなdeploy
    keyがrepoにセットされています
    

    View Slide

19. 今後の課題
    今⽇やらなかったこと
    

    View Slide

20. 1. Buildを実⾏する準備ができる
    circle.yml, Env Vars, SSH Key, etc.
    2. 適切な通知設定
    3. テストコードを書けるようになる
    4. Deploy
    

    View Slide

21. まとめ
    

    View Slide

22. GitHubを使っているならCircleCIで簡単
    にCIを始められる
    CIは静的解析だけでも便利
    Webフロントエンドでも便利
    

    View Slide

23. 楽してうっかりをなくそう
    

    View Slide

24. Enjoy !
    

    View Slide