2020年7月10日金曜日
GCPでGitHub Actionsのセルフホストランナーを作った
7月 10, 2020
朝野です。少し前の話ですが、GitHubの料金が全体的に値下げされましたね。
https://github.co.jp/pricing.html
Teamプランは1ユーザーあたり4ドルになったのですが、さりげなく同時にGitHub Actionsの利用時間(organizationのプライベートリポジトリ全体で)が月3000分まで、と減ってしまいました 😥 (前は10000分)
以前の記事(GitHub ActionsとCypressでサイト監視してみる|sitateru tech blog)で紹介したようなCypressを使った監視をActionsで動かしていたので、月3000分は少ないなーと思って料金を見てみたところ・・・

https://github.co.jp/features/actions#pricing
セルフホストはタダなのか!しかしセルフホストって何だ?🤔
ということでやってみました。
セルフホストランナーについて - GitHub Docs
セルフホストランナーというのは、GitHub Actionsを実行するマシンのことです。自分の管理下にあるサーバーやPCでActionsが実行できちゃいます。前述のように、セルフホストランナーで実行する分にはGitHubに対して課金は発生しません。
・・・おっ、ということはGCPの永久無料枠のCompute Engineインスタンスを使えばタダで回し放題やんけ!( ^ω^)
Google Cloud の無料枠 | Google Cloud Platform の無料枠
と思ったのですが、先に結論を書きます、コンテナ上でCypressテストを実行するには無料枠の
さて、セルフホストランナーをクラウド上のLinuxインスタンスで構築する手順に行きたいと思います。
セルフホストランナーの追加 - GitHub Docs
organizationで使えるランナーを追加するには、 まず

インストールコマンドを実行するとこんな感じです。AAがいいですね。
途中でこのランナーにつける名前やラベルを聞かれますが、とりあえずは初期値でも大丈夫そうです。ランナーを複数登録する想定ならわかりやすいものをつけるとよさそうですね。

ちなみに、DockerイメージをAction上で使う場合はランナーマシンにDockerをインストールしておく必要があります。
インストール後、ランナーを起動するにはコマンドで起動する方法とサービスとして動かす方法があります。
コマンドの場合はランナーのパッケージ内の
サービスの場合は下ドキュメントにありますが
今回は後者の方法で、
セルフホストランナーアプリケーションをサービスとして設定する - GitHub Docs
インストールと起動がうまくいけば、このようにGitHubのページ上にも出てきます。

Actionsをセルフホストランナーで実行するには、ワークフローのyamlで以下のように書きます。
同じOS&アーキテクチャのランナーが複数ある時はラベルをつければよさそうです。
ワークフローでのセルフホストランナーの利用 - GitHub Docs
このセルフホストランナー、今回やってみたようにサーバ上で常時稼働してもいいですが、ちょっとactionsを動かしていろいろデバッグとかしたいけど使用量の枠を食うのがやだなあ・・・というときにも便利そうですね。開発用マシンでその時だけランナーを動かすということもできるので。
なおセルフホストランナーですが、セキュリティ上の理由でパブリックリポジトリでは利用しないようにと公式ドキュメントに書かれています。
パブリックリポジトリではActionsが無料で使えるようなので、そちらでやればよさそうですね。
https://github.co.jp/pricing.html
Teamプランは1ユーザーあたり4ドルになったのですが、さりげなく同時にGitHub Actionsの利用時間(organizationのプライベートリポジトリ全体で)が月3000分まで、と減ってしまいました 😥 (前は10000分)
以前の記事(GitHub ActionsとCypressでサイト監視してみる|sitateru tech blog)で紹介したようなCypressを使った監視をActionsで動かしていたので、月3000分は少ないなーと思って料金を見てみたところ・・・

https://github.co.jp/features/actions#pricing
セルフホストはタダなのか!しかしセルフホストって何だ?🤔
ということでやってみました。
セルフホストランナーについて - GitHub Docs
セルフホストランナーというのは、GitHub Actionsを実行するマシンのことです。自分の管理下にあるサーバーやPCでActionsが実行できちゃいます。前述のように、セルフホストランナーで実行する分にはGitHubに対して課金は発生しません。
・・・おっ、ということはGCPの永久無料枠のCompute Engineインスタンスを使えばタダで回し放題やんけ!( ^ω^)
Google Cloud の無料枠 | Google Cloud Platform の無料枠
と思ったのですが、先に結論を書きます、コンテナ上でCypressテストを実行するには無料枠の
f1-micro
では処理能力的に無理でした。もっと軽い処理なら足りるのかもしれませんが・・・e2-micro
ならなんとか動いたのでこれで良しとしましょう。さて、セルフホストランナーをクラウド上のLinuxインスタンスで構築する手順に行きたいと思います。
セルフホストランナーの追加 - GitHub Docs
organizationで使えるランナーを追加するには、 まず
https://github.com/organizations/{organization名}/settings/actions
で Add Runner
をクリック。するとインストールするコマンドが出てくるので、それを実行すればOKです。簡単ですね。
インストールコマンドを実行するとこんな感じです。AAがいいですね。
途中でこのランナーにつける名前やラベルを聞かれますが、とりあえずは初期値でも大丈夫そうです。ランナーを複数登録する想定ならわかりやすいものをつけるとよさそうですね。

ちなみに、DockerイメージをAction上で使う場合はランナーマシンにDockerをインストールしておく必要があります。
インストール後、ランナーを起動するにはコマンドで起動する方法とサービスとして動かす方法があります。
コマンドの場合はランナーのパッケージ内の
run.sh
を実行するだけ。サービスの場合は下ドキュメントにありますが
svc.sh
でサービスを実行するactions-runner/bin/actions.runner.service.template
ファイルを編集して/etc/systemd/system/
あたりにうまいこと設置して systemctl でコントロールする
今回は後者の方法で、
/etc/systemd/system/actions.service
を設置しました。[Unit]
Description=GitHub Actions Runner
After=network.target
[Service]
ExecStart=/usr/local/actions-runner/runsvc.sh
User=dev
WorkingDirectory=/usr/local/actions-runner
KillMode=process
KillSignal=SIGTERM
TimeoutStopSec=5min
[Install]
WantedBy=multi-user.target
インストールと起動がうまくいけば、このようにGitHubのページ上にも出てきます。

Actionsをセルフホストランナーで実行するには、ワークフローのyamlで以下のように書きます。
runs-on: [self-hosted, linux, x64]
ワークフローでのセルフホストランナーの利用 - GitHub Docs
このセルフホストランナー、今回やってみたようにサーバ上で常時稼働してもいいですが、ちょっとactionsを動かしていろいろデバッグとかしたいけど使用量の枠を食うのがやだなあ・・・というときにも便利そうですね。開発用マシンでその時だけランナーを動かすということもできるので。
なおセルフホストランナーですが、セキュリティ上の理由でパブリックリポジトリでは利用しないようにと公式ドキュメントに書かれています。
パブリックリポジトリではActionsが無料で使えるようなので、そちらでやればよさそうですね。
2020年3月19日木曜日
Cypress on GitHub Actions のいろいろなテクニック
3月 19, 2020
朝野です。
先日CypressとGitHubを使う記事を書いたのですが、今回はもう少し突っ込んだ話として、ActionsでCypressを使う上で引っかかったところなどをまとめてみたいと思います。
調べてみたところChromeの共有メモリが足りなくなっているようです。
そんなときは cypress/plugin/index.js にこの記述で直りました。
Chromeの起動時に
hover | Cypress Documentation
上記のドキュメントでは
という方法が紹介されています。
ちょっと試したところ
package.jsonに cypress-xpath を追加し、cypress/support/index.js に
と1行加えればOKです。
そんなときはlintのcypressプラグインを使いましょう。
eslint-plugin-cypress を追加し、cypress/.eslintrc.jsonを作成します。
最低限の設定をするならこんなもんです。
package.jsonやpackage-lock.jsonの中身を無視してCypressだけインストールするならこうする手もあります。
npm-install | npm Documentation
本当はnode_modulesをキャッシュしたいんですが、
依存関係をキャッシュしてワークフローのスピードを上げる - GitHub ヘルプ
によると
というわけで、CypressとActions関係のさまざまなTipsを書いてみました。
何かの参考になれば幸いです。
先日CypressとGitHubを使う記事を書いたのですが、今回はもう少し突っ込んだ話として、ActionsでCypressを使う上で引っかかったところなどをまとめてみたいと思います。
Cypressのテストが止まったままになる??
Dockerコンテナ上でCypress(ブラウザはChrome)を実行していると途中で止まってしまうことがあります。調べてみたところChromeの共有メモリが足りなくなっているようです。
そんなときは cypress/plugin/index.js にこの記述で直りました。
module.exports = (on, config) => {
on('before:browser:launch', (browser, launchOptions) => {
if (browser.name === 'chrome') {
launchOptions.args.push('--disable-dev-shm-usage')
}
return launchOptions
})
}
--disable-dev-shm-usage
オプションをつけているのですが、これによって共有メモリファイルを /tmp
以下に配置するので充分な容量が確保できるということだそうです。:hover
CypressにはCSSの:hover状態を発生させる機能が無いようです🙄hover | Cypress Documentation
If cy.hover() is used, an error will display and redirect you to this page.Cypressでは非表示状態の要素はクリックなどの操作ができないのですが、じゃあ:hover時に表示される要素をクリックしたいときはどうするの?という話になりますね。
上記のドキュメントでは
cy.get('.hidden').invoke('show').click()
cy.get('.hidden').click({ force: true })
ちょっと試したところ
invoke('show')
はうまくいかなかったのですが click({ force: true })
はできたので、これでいいかなということにしました。XPath
ページに表示されているテキストを検索して要素を選択したいときなどにはXPathを使いたくなりますが、その場合はプラグインを追加するという方法になります。package.jsonに cypress-xpath を追加し、cypress/support/index.js に
require('cypress-xpath')
cy.xpath('//div[contains(text(), "ここをクリック")]')
のように要素を取得できます。ESLint
ESLintを使っている場合、Cypressのコードはそのままだと引っかかってエラーが出てしまいます。そんなときはlintのcypressプラグインを使いましょう。
eslint-plugin-cypress を追加し、cypress/.eslintrc.jsonを作成します。
最低限の設定をするならこんなもんです。
{
"plugins": [
"cypress"
],
"env": {
"cypress/globals": true
},
"extends": [
"plugin:cypress/recommended"
]
}
Cypressだけインストールする
これはCypressではなくnpmのテクニックなのですが、Actions内でCypressを実行するだけなら、Cypress以外のnpmパッケージをインストールする必要はないですよね。package.jsonやpackage-lock.jsonの中身を無視してCypressだけインストールするならこうする手もあります。
$ npm install cypress@4.1.0 --no-save --no-package-lock
npm-install | npm Documentation
本当はnode_modulesをキャッシュしたいんですが、
依存関係をキャッシュしてワークフローのスピードを上げる - GitHub ヘルプ
によると
pull_requestのclosedイベントの場合を除く、push及びpull_requestイベントで起動されたワークフロー内のキャッシュにのみアクセスできます。ということなので、スケジュール実行だとできないのです・・・
というわけで、CypressとActions関係のさまざまなTipsを書いてみました。
何かの参考になれば幸いです。
登録:
投稿 (Atom)