GitHub Actionsのローカルでの動作確認(Ver.コロナに負けるな)

#対象者

• GitHub Actionsのworkflowのymlファイルは触りたくない
• GitHub Actionsの動作をpushせずに確認したい

※全てに対応できるかは不明です。
※東京都 新型コロナウィルス感染症対策サイトのOBP Builderの動かし方に特化して記載しています。

#きっかけ
東京都 新型コロナウィルス感染症対策サイトがオープンソースによって開発されていることを知り、私も少しだけ参加しています。

FacebookやTwitterにシェアする機能があるのですが、投稿埋め込み用の画像をGitHub Actionsを使って作成しています。

大まかな動作は以下の通りです。

• stagingブランチにpush
• OBP Builderというワークフローが自動的に動作
• Seleniumでスクリーンショットを取得
• 取得した画像をnew_ogpというブランチにCommit&Push

オープンソースの共同開発に不慣れな私はForkしているとはいえstagingにpushするのも怖くて仕方ありません。

なんとかpushせずに確認したい。

#方法

##環境構築
以下が完璧でした。
Qiita|東京都 新型コロナウイルス対策サイトへの貢献方法を解説

##ChromeDriverをダウンロード
SeleniumからChromeDriverを動かしてスクリーンショットを取得しているので、ChromeDriverが必要です。
###Chromeのバージョン確認
Chromeはインストールされている前提ですが、Chromeで「chrome://settings/help」を開いてChromeのバージョンを確認します。

###公式サイトからダウンロード
以下からバージョンに合うものをダウンロードしてください。
http://chromedriver.chromium.org/downloads

###ソースの修正
####chromedriverダウンロードパス指定
gitリポジトリ内の以下のソースにchromedriverのダウンロードパスを明記します。
/tmpにダウンロードした場合は以下のように修正してください。

ui-test/ogp_screenshot.py

driver = webdriver.Chrome(options=options)

↓

ui-test/ogp_screenshot.py

driver = webdriver.Chrome(executable_path="/tmp/chromedriver", options=options)

###実行
今回実行したいOGP Builderは.github/workflows/ogp_builder.ymlになります。
他のworkflowも同じディレクトリにまとまっています。

job単位に色々書いてありますが、動作に当たる部分はrun:から始まるものです。
今回はこの部分を動させたい。
staging環境にする必要はなく、developmentでも、そこから派生したブランチでも動作すると思います。

.github/workflows/ogp_builder.yml

      - run: yarn install --frozen-lockfile
      - run: yarn run test
      - run: yarn run generate:deploy
      - run: pip install selenium
      - run: (python -m http.server --directory ./dist 8000 &)  ; python ./ui-test/ogp_screenshot.py

単純にコマンドを叩いていけばいいようです。

$ yarn install --frozen-lockfile
$ yarn run test
$ yarn run generate:deploy
$ pip install selenium
$ (python -m http.server --directory ./dist 8000 &)  ; python ./ui-test/ogp_screenshot.py

####環境によっては以下かも。
私の環境(macOS 10.15.3)では、以前seleniumをpip3で入れていたりして、上記ではうまく動作しませんでした。
GitHub Actionsの動作環境はruns-on: で指定するようです。
今回はruns-on: windows-latestが指定されているので、コマンドの違いは致し方なし。

以下の変更で動作しました。
pip→pip3
python→python3

また、httpサーバはこのままだとバックグラウンドで動き続け面倒なので、別ウィンドウで立ち上げておくのが良さそうです。

httpサーバ立ち上げまで

$ yarn install --frozen-lockfile
$ yarn run test
$ yarn run generate:deploy
$ pip3 install selenium
$ python3 -m http.server --directory ./dist 8000;

最新化とスクリーンショットの撮影(別ウィンドウ)

$ yarn run generate:deploy
$ python3 ./ui-test/ogp_screenshot.py

###実行結果確認
seleniumが動いて、GETのログが出てきます。

127.0.0.1 - - [20/Mar/2020 19:13:52] "GET /?dummy?ogp=true HTTP/1.1" 200 -
<省略>
127.0.0.1 - - [20/Mar/2020 19:15:16] "GET /sw.js HTTP/1.1" 304 -

ogpディレクトリができて、中に画像が格納されていればOKです。

$ ls ogp
_?dummy.png
agency.png
attributes-of-confirmed-cases.png
details-of-confirmed-cases.png
en
ja
ja-basic
ko
number-of-confirmed-cases.png
number-of-reports-to-covid19-consultation-desk.png
number-of-reports-to-covid19-telephone-advisory-center.png
number-of-tested.png
predicted-number-of-toei-subway-passengers.png
zh-cn
zh-tw

###後始末
GitHub Actionsでは作成したフォルダなどは削除されるようですが、ローカル環境では削除されないので、作成したogpディレクトリが残り、次回実行した時にそのまま実行すると、エラーが出ます。

FileExistsError: [Errno 17] File exists: 'ogp'

なので、実行結果の確認ができたら、生成したディレクトリは削除しておきます。

$ rm -r ogp

以上で動作確認は完了です。

#まとめ

• pushしなくても、トリガーとして登録されているブランチでなくても実行できる。
• workflowのymlのrunをコマンドラインで実行すればよい。
• 作成したフォルダは削除しておく。
• 環境の違いで動作が異なる場合がある。runs-on:で指定。
• GitHubの使い方に慣れて、GitHub Actionsをちゃんと使えばいい話。