やること

GitHub Actionsを個人開発のアプリに導入して、CI/CD環境を構築します。
CI/CDを初めて触るので至らない点もあるかと思いますが、参考になれば幸いです。

GitHub Actions導入

rootディレクトリに.github/workflows/front-github-actions.yml（ファイル名は任意）を作成します。
基本的にはこの設定ファイル（front-github-actions.yml）をGitHub上に上げておくだけで特別な設定は不要です。

CI環境の構築

JavaScriptの構文解析でESLint、コード整形でPrettierを入れてます。
mainブランチ向けにPRを作成したタイミングでESLintとPrettierが自動で走るように設定します。

設定ファイル

front-github-actions.yml

# ワークフローの名前（任意）
name: front-github-actions
# mainブランチに対してPRが作成されたタイミングをトリガーとする
on:
  pull_request:
    branches:
      - main
# ワークフローで実行されるジョブをグループ化
jobs:
  # jobの名前を定義
  test:
    # 最新バージョンのUbuntuLinuxランナーで実行するようにジョブを構成
    runs-on: ubuntu-latest
    # testジョブで実行されるステップをグループ化
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: install
        run: yarn install
      - name: ESLint
        run: yarn fix:eslint
      - name: Prettier
        run: yarn fix:prettier

package.json抜粋

package.json

  "scripts": {
    （省略）
    "fix:eslint": "eslint src --ext .js,.ts,.jsx,.tsx --fix",
    "fix:prettier": "prettier --write ."
  }

いざ実践

mainブランチ向けにPRを作成。「Actions」で実行結果を確認できます。
ESLintとPrettierが実行されています。

続いてCD環境の構築

サーバーはHerokuを使用しているので、
mainブランチ向けにPRを作成したタイミングでHerokuに自動でデプロイします。

HerokuのAPI KeyをGitHubに設定

Heroku>アカウント設定でAPI Keyを確認できます

GitHub>リポジトリ>Setting>Secrets>Actions>New Repository secretで下記を設定します。（メールアドレスも）
Name:HEROKU_API_KEY
Value:*********

設定ファイル

先ほどの設定ファイルにデプロイの設定を追加します

front-github-actions.yml

deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      # GitHub ActionsにHerokuにデプロイする機能があるのでそいつを使う
      - uses: akhileshns/heroku-deploy@v3.12.12
        with:
          heroku_api_key: ${{secrets.HEROKU_API_KEY}}
          heroku_app_name: 'hoge'
          heroku_email: ${{secrets.HEROKU_EMAIL}}

いざ実践

先ほどのESLintとPrettierが実行されたあと、Herokuにデプロイされています。
以上で自動の静的解析と自動デプロイができるようになりました、

感想と課題

GitHubActionsを導入するまで、手動でlintを流したり、デプロイしたりしていたのでめんどくさかったのですが、自動で実行してくれるのでだいぶ手間が省けました。
ワークフローを高速化するためにyarnはキャッシュしたほうが良さげです

補足情報

・トリガーやジョブなどの設定は公式ドキュメントを参照してください。
・actions/setup-nodeのcacheオプションについて、依存関係がインストールされていないとcacheオプションは機能しない（yarn cache not found）。そういう仕様らしい。https://t.co/WJpwwPzSkY