※スマホ対応はしてません。

タグ: GitHub

GitHub Actionsでpush→試験、バージョンタグ→リリース用意、リリース→デプロイを自動化したよ。

カテゴリー: Web
  • .github/actions/test.yml push ないし PR 作成 → 試験実行
  • .github/actions/release.yml v1.2.34 みたいなタグ作成 → GitHub リポジトリーの Release ドラフトを作成
  • .github/actions/publish.yml Publish release → GitHub Pages をデプロイ

というのをやったので、わかったところまでをメモ。

実際に使ってるファイルはここら辺です。(このプロジェクト自体については本稿は関係ないです。)

これらの GitHub Actions を利用してどう開発するかも、アクションの説明の後に書きました。

push ないし PR 作成 → 試験実行

標準的な Node.js のアクションかと思います。

.github/actions/test.yml

name: Test

on: [push, pull_request]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/[email protected]
    - name: Use Node.js
      uses: actions/[email protected]
      with:
        node-version: 10.x
    - run: npm cit && npm run lint
      env:
        CI: true
    - run: npm run build

事前に用意する NPM スクリプト

試験は npm run test で実行できるものとします。あと npm run lint で ESLint が走る用意もある前提です。(不要ならコピペして削ってね。)

複数の Node.js バージョン

ライブラリーとかを開発してる場合は matrix を使って複数の Node.js バージョンで実行するとよろしいかと存じます。知らんけどなんかそんな気がする。

v1.2.34 みたいなタグ作成 → GitHub リポジトリーの Release ドラフトを作成

ワイルドカードを使いつつ /^v[0-9]/ 的なタグを対象に Release ドラフト作成を実施します。ここでいう Release ってのは GitHub リポジトリーページの Code → Releases に出てくるやつらのこと。

Release を作成するアクションは GitHub 公式。

.github/actions/release.yml

name: Release Draft

on:
  push:
    tags: ['v0*', 'v1*', 'v2*', 'v3*', 'v4*', 'v5*', 'v6*', 'v7*', 'v8*', 'v9*']

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/[email protected]
    - name: Use Node.js
      uses: actions/[email protected]
      with:
        node-version: 10.x
    - run: npm cit && npm run lint
      env:
        CI: true
    - run: npm run build
    - name: Create Release
      id: create_release
      uses: actions/[email protected]
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      with:
        tag_name: ${{ github.ref }}
        release_name: ${{ github.ref }}
        draft: true

GITHUB_TOKEN は自動で用意される

のでそのままで大丈夫です。

GitHubは、ワークフローで利用する GITHUB_TOKEN シークレットを自動的に生成します。

Publish release → GitHub Pages をデプロイ

既存のアクションを利用させてもらいます。

.github/actions/publish.yml

name: Publish

on:
  release:
    types: published

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/[email protected]
    - name: Use Node.js
      uses: actions/[email protected]
      with:
        node-version: 10.x
    - run: npm cit && npm run lint
      env:
        CI: true
    - run: npm run build
    - name: GitHub Pages action
      uses: peaceiris/[email protected]
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./out

前節のアクションで Release はドラフトとして作成されています。これを編集から “Publish release” すると type: published のイベントが発火するので、そこから GitHub Pages を更新するようにします。

publish_dir は適宜変更してください。

作業の流れ

上記アクションを用意する

します。

開発してコミットする

します。

push するたびに試験が実行され、それに失敗するとメールが飛んでくるので(たぶんデフォルトで、設定変更できると思う)、「ついうっかり」があってもすぐ気づけるようになるわけです。やったね。

試験はちゃんと書こうね。

バージョンを上げる

ぼちぼち開発したらここぞと思うところでバージョンを上げます。

npm を使ってる場合は npm version <new version> で

  • package.json の version を更新
  • Git コミット
  • Git タグ作成

を一発でやってくれます。

またバージョンは直接指定しなくても、semver のどこを上げるかキーワードで指定できます。べんりー

コマンド バージョン
npm version patch v1.2.3 → v1.2.4
npm version minor v1.2.3 → v1.3.0
npm version major v1.2.3 → v2.0.0

タグを push する

Git でコミットとタグは別扱いみたいなので、git push だけでなく git push --tags も実行してタグをリモートである GitHub へ送信します。(そこらへん GUI のツール使ってると一発なのかな?)

受信した GitHub は v1.2.34 のようなタグを見つけ次第該当するアクションを実行し、 GitHub リポジトリーページのリリース一覧にドラフトを用意します。

Release を完成させる

Code → Releases の一覧に Draft 状態の Release が用意されてるはずです。ちなみに Draft 状態だとアクセス権のないひとは見えないみたいです。(一方 pre-release は見える。)

右側 Edit ボタンから編集ページを開いて、適宜編集して Publish release ボタンから、リリーーース!するとこのリリースに反応するよう設定した Publish アクションが実行されます。

前述の通り、このプロジェクトにおける publish とは GitHub Pages 更新のことです。

GitHub Pages が更新されたのを確認する

リポジトリーの Actions ページでアクションの実行ログを一覧できます。最新のものがまだ実行中かもしれません。完了するまで待ちましょう。なおログのページはリアルタイムで更新されるので、見ていてたのしい。

終わったら GitHub Pages の URL を開いて、最新版に更新されていることを確認します。やったね。

ちなみに URL は https://ginpei.github.io/my-great-app/ みたいになります。Nuxt.js 等々だいたいのフレームワークはルートパス / での動作を前提にファイルを用意するので、真っ白なページでコンソールにエラーが出てるかもしれません。フレームワークの設定をしたり、独自ドメインを用意したりしてください。アクションは関係ないので本稿では説明しません。

よくわからないこと

試験実行をまとめたい

steps の途中までは全部一緒なので、そこを抜き出して共通化したい感じがある。独立したアクションなら use で呼べるけど、同じリポジトリー内の別の workflow も呼べたりしないかな。呼ぶというか、前提条件として待つというか。

/^v[0-9]/ をもっときれいにやれないか

'v*' だと たまたま “v” で始まる、例えば volumeUp とか vancouver とかに反応しちゃうので、直後に数字が来るものに限定しました。10通りしかないから全部書いたけど、もうちょっと綺麗にやれたりするんだろうか。

キャッシュしたい

毎回 npm install するのは時間と帯域の無駄遣い。たしか pacckage-lock.json をキーにしてキャッシュするやり方があったはず。あとで調べる。

おわり

とりあえず動いたのでヨシ!

参考

GitHub PagesをCloudflareでHTTPS化した後にサブドメインを追加する。

カテゴリー: サーバー

ただのメモ。

今回作ったもの(未完成):

前提

もうこれやってる状態。

  • https://ginpei.info/ を、GitHub Pagesで作成、管理、ホスト
  • CloudflareでHTTPS化、キャッシュ

GitHub側

  • 普通のGitHub Pagesの用意
  • CNAME ファイルに clock.ginpei.info とだけ書いて gh-pages ブランチに追加

Cloudflare側

  • 上の方の一覧から “DNS” を開く
  • DNS Recordsに以下の内容で追加
    • CNAME / clock / ginpei.github.io / “Automatic TTL” / ON

おしまい

あとは開くともう動いた。うっひょう簡単!

あんまり詳しくなくて勘でやったら動いたやつなんでアレだったら教えてください。

「Web製作者のためのGitHubの教科書」は非技術者におすすめの本です。

カテゴリー: 開発環境

著者の一人、平木聡さんから頂いてましたので、紹介させて頂きます。

GitHubは年中無休なので、お正月に本書を読みながら諸々を試しておくと、新年の業務がスムーズになるんじゃないすかねー。

概要

  • GitだけでなくGitHubだけの機能も紹介
  • GUIアプリ(SourceTree Win/Mac)とコマンドラインとの両方で作業を解説
  • 画像多数、ちなみに総天然色
  • 言い回しや書体、図解が読みやすい

    (さらに…)