sitateru tech blog: GitHub Actions

sitateru tech blog

シタテルの技術やエンジニアの取り組みを紹介するテックブログです。

ラベル GitHub Actions の投稿を表示しています。 すべての投稿を表示
ラベル GitHub Actions の投稿を表示しています。 すべての投稿を表示

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テストを実行するには無料枠の 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 Docs

インストールと起動がうまくいけば、このようにGitHubのページ上にも出てきます。


Actionsをセルフホストランナーで実行するには、ワークフローのyamlで以下のように書きます。
runs-on: [self-hosted, linux, x64]
同じOS&アーキテクチャのランナーが複数ある時はラベルをつければよさそうです。
ワークフローでのセルフホストランナーの利用 - GitHub Docs

このセルフホストランナー、今回やってみたようにサーバ上で常時稼働してもいいですが、ちょっとactionsを動かしていろいろデバッグとかしたいけど使用量の枠を食うのがやだなあ・・・というときにも便利そうですね。開発用マシンでその時だけランナーを動かすということもできるので。


なおセルフホストランナーですが、セキュリティ上の理由でパブリックリポジトリでは利用しないようにと公式ドキュメントに書かれています。
パブリックリポジトリではActionsが無料で使えるようなので、そちらでやればよさそうですね。

2020年3月19日木曜日

Cypress on GitHub Actions のいろいろなテクニック

3月 19, 2020
朝野です。
先日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
  })
}
Chromeの起動時に --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')
と1行加えればOKです。
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)

Recent Posts

Posts

連絡フォーム

名前

メール *

メッセージ *