Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CircleCI Hands-on for Beginners

CircleCI Hands-on for Beginners

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

wtnabe

May 21, 2016
Tweet

More Decks by wtnabe

Other Decks in Programming

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