発表スライド

CI/CDのすすめ from Futa HIRAKOBA

www.slideshare.net

アジェンダ

エンジニアは楽をしたい生物
Chrome拡張はリリースがだるい！
CI/CDとは？
CI/CDを実践したChrome拡張リリース
まとめ

以前、インターン先のLT会で発表した物と同じ内容です。

LT*1での発表で、発表5分質疑応答3分くらいだったと思うのですが、普通に発表に7分くらいかかりました。

解説

スライドの解説をしていきます。

エンジニアは楽をしたい生物

僕が思うに、ソフトウェアエンジニアは楽をしたい生き物です。

人間がしなくてもいいような作業は機械に任せて、コーディングだけしたい人が多いのではないでしょうか？

サービスは一般に以下のようなサイクルでリリースされます。*2

正直、手動だと、テストを走らせるのもデプロイをするのもめんどくさいです。

というわけで、めんどくさいことは自動化して、楽をしましょう！

Chrome拡張はリリースがだるい！

自動化するのに良い例がありました。Chrome 拡張機能です。

Chrome 拡張機能リリースまでの道のりは、普通、以下のようになっております。

正直、めちゃめちゃめんどいです！

今回はこの作業を自動化して、楽をします。

CI/CDとは？

ここで、タイトルにもあるCI/CDを簡単に説明します。

厳密ではないCI/CDの説明

CI (Continuous Integration) - リポジトリを更新するたびにテストを行うこと
CD (Continuous Delivery) - リリースブランチ*3を更新するたびにデプロイを行うこと

厳密に言うと多分もっと違う意味だと思います。詳しくはこういう記事をご覧ください。

CI/CDを導入することで、人は、コーディングのみやっていれば良くなります。

CI/CDを行うためのWebサービスとしては、CircleCIやTravisCI、最近だとGitHub Actionsがあります*4。

CI/CDを実践したChrome拡張リリース

CI/CDを導入すると、Chrome 拡張機能のリリースを以下のように自動化できます。

自動化できた処理

テスト*5
バージョン書き換え
圧縮
アップロード
公開設定

CI/CDを使うことで、これだけのめんどくさい処理を自動化することができます！

コーディングに集中できてハッピーですね*6。

設定ファイル

上の画像のようにするには、CI/CDサービス向けの設定をする必要があります。ほとんどの場合、コードベースで設定することができます。

例えばCircleCIの場合、以下のようなymlを書くことで、自動で行う処理を設定できます。

▶ config.yml（ここを押すと展開）

version: 2.1
executors:
  default:
    working_directory: ~/workspace
    docker:
      - image: node:8.15.1
jobs:
  build:
    executor: default
    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: Build
          command: yarn build
      - save_cache:
          key: projectname-{{ .Branch }}-{{ checksum "yarn.lock" }}
          paths:
            - ~/workspace/node_modules
            - ~/.cache/yarn/
      - persist_to_workspace:
          root: .
          paths:
            - .
  test:
    executor: default
    steps:
      - attach_workspace:
          at: .
      - run:
          name: Test
          command: yarn test:withCoverage
      - run:
          name: Post Coveralls
          command: yarn test:coveralls
  deploy:
    executor: default
    steps:
      - attach_workspace:
          at: .
      - run:
          name: Set Version
          command: yarn upload:version
      - run:
          name: Install zip
          command: apt-get update -y && apt-get install -y zip
      - run:
          name: Pack ZIP
          command: yarn upload:pack
      - run:
          name: Upload & Publish
          command: yarn upload


workflows:
  build_and_test:
    jobs:
      - build
      - test:
          requires:
            - build
  publish:
    jobs:
      - build:
          filters:
            tags:
              only: /^v.*/
            branches:
              ignore: /.*/
      - test:
          requires:
            - build
          filters:
            tags:
              only: /^v.*/
            branches:
              ignore: /.*/
      - deploy:
          requires:
            - test
          filters:
            tags:
              only: /^v.*/
            branches:
              ignore: /.*/