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
900
ビットボード解説
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
SwiftUI Viewの責務分離
elmetal
PRO
0
150
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
ARA Ansible for the teams
kksat
0
150
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
Writing documentation can be fun with plugin system
okuramasafumi
0
120
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
30
11k
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Featured
See All Featured
Designing for Performance
lara
604
68k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
KATA
mclloyd
29
14k
Building an army of robots
kneath
302
45k
BBQ
matthewcrist
86
9.5k
What's in a price? How to price your products and services
michaelherold
244
12k
Writing Fast Ruby
sferik
628
61k
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を使おう!