Github ActionsでNetlifyに自動デプロイする

Github Actionsを初めて触ったので記事化します。

# はじめに

昨年末頃に公開されたGithubで用意されたCI/CD(継続的インテグレーション/継続的デリバリ)機能であるGithub Actions、現在では多くのOSSなどでも利用されています。

今回はGithub ActionsでVueアプリケーションをNetlify(高機能ホスティングサービス)に自動デプロイしてみます。(トリガーはプッシュ)

# プロジェクトの設定

まずはVue CliなどでVueアプリケーションを作成します。

$ vue create github-actions-vue

netlify-cliでデプロイするためワークフロー内にnetlify-cliをグローバルインストールするかプロジェクト内にてyarn addでインストールします。

$ yarn add netlify-cli

作成ができれば早速Github Actionsの設定をしていきます。

ymlの構文はドキュメントにまとめられています。

GitHub Actionsのワークフロー構文

Github Actionsを作るためにはプロジェクトのディレクトリに .github ディレクトリを作成し、そこにjobが書かれたワークフローファイルを配置するだけです。

以下がディレクトリ構造

github-actions-vue
└── .github
  └── workflows
      └── deploy.yml

トリガーはmasterブランチにプッシュ時にGithub Actionsのワークフローを実行するようにしています。

on:
  push:
    branches:
      - master

ジョブに実行するGithubホストランナー環境を指定します。
ローカルのPCなどで行いたい場合はセルフホストランナーの設定をすれば実行可能です

jobs:
  build:
    runs-on: ubuntu-latest // [self-hosted, linux] セルフホストの場合

actions/checkout@v2 でコードをチェックアウトします。

steps:
  - name: Checkout source code
    uses: actions/checkout@v2

以下はパッケージのインストールなど依存関係や再利用の多いファイルに対してキャッシュをし、
キャッシュされたキーが存在する場合pathにrestoreされるため、より早いワークフローを実現することができます。

- name: Cache node_modules
  uses: actions/cache@v1
  with:
    path: node_modules
    key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.OS }}-build-
      ${{ runner.OS }}

あとはnodeのセットアップをし、インストール、ビルドを行います。
それが終わればnetlify-cliでデプロイできます。
npxコマンドでバイナリを指定してコマンドを実行しなくても良いのでnpxで指定しました。

- name: Deploy to netlify
  run: npx netlify-cli deploy --dir=./dist
  env:
    NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
    NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

# NetlifyのGithub Actionsを利用する

先ほどはnetlify-cliをインストールしてnpxでデプロイしましたが、Netlifyの公式が出しているGithub Actionsパッケージでデプロイすることもできます。

netlify/actions

Dockerfileでimageが作られているため構文のusesを利用することでグローバルにnetlify-cliコマンドをインストールし、オプションを指定するだけでデプロイをすることができます。

# Netlify側のアクセスキーとサイトID取得

ここまででワークフローの記載が完了しました。次にNetlifyのコマンドで自身のアカウントにデプロイするためのアクセスキーとサイトIDを取得します。

以下でアクセスキーを取得します。

https://app.netlify.com/user/applications#personal-access-tokens

サイトIDは自身のサイト配下のSite detailsにAPI IDとして記載されています。
これらを取得できればGithub Actionsから呼び出せるようにGithubに登録します。

# Netlifyの認証キーをGithubに登録

認証キーは以下のようにGihubプロジェクトのsettings > secretsにて登録ができます。

登録ができるとGithub actionsの構文のsecrets.(key)でアクセスできます。

実際にGithub Actionsの実行UIを見てもマスクされていることがわかります。

以上で、ワークフローが正常に終了し、VueのWelcomeページが表示できればOKです。

# その他

Netlifyの仕様上Githubのリポジトリと紐付きがある場合プッシュしたタイミングでデプロイを自動で行います。

そのためGithub Actionsでジョブ実行前にデプロイが完了してしまうため紐付きを解除する必要がありますが、Netlifyコミュニティに依頼しない限り紐付きを解除することができないのが罠です。(そもそもCI使うなって感じなのかな)

# まとめ

Github Actionsを初めて使ってみましたがドキュメントなどが日本語訳などで丁寧に書かれていたので初見のつまずきなどはなくサクサク進めることができました。

また、今回は利用しませんでしたが、無料プランでも並列実行が上限20並列できたり、バージョン毎でのMatrix buildなどが爆速でできそうなのが便利そうで良さそうでした。

ただ、CircleCIのような独自のCLIツールがないためローカル環境でワークフローの構文チェックを行うツールがなく、毎度プッシュをする必要があるため少し手間でした。
また、デバッグなどでコンテナ内にsshでさくっとログインできないのと
手動でジョブをリトライできないのもCircleCIなどとの違いなのかな。。

今後の機能追加とGithubのツールとの連携などが期待。。！