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
CloudNativePGを布教したい
nnaka2992
0
110
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
sappoRo.R #12 初心者セッション
kosugitti
0
280
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
Rails アプリ地図考 Flush Cut
makicamel
1
130
color-scheme: light dark; を完全に理解する
uhyo
7
490
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
SwiftUI Viewの責務分離
elmetal
PRO
2
270
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
150
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
680
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
It's Worth the Effort
3n
184
28k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Building Adaptive Systems
keathley
40
2.4k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Six Lessons from altMBA
skipperchong
27
3.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The World Runs on Bad Software
bkeepers
PRO
67
11k
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を使おう!