sitateru tech blog

寒い日が続きますね。

ところで皆さんはGitHubのdependabotは使っていますでしょうか？
リポジトリをスキャンして、使っているライブラリやパッケージの脆弱性をお知らせしてくれるサービスですね。

依存関係を自動的に更新する - GitHub Docs

そのdependabotでちょっとした問題を調べて解決したので記録しておこうと思います。
題して「特定のDockerタグを無視する設定の書き方」です。
dependabotの概要や初期設定などはこの記事ではちょっと飛ばしますのでご了承ください🙇‍

dependabotはDockerタグにも対応していて、脆弱性対応された新しいバージョンタグがある場合はそれを出すようになっています。
例えばリポジトリの docker/Dockerfile をスキャン対象にする場合、コミットしておく設定ファイル .github/dependabot.yml はこのようになります。

version: 2
updates:
  - package-ecosystem: "docker"
    directory: "/docker"

さて、基本的にはdependabotはメジャーバージョンアップも含めて最新バージョンにアップデートさせるように動作するようです。
そのため、Dokerfileで node:14.x.x イメージを使っている場合

このように node:15 系にアップデートしなよ！というPRが作成されるのです。

でもNode.jsはバージョン14はLTSで15はLTSじゃない・・・更新するなら14系の最新にしてほしい！
というわけで、「Dockerタグの特定バージョンを無視する設定」を調べて入れてみました。

依存関係の更新の設定オプション - GitHub Docs

こちらのドキュメントによると、あるバージョンへの更新を無視するためにはdependabot.ymlにそのバージョンを明記すればいいのですが、

範囲を定義する場合は、パッケージマネージャーの標準パターンを使用します

Dockerタグの標準パターンって何だ・・・？🤔

結局わからなかったのでソースを見てみたところ、判定しているのはおそらくこのあたり。

dependabot-core/update_checker.rb at main · dependabot/dependabot-core · GitHub

バージョンの取り扱いに使っているのは Gem::Versionクラス のようです。

class Gem::Version (Ruby 3.0.0 リファレンスマニュアル)

ということはGemfileでバージョンを指定するのと同じ記法で良さそうですね。
dependabot.ymlはこうなりました。

version: 2
updates:
  - package-ecosystem: "docker"
    directory: "/docker"
    ignore:
      - dependency-name: "node"
        versions: ["~>15.0"]
        # nodeイメージの 15.x 系は無視

これでnodeイメージは 15.x を対象外にして更新するようになりました。
新しく作られるPRは14系の範囲でバージョンアップするものになっていますね。

今回は軽く、AWS ECR (Elastic Container Registry) の小ネタです。

AWSでコンテナを使って何かする場合ECRにコンテナイメージを保存しておくことが多いと思いますが、日ごろからイメージをよくビルド＆プッシュしているとどんどんイメージが増えていきますね。

イメージサイズがものすごく大きいとかでなければそれほど料金を食うわけでもないのですが、まず使わない古いイメージをずっと保存しておくこともないよなーと思ったのでそのあたりを設定してみました。

ECRではライフサイクルポリシーという機能があり、いろいろな条件を定めてイメージを自動クリーンアップすることができるんですね。
Amazon ECRのライフサイクルポリシーでコンテナイメージのクリーンアップ | Amazon Web Services ブログ

設定できる条件は

• タグ
• イメージ数
• プッシュされてからの経過日数

今回は、「タグが latest ではない」かつ「プッシュされて90日以上」の条件に合うイメージを削除するポリシーを設定してみました。

AWSコンソールで設定する場合は、ECRのコンソールでリポジトリを選択して左のメニューの Lifecycle Policy をクリックすると設定画面があります。

「テストルールの編集」ボタンを押すとポリシーを適用した結果が確認できる（実際に保存されているイメージには何もしない）テスト用ページに移動するので、まずはそこで試してみるのがいいですね。

さて、ライフサイクルポリシーは「ルール」を優先順位つきで好きな数設定することで構成します。ルール作成画面はこうなっていて、一致条件は「イメージをプッシュしてから」「次の数値を超えるイメージ数」が選べます。

今回作りたい条件は「タグが latest ではない」かつ「プッシュされて90日以上」ということで、

• タグ付け済("latest")、次の数値を超えるイメージ数(1)
• すべて、イメージをプッシュしてから(90日)

という2つのルールを作ってこのようになります。

ルールを作ればあとは自動でそれに従ってイメージが毎日掃除されるので、とても楽ですね😊

ここまではコンソールで操作してきましたが、リポジトリが多い場合やコンソール面倒だと言う場合はもちろんCLIが使えます。

put-lifecycle-policy — AWS CLI 2.1.0 Command Reference

まずは先ほどのルールをJSON化して policy.json とでもファイルを作ります。

{
    "rules": [
        {
            "rulePriority": 1,
            "description": "keep latest image",
            "selection": {
                "tagStatus": "tagged",
                "tagPrefixList": ["latest"],
                "countType": "imageCountMoreThan",
                "countNumber": 1
            },
            "action": {
                "type": "expire"
            }
        },
        {
            "rulePriority": 2,
            "description": "expire images older than 90 days",
            "selection": {
                "tagStatus": "any",
                "countType": "sinceImagePushed",
                "countUnit": "days",
                "countNumber": 90
            },
            "action": {
                "type": "expire"
            }
        }
    ]
}

今回は全リポジトリに適用したかったのでシェルスクリプトを作りました。

#!/bin/sh
# ECRリポジトリにライフサイクルポリシーを設定する

for REPO in $(aws ecr describe-repositories --query "repositories[*].{name:repositoryName}" --output text)
do
  echo "repository: $REPO"
  aws ecr put-lifecycle-policy --lifecycle-policy-text "file://policy.json" --repository-name $REPO
done

これで一括適用ができますね💪

比較的簡単に設定ができるので、「うわっ…ECRのイメージ、多すぎ…？」と気づいた際には設定してみてはいかがでしょうか。

ちなみにterraformだとaws_ecr_lifecycle_policyリソースで設定できるようです。

aws_ecr_lifecycle_policy | Resources | hashicorp/aws | Terraform Registry

 AWSやGCPの料金、たまに気になりますよね。

そういえば今月どれくらい料金食ってるんだ？と思ったとき、もちろん各サービスのコンソールで課金管理のページを開けば確認できますね。
が、日常的にはお知らせが届くほうが簡単ですむよね、ということでslackに通知をさせてみました。

AWSは簡単だったのですがGCPはちょっと手間だったのでまとめておきたいと思います。

まあエンジニアとしては課金の具合を気にせず開発に集中できれば一番いいのですが、現実には会社の予算とかいろいろありますし私は課金周りの把握をする役回りもあるので、これはやっておきたいところです。

• svc.sh でサービスを実行する
• actions-runner/bin/actions.runner.service.template ファイルを編集して /etc/systemd/system/ あたりにうまいこと設置して systemctl でコントロールする

[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

runs-on: [self-hosted, linux, x64]

Cypressのテストが止まったままになる？？

module.exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {
    if (browser.name === 'chrome') {
      launchOptions.args.push('--disable-dev-shm-usage')
    }
    return launchOptions
  })
}

:hover

If cy.hover() is used, an error will display and redirect you to this page.

cy.get('.hidden').invoke('show').click()
cy.get('.hidden').click({ force: true })

XPath

require('cypress-xpath')

ESLint

{
  "plugins": [
    "cypress"
  ],
  "env": {
    "cypress/globals": true
  },
  "extends": [
    "plugin:cypress/recommended"
  ]
}

Cypressだけインストールする

pull_requestのclosedイベントの場合を除く、push及びpull_requestイベントで起動されたワークフロー内のキャッシュにのみアクセスできます。

• テストコードを書いて cypress/integration/ ディレクトリに入れておく
• npmでcypressをインストール
• $ npx cypress run で実行

describe('Check page', function() {
  it('top', function() {
    // URLを開く
    cy.visit('https://sitateru.com/')
    // ページタイトルをチェック
    cy.title().should('eq', 'sitateru - シタテル - | その服は、つくれる。')
    // ページ内に特定の文字列があることを確認する
    cy.contains('かんたん無料登録')
    // CSSセレクタを使って、要素が存在することを確認する
    cy.get('.top-main-visual').should('exist')
  })
})

describe('Login', function() {
  it('login', function() {
    cy.visit('https://atelier.sitateru.com/login')
    // フォームに入力
    cy.get('#email').type(Cypress.env('LOGIN_EMAIL'))
    cy.get('#password').type(Cypress.env('LOGIN_PASSWORD'))
    // ログインボタンをクリック
    cy.get('input[type="submit"]').click()

    // 遷移先のURLパスをチェック
    cy.location('pathname').should('eq', '/topics')
  })
})

name: e2e test
on:
  # 毎時0分に実行
  schedule:
    - cron: '0 * * * *'

jobs:
  build:
    name: monitoring
    runs-on: ubuntu-latest
    # cypress公式のDockerイメージを使う
    container:
      image: cypress/browsers:node12.14.0-chrome79-ff71
    steps:
      - name: checkout
        uses: actions/checkout@master
        with:
          ref: 'master'
      - name: install
        run: npm install
      - name: run test
        env:
          LANG: "ja_JP.UTF-8"
          CYPRESS_LOGIN_EMAIL: ${{ secrets.CYPRESS_LOGIN_EMAIL }}
          CYPRESS_LOGIN_PASSWORD: ${{ secrets.CYPRESS_LOGIN_PASSWORD }}
        run: npx cypress run --browser chrome
      # 失敗したときはスクリーンショットをダウンロードできるように
      - name: gather artifact on failure
        uses: actions/upload-artifact@v1
        if: failure()
        with:
          name: cypress-screenshots
          path: cypress/screenshots
      # 結果をslackに通知 (失敗したときはメンション)
      - name: post to slack
        uses: homoluctus/slatify@master
        if: always()
        with:
          type: ${{ job.status }}
          job_name: 'e2e test'
          mention: 'here'
          mention_if: 'failure'
          channel: '#notification-actions'
          icon_emoji: ':github:'
          url: ${{ secrets.SLACK_WEBHOOK_URL }}