GitHub Actions Hands on Tech Play 女子部

お集まりいただきありがとうございます！ 短い時間ではありますが、一緒に楽しみながら GitHub Actions に入門していきましょう〜！

ざっくりスケジュール 10:00 - 10:15 オープニング(イマココ) 自己紹介タイムを含みます！ 10:15 - 10:30 座学 10:30 - 11:00 Hands on part1 11:00 - 11:05 休憩 11:05 - 11:55 Hands on prat2 11:55 - 12:00 クロージング

さっそくですが自己紹介タイムです！ 今日は参加してくださっている皆様全員に一人一言ずつ自己紹介していただきたいです。ビデオ ONにできる方はお願いします。（できる方だけで大丈夫です） 話すこと ● 名前(呼んで欲しい名前) ● 普段どんなことをしているのか ● 今回申し込んだきっかけとか理由とか

zoomの使い方 ● 私から説明するときは画面共有をしながら進めていきます ● Hands on 中のビデオ、音声のON/OFFはご自由にどうぞ ● こちらから問いかけをすることや進捗を確認することがありますが、その際は音声、またはリ アクションをお願いします

Hands on の進め方 3部構成です 1. 座学 (10分程度) 2. Hands on part1 (30分程度) ○ 私の実演とハンズオンを交互に進めていきます 3. Hands on part2 (50分程度) ○ パート1でやったこと&資料を参考にしながら各個人でもくもく進めていきます ○ わからない場合など、もちろん質問 OKです！ ○ もくもく進めるのもあり！わからないことを質問するのもあり！な時間です

今日目指すこと GitHub Actions でUnitテストを実行してみるところまでやってみる！

座学パート

Agenda ● CI/CD とは ● GitHub Actions の基本

CI/CD とは ● CI ○ Continuous Integration (継続的インテグレーション) ■ コードに変更があるたびに自動でテストを実行すること ● CD ○ Continuous Delivery (継続的デリバリ) ■ コードを常にリリース可能な状態にしておく ○ Continuous Deployment ( 継続的デプロイ) ■ 常に自動でデプロイする

CI/CD で自動化できること ● ビルド ● テスト ● デプロイ ● その他 ○ 使用しているライブラリのアップデート ○ 静的解析チェック

CI/CD による自動化から得られるメリット CI/CDによる自動化によって得られるメリットを紹介します ● ヒューマンエラーを防ぐ ○ 自動的に実行されるため、テストやチェックし忘れを防げます ○ 毎回同じ手順で実行されるため、人によって実行の仕方が違う、手順を飛ばしてしまう、 というミスを防ぐことができます ● 積極的にリリースできる ○ リリース時の工数が減るため、積極的なリリースにつながります ○ 万が一バグがあったとしてもすぐにロールバックすることもできます

CI/CD ツール・サービス CI/CDを行うためのツールやサービスは様々です。 ● GitHub Actions ● CircleCI ● Jenkins ● AWS CodeBuild / AWS CodeDeploy / AWS CodePipeline

GitHub Actions の基本 GitHubのイベントをトリガーとして実行されるワークフローを定義できます。 ● pushされたらテストを実行する ● プルリクエストが作られたら〇〇する ● △△ブランチにpushされたらビルドしてデプロイする publicリポジトリであれば無制限で無料、 privateリポジトリも無料枠があります https://github.co.jp/features/actions

ワークフローの実体はymlファイル CI/CDを行いたいリポジトリに .github/workflows ディレクトリを作成し、その配下に yml ファイル を作成します

Hands on パート1

Agenda ● ①初めての GitHub Actions ● ②actionを使ってみよう

①初めての GitHub Actions ゴール: ワークフローを定義して echo コマンドで文字列を出力する ★ 自分で .github/workflows ディレクトリを準備してymlファイルを作って、ということもできます が、今日は github.com 上でワークフローを作ってみます ★ 「echo コマンドで文字列を出力する」というシンプルなワークフローを作ってみましょう

初めての GitHub Actions 1) cloneしたリポジトリをgithub.com上で開きます 2) Actionsタブをクリックし、「set up a workflow yourself」というリンクをクリックします

初めての GitHub Actions 3) 一度このままcommitします。右上の Start commit ボタンからコミットします。コミットが完了 すると自動的に Code タブに戻ります。

初めての GitHub Actions 4) Actions タブを開き直すと、今作ったワークフローが実行されています 5) echo コマンド部分を自由に書き換えて実行してみましょう

example.yml 詳しくはこちら name: CI # このワークフローの名前 on: # このワークフローをキックするイベント push: # push された時 branches: [ main ] # main ブランチ jobs: # 1つのワークフローは 1つ以上のjobからなる build: # このジョブのID runs-on: ubuntu-latest # “build”ジョブを実行するマシンの種類 steps: # 1つのジョブにはstepsと呼ばれる一連のタスクがある - name: Run a one-line script # 1つのstepは - によって区切られる run: echo Hello, world! # 使用されているマシンの OSのシェルを使用してコマンドラインプログラムを実行する

ワークフローを図解するとこんなイメージ workflow(yml) trigger: push job OS(runs-on): ubuntu steps checkout echo job OS(runs-on): windows steps echo checkout echo echo

②actionを使ってみよう ゴール: checkout アクションを使ってみよう ★ actionとは ○ GitHub Actions 内のライブラリのようなもの ○ https://github.com/marketplace?type=actions ○ 実はすでに先ほど作成したワークフローで checkout actionを使っています

actionを使ってみよう checkout actionの動きを確認しましょう。checkout action実行ステップの前後にlsコマンドを実行 するステップを差し込みます。 jobs: build: runs-on: ubuntu-latest steps: - name: before run checkout #追加 run: ls -a - uses: actions/checkout@v2 - name: after run checkout #追加 run: ls -a

CIの基本 ● CIで実現したいことはローカル環境でも実現できていることが前提になります ● ローカル環境での手順をどうやって CIで実行させるのかが鍵になります

Hands on パート2

Agenda ● ③Unitテストの実行 ● ④スケジュール実行をしてみよう ● ⑤Unitテストが失敗したときに通知をしてみよう

③Unitテストの実行 ゴール: Unitテストを実行してみよう ★ アプリのUnitテストを GitHub Actions で実行してみましょう ★ 今のmain.ymlに付け足していきます

ヒント main.ymlを修正する前に、ローカルでUnitテストを実行する手順を復習します 0. PCにnode.js環境構築 & ローカルにリポジトリを clone 1. npm install 2. npm test この手順を GitHub Actions で実現します。今の main.yml では、0番目の手順まで実現できてい ます。 残り2つの手順をそれぞれステップで実現します。

④スケジュール実行をしてみよう ゴール: 指定した時間に実行されるワークフローを作ってみましょう ★ 今までは push されたときに実行されるワークフローを作っていました ★ 指定した時間に実行されるワークフローを作ってみましょう ○ ワークフローは新しく作っても、今まで使っていたものに修正を入れても OKです ○ 定期実行にすると永遠に実行され続けるのであとで消しておきましょう

ヒント ● 今までは push イベントを使っていましたが、 schedule イベントを使います ● 以下のリンクを参考にしてみてください ○ https://docs.github.com/ja/free-pro-team@latest/actions/reference/workflow-s yntax-for-github-actions#onschedule ○ https://docs.github.com/ja/free-pro-team@latest/actions/reference/events-that- trigger-workflows#schedule

⑤Unitテストが失敗したときに通知をしてみよう ゴール: ワークフローが失敗したときにだけ実行されるステップを作ってみましょう ★ Unitテストが失敗したときに通知をしてみましょう ★ 本当はSlack通知などを行いたいところですが、 Slackへの連携作業に時間がかかりそうなの で、今日は実際の通知は行いません ★ Unitテストが失敗したときにだけ実行されるステップを作ってみましょう

ヒント ● まずはUnitテストを失敗させましょう ○ 実は今のアプリにはおかしいところがあります。そして Unitテストも間違っています。Unit テストを修正してみてください(コードも間違っているのでテストは失敗するはずです )。 ○ テストは、 リポジトリの__tests__/service/rule-test.js です ● ステップの中で if 条件文を使うことができます ● 以下のリンクを参考にしてみてください ○ https://docs.github.com/ja/free-pro-team@latest/actions/reference/context-and -expression-syntax-for-github-actions#failure ○

いかがでしたでしょうか？ アンケート実施予定です。ぜひご意見お待ちしております。