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
800
ビットボード解説
antenna_three
1
2.7k
シェーダで学ぶ画像フィルタ
antenna_three
0
2k
レイマーチング入門
antenna_three
0
1.9k
PythonによるWebスクレイピング入門
antenna_three
0
1.8k
ゲーム制作概論
antenna_three
0
2k
Other Decks in Programming
See All in Programming
役立つログに取り組もう
irof
26
8.7k
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
Server Driven Compose With Firebase
skydoves
0
400
qmuntal/stateless のススメ
sgash708
0
120
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
550
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.1k
Synchronizationを支える技術
s_shimotori
1
150
Piniaの現状と今後
waka292
5
1.5k
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.5k
僕がつくった48個のWebサービス達
yusukebe
18
17k
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Faster Mobile Websites
deanohume
304
30k
Bash Introduction
62gerente
608
210k
Agile that works and the tools we love
rasmusluckow
327
21k
Navigating Team Friction
lara
183
14k
Automating Front-end Workflow
addyosmani
1365
200k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
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を使おう!