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
36
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
1.1k
ビットボード解説
antenna_three
1
3.1k
シェーダで学ぶ画像フィルタ
antenna_three
0
2k
レイマーチング入門
antenna_three
0
2.1k
PythonによるWebスクレイピング入門
antenna_three
0
1.8k
ゲーム制作概論
antenna_three
0
2k
Other Decks in Programming
See All in Programming
Le côté obscur des IA génératives
pascallemerrer
0
140
CSC305 Lecture 06
javiergs
PRO
0
210
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
280
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.2k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
210
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
390
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
Swift Concurrency - 状態監視の罠
objectiveaudio
2
510
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1.2k
CSC509 Lecture 03
javiergs
PRO
0
330
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
8
1.6k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Balancing Empowerment & Direction
lara
4
680
Code Reviewing Like a Champion
maltzj
525
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Facilitating Awesome Meetings
lara
56
6.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
A better future with KSS
kneath
239
18k
KATA
mclloyd
32
15k
It's Worth the Effort
3n
187
28k
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を使おう!