Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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を使おう!