概要

• GitHub Actions で，このブログを CI/CD した。
• 具体的には，git push すると以下のワークフローが自動で動くようになりました。
  • 超簡単なブログの疎通テスト
  • GitHub Pages へのブログのデプロイ

経緯

• 🚀 GitHub Actions が実質無料ということを知る
• 🤔 このブログ，git push したら勝手にデプロイされてほしい気持ちがあった
• ⛏ Cypress.io という GUI テストツールを使ってみたい

やったこと

GitHub Actions を有効にする

GitHub のリポジトリのページにいくと，GitHub Actions というタブがあります。 ここから GUI でぽちぽちやると，リポジトリに .github/workflow/*.yml というワークフロー を定義するファイルが生成されます。ここに自動化したいワークフローを書いていきます。

GUI で記述して，作成後すぐに commit & run できます。

こんな感じ

それでは，具体的にこのファイルに書いていく処理であるところの「テスト」と「デプロイ」について，以下で簡単に説明します。

Cypress.io でテストを書く

フロントエンドの GUI テストツールで覇権と言われている（勝手にそう思っている）Cypress.io でテストコードを書きます。

「ブログのトップにあるアイコンをクリックすると，ホーム '/' に遷移する」というテストは以下のようになります：

Copy 
1/// <reference types="cypress" />
2
3context('Smoke Test', () => {
4  // テストケース毎に行う処理
5  beforeEach(() => {
6    cy.visit('/')
7  })
8  // トップのアイコンをクリックすると，トップページにいく。
9  it('click header icon to visit toppage', () => {
10    // id でアイコン画像を指定して，クリックする
11    cy.get('#blog-logo').click()
12    // slug が '/' であることを確認する e.g. localhost:8000/
13    cy.url().should('match', /\/$/)
14  })
15})

さて，Cypress.io のいいところとして次のようなものがあります：

• シンプルなテストコード：行数が少なくて記述も人が見てわかりやすい。
• デバッグがしやすい：npm install cypress すると標準でついてくる GUI デバッグツールが超使いやすい。 テストケースを停止したり巻き戻ししながらデバッグできる。またテスト実行すると，自動でビデオとスクショを撮ってエビデンスとして残してくれる。

次に，このテストが GitHub Actions で走るようにします。Cypress.io 公式のジョブ定義 が Marketplace にあるのでこれをワークフロー定義ファイルに貼り付けます。このテンプレを使うことで，ワークフローを簡潔に記述することができます。 yaml はこんな感じです。

Copy 
1# Cypress-based e2e test
2- name: Cypress.io
3    uses: cypress-io/github-action@v1.16.1
4    with:
5        start: yarn dev
6        wait-on: 'http://localhost:8000'
7        wait-on-timeout: 120 # (sec)。ビルド時間が長いなら明示する。

超シンプルです。 簡単に説明すると，

• yarn dev してアプリケーションを立ち上げる
• フロントエンドのエンドポイント http://localhost:8000 にアクセスできるようになるのを待つ
• 120 秒間 無反応だったらテスト失敗

という感じです。

wait-on-timeout というプロパティがありますが，ビルドに時間がかかるプロジェクトをお持ちの方は，ここでタイムアウト閾値を 設定しておきましょう（例：120 秒）。このプロパティを明示しないと，60 秒（デフォルトの閾値）以上 localhost:8000 に アクセスできない場合テスト失敗となってしまいます。私はここでハマりました。

GitHub Pages にデプロイする

テストが成功したら，GitHub Pages にデプロイします。

GitHub Pages では，フロントエンド資産を特定のブランチに配置することでこれをホスティングしてくれます。 今回は gh-pages というブランチを作成し，ここにビルド生成物をコミットします。

これは以下のようなフローによってで実現できます。

• GitHub の認証プロセス：gh-pages ブランチにビルド生成物（*.html, *.js, *.css）をコミットするのに必要
• gh-pages に生成物をコミットする

yaml はこんなかんじです：

Copy 
1- name: Deploy Website to GitHub Pages
2      env:
3        GIT_ADDRESS: ${{ secrets.GIT_ADDRESS }}
4        GIT_USERNAME: ${{ secrets.GIT_USERNAME }}
5      run: |
6        # 認証
7        git config --global user.email ${GIT_ADDRESS}
8        git config --global user.name ${GIT_USERNAME}
9        git remote set-url origin https://${{ secrets.GIT_USERNAME }}:${{ secrets.GIT_SECRET }}@github.com/kenchon/blog
10        # ビルド＆デプロイ
11        gatsby build --prefix-paths && gh-pages -d public -b gh-pages

secrets というオブジェクトには，事前にリポジトリの Settings/Secrets で登録した認証情報が入ります。

簡単なことしかやらせていませんが，以上で

💻　git push ➡️ 「🔍 Cypress.io のテスト」 ➡️ 「🚀 GitHub Pages へのデプロイ」

という一連のワークフローの自動化が完了しました。

おまけ：README.md にバッジを貼る

GitHub Actions の GUI から「CI 成功！」のバッジの URL を取れます。

CI が無事に動いて嬉しいのでこのブログにも貼り付けます ✌️

それでは，Happy CI/CD LIFE! 🚀