LoginSignup
2
1

More than 1 year has passed since last update.

GitHub ActionsでCI/CD環境を構築

Last updated at Posted at 2022-03-15

やること

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が実行されています。
スクリーンショット 2022-03-09 23.56.14.png

続いてCD環境の構築

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

HerokuのAPI KeyをGitHubに設定

Heroku>アカウント設定でAPI Keyを確認できます
スクリーンショット 2022-03-09 23.34.07.png

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

スクリーンショット 2022-03-09 23.35.24.png

設定ファイル

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

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にデプロイされています。
以上で自動の静的解析と自動デプロイができるようになりました、
スクリーンショット 2022-03-10 0.06.08.png

感想と課題

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

補足情報

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1