GitHub ActionsでGitHub Pagesに自動デプロイするワークフローを作った

今までCIといえばCircleCIかTravis CIを使うことが多くGitHub Actionsを使ったことがなかったので、 今回はGitHub Pagesで運用している自分のポートフォリオサイトをGiHub ActionでCIを回して 自動的にデプロイ(gh-pagesブランチにpush)するワークフローを作ってみたのでGitHub Actionsの基本的な使い方からメモしておきます📝

GitHub Actionsとは？

GitHub Actionsで、ソフトウェア開発ワークフローをリポジトリの中で自動化、カスタマイズ実行しましょう。 CI/CDを含む好きなジョブを実行してくれるアクションを、見つけたり、作成したり、共有したり、完全にカスタマイズされたワークフロー中でアクションを組み合わせたりできます。 https://help.github.com/ja/actions

GitHub ActionsはGitHub上で実行出来るCIサービスです。設定するとGitHubのリポジトリの下記で結果等を確認出来ます。

登録不要でGitHubで完結してCIを実行出来るのは便利ですね✨

GitHub Actionsの基本的な使い方

基本的な使い方としては下記のページで記載されているようにYAML構文でワークフローを定義していきます。

help.github.com

下記のような感じで書くとmasterブランチにpushまたはPull Requestが作成されたときにubuntu環境でHello Sample Job!を表示させるようなJobを実行させるワークフローです。

name: sample action
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master

jobs:
  my_first_job:
    name: sample job
    runs-on: ubuntu-latest
    steps:
      - name: print hello
        run: echo Hello Sample Job!

さらにissueが作成されたタイミングにhookして何かを実行する等、GitHub独自っぽいものもあるのが良いですね、CI/CD以外にも色々使えそうな気がしています👀

help.github.com

コミュニティが提供しているActionを使う

GitHub Actionsではコミュニティで開発されているActionを使ってjobを定義することも出来ます✨

help.github.com

例えばactions/checkout@v2を使ってリポジトリをcheckoutさせる場合は下記のような感じでusesを使うと使用することが出来ます。

name: sample checkout action
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

github.com

提供されているActionはマーケットプレイスで確認出来るようです👀

help.github.com

GitHub ActionsでGitHub Pagesに自動デプロイする

今回は自分のポートフォリオサイトを今まではmasterブランチに手動でnpm run buildしてpushしていたのをGitHub Actionsで実行するようにしました。

流れとしては、masterブランチにpushされたときに下記を実行します。

1. リポジトリのチェックアウト
2. nodejs(12系)のセットアップ
3. 依存モジュールのインストール
4. 静的解析(eslint)の実行
5. ビルドの実行
6. ビルドで作成された./dist配下のファイルをgh-pagesブランチへpush

name: github pages

on:
  push:
    branches:
      - master

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - name: checkout
        uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: install deps
        run: npm ci
      - name: lint
        run: npm run lint
      - name: build
        run: npm run build --if-present
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          publish_dir: ./dist

※secrets.ACTIONS_DEPLOY_KEYは、リポジトリのSecretsに設定したPersonal access tokenを読み込んでします。

おわりに

GitHub Actions今まで使ったことなかったのですが結構簡単に設定出来る + GitHub内で完結できるので良さそうに思いました。 今まで個人の小さいものはTravis CIを使うことが多かったのですが、GitHub Actionsを使っても良さそうだなと・・・！

またissue等のイベントにhookして出来るのもCI/CD以外にも色々できそうで良さそうですね✨

参考

qiita.com