Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GitHub Actionsで学ぶCI/CD
Search
antenna_three
September 17, 2021
Programming
0
24
GitHub Actionsで学ぶCI/CD
Presentation at UTMC (
http://komaba.utmc.or.jp
).
antenna_three
September 17, 2021
Tweet
Share
More Decks by antenna_three
See All by antenna_three
Djangoで動的サイトを作ろう
antenna_three
0
910
ビットボード解説
antenna_three
1
2.8k
シェーダで学ぶ画像フィルタ
antenna_three
0
2k
レイマーチング入門
antenna_three
0
2k
PythonによるWebスクレイピング入門
antenna_three
0
1.8k
ゲーム制作概論
antenna_three
0
2k
Other Decks in Programming
See All in Programming
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
220
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
React 19アップデートのために必要なこと
uhyo
8
1.4k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.1k
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
8
2.3k
Formの複雑さに立ち向かう
bmthd
1
920
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
270
Open source software: how to live long and go far
gaelvaroquaux
0
660
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
140
Featured
See All Featured
Docker and Python
trallard
44
3.3k
Navigating Team Friction
lara
183
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Designing for humans not robots
tammielis
250
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
How GitHub (no longer) Works
holman
314
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Adopting Sorbet at Scale
ufuk
74
9.2k
What's in a price? How to price your products and services
michaelherold
244
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Transcript
GitHub Actionsで学ぶ CI/CD 2021/09/17 UTMC '16 uc
準備 手元で実行したい人向け やらなくても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] に書き換えておく
基本知識
ビルドとは ソースコードの静的解析、コンパイル、とりまとめを行うこと テストとは プログラムが意図した動作になっているか検証すること デプロイとは ソフトウェアを本番環境に配置して利用可能にすること
CI/CDとは 以下の概念の総称 継続的インテグレーション (Continuous Integration) 継続的デリバリー (Continuous Delivery) 継続的デプロイ (Continuous
Deployment) ビルド、テスト、デプロイなどを自動化してこまめに行うこと
継続的インテグレーションとは コミットごとなどこまめにビルド・テストを行い、統合ブランチにマージすること バグや競合を小さく、発見しやすくし、更新ペースを上げられる 継続的デリバリーとは CIでビルド・テストが通ったコミットを自動的にテスト環境/ステージング環境に置く 本番環境へのデプロイは人間が決定する 継続的デプロイとは CIでビルド・テストが通ったコミットを自動的に本番環境に置く
GitHub Actionsとは GitHubが提供するCI/CDサービス GitHubにあるリポジトリへのpushなどをトリガーにして、ビルド・テスト・デプロイ を自動的に行える
今回使うサンプルプロジェクト Create React Appで作ったReactアプリケーション プッシュごとに自動でビルド・テスト・GitHub Pagesへのデプロイが行われる Reactは今回の本題ではないので最低限の説明にとどめる
JavaScriptとは ブラウザなどで動かせるプログラミング言語 Node.jsとは ブラウザ不要のJavaScript実行環境 npmとは Node.jsで使われるパッケージマネージャ
Reactとは UIを作るためのJavaScriptライブラリ JSXとは Reactでよく使われる、JavaScriptの中でHTMLっぽいものを記述できる言語 そのままではブラウザで動かないので、普通のJavaScriptに変換する必要がある function HelloWorldButton() { return (
<button onClick={() => {alert("Hello world!")}}> Click me </button> ) }
Create React Appとは ReactでSPAを作るためのライブラリ導入や設定をまとめてやってくれるツール ビルドにwebpackとBabel, テストにJestとReact Testing Library, などなど
GitHub Pagesとは GitHubが提供する静的ウェブサイトホスティングサービス
プロジェクト構成 utmc-github-actions ├ .github/workflows --> GitHub Actionsの設定 ├ public └
src ├ App.js ----------> メインのコンポーネント └ App.test.js -----> Appコンポーネントのテスト
YAMLとは 人間が読み書きしやすいデータ形式 GitHub Actionsの設定ファイルの記述にも使われる List - Foo - Bar -
Baz Dict key1: value1 key2: value2
トリガーの設定 on でトリガーとなるイベントを設定する 下の設定では main ブランチに push またはプルリクエストがあったときに実行される on: push:
branches: [ main ] pull_requests: branches: [ main ]
ジョブの設定 トリガーに対して実行される操作をジョブと呼ぶ runs-on で実行環境を指定する 実行環境はLinux, Windows, macOSから選べる steps で実行内容を記述する jobs:
hoge: runs-on: ubuntu-latest steps: ...
ステップの記述 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'
ビルド、テスト、デプロイ 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
Pushしてみる 自動的にビルド・テスト・デプロイが行われる
テストを失敗させてみる App.js の"Learn React"を適当な文に書き換える App.test.js で App コンポーネントの中に "Learn React"という要素があるかテストし
ているのでテストが失敗し、デプロイは行われない
その他 マケプレを探せば大体のニーズは対応している Unityのビルド・テストも可能 悪用 リポジトリに対するイベント以外にも手動実行、定期実行、Webhookに対応している うまく使えばサーバーレスコンピューティングをMicrosoftの財布で無料で行える 仮想通貨マイニングや過剰な負荷はGitHubに怒られるのでやめよう
まとめ CI/CDはビルド・テスト・デプロイなどの作業を自動化してこまめに行うこと GitHub Actionsを使うとCI/CDが簡単に実現できる GitHub Actionsを使おう!