Slide 1

Slide 1 text

GitHub Actionsで学ぶ CI/CD 2021/09/17 UTMC '16 uc

Slide 2

Slide 2 text

準備 手元で実行したい人向け やらなくてもOK GitHubにリポジトリを作り、 git clone https://github.com/antenna-three/utmc-github-actions.git git remote rm origin git remote add origin https://github.com/[your-account-name]/[your-repository-name].git もしくはforkしてからcloneでもOK package.json の homepage を https://[your-account-name].github.io/[your- repository-name] に書き換えておく

Slide 3

Slide 3 text

基本知識

Slide 4

Slide 4 text

ビルドとは ソースコードの静的解析、コンパイル、とりまとめを行うこと テストとは プログラムが意図した動作になっているか検証すること デプロイとは ソフトウェアを本番環境に配置して利用可能にすること

Slide 5

Slide 5 text

CI/CDとは 以下の概念の総称 継続的インテグレーション (Continuous Integration) 継続的デリバリー (Continuous Delivery) 継続的デプロイ (Continuous Deployment) ビルド、テスト、デプロイなどを自動化してこまめに行うこと

Slide 6

Slide 6 text

継続的インテグレーションとは コミットごとなどこまめにビルド・テストを行い、統合ブランチにマージすること バグや競合を小さく、発見しやすくし、更新ペースを上げられる 継続的デリバリーとは CIでビルド・テストが通ったコミットを自動的にテスト環境/ステージング環境に置く 本番環境へのデプロイは人間が決定する 継続的デプロイとは CIでビルド・テストが通ったコミットを自動的に本番環境に置く

Slide 7

Slide 7 text

GitHub Actionsとは GitHubが提供するCI/CDサービス GitHubにあるリポジトリへのpushなどをトリガーにして、ビルド・テスト・デプロイ を自動的に行える

Slide 8

Slide 8 text

今回使うサンプルプロジェクト Create React Appで作ったReactアプリケーション プッシュごとに自動でビルド・テスト・GitHub Pagesへのデプロイが行われる Reactは今回の本題ではないので最低限の説明にとどめる

Slide 9

Slide 9 text

JavaScriptとは ブラウザなどで動かせるプログラミング言語 Node.jsとは ブラウザ不要のJavaScript実行環境 npmとは Node.jsで使われるパッケージマネージャ

Slide 10

Slide 10 text

Reactとは UIを作るためのJavaScriptライブラリ JSXとは Reactでよく使われる、JavaScriptの中でHTMLっぽいものを記述できる言語 そのままではブラウザで動かないので、普通のJavaScriptに変換する必要がある function HelloWorldButton() { return ( {alert("Hello world!")}}> Click me ) }

Slide 11

Slide 11 text

Create React Appとは ReactでSPAを作るためのライブラリ導入や設定をまとめてやってくれるツール ビルドにwebpackとBabel, テストにJestとReact Testing Library, などなど

Slide 12

Slide 12 text

GitHub Pagesとは GitHubが提供する静的ウェブサイトホスティングサービス

Slide 13

Slide 13 text

プロジェクト構成 utmc-github-actions ├ .github/workflows --> GitHub Actionsの設定 ├ public └ src ├ App.js ----------> メインのコンポーネント └ App.test.js -----> Appコンポーネントのテスト

Slide 14

Slide 14 text

YAMLとは 人間が読み書きしやすいデータ形式 GitHub Actionsの設定ファイルの記述にも使われる List - Foo - Bar - Baz Dict key1: value1 key2: value2

Slide 15

Slide 15 text

トリガーの設定 on でトリガーとなるイベントを設定する 下の設定では main ブランチに push またはプルリクエストがあったときに実行される on: push: branches: [ main ] pull_requests: branches: [ main ]

Slide 16

Slide 16 text

ジョブの設定 トリガーに対して実行される操作をジョブと呼ぶ runs-on で実行環境を指定する 実行環境はLinux, Windows, macOSから選べる steps で実行内容を記述する jobs: hoge: runs-on: ubuntu-latest steps: ...

Slide 17

Slide 17 text

ステップの記述 uses で他のアクションを呼び出すか run でコマンドを呼び出す たいていの操作にはすでにアクションがある steps: - name: Get repository data uses: actions/checkout@v2 - name: Use Node.js 14.x uses: actions/setup-node@v1 with: node-version: '14.x'

Slide 18

Slide 18 text

ビルド、テスト、デプロイ steps: - name: Build run: npm run build - name: Test run: npm test - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./build

Slide 19

Slide 19 text

Pushしてみる 自動的にビルド・テスト・デプロイが行われる

Slide 20

Slide 20 text

テストを失敗させてみる App.js の"Learn React"を適当な文に書き換える App.test.js で App コンポーネントの中に "Learn React"という要素があるかテストし ているのでテストが失敗し、デプロイは行われない

Slide 21

Slide 21 text

その他 マケプレを探せば大体のニーズは対応している Unityのビルド・テストも可能 悪用 リポジトリに対するイベント以外にも手動実行、定期実行、Webhookに対応している うまく使えばサーバーレスコンピューティングをMicrosoftの財布で無料で行える 仮想通貨マイニングや過剰な負荷はGitHubに怒られるのでやめよう

Slide 22

Slide 22 text

まとめ CI/CDはビルド・テスト・デプロイなどの作業を自動化してこまめに行うこと GitHub Actionsを使うとCI/CDが簡単に実現できる GitHub Actionsを使おう!