初めに

適当に作った React x Rails のアプリを heroku にデプロイしたはいいが、デプロイするのに一々コマンドを打つのがめんどくさくなった。
GitHub actions を利用して自動的にデプロイさせます。

やりたいこと

GitHub actions を利用して heroku へ自動デプロイ
docker を利用する(heroku.yml を使う)
フロントエンドとバックエンドはサブディレクトにあり、それぞれに heroku アプリを作成

本文

heroku.yml

heroku アプリを docker で動かすには、heroku.yml を書く必要があります。
あと起動時のコマンドなどが設定できます。

frontend/heroku.yml

setup:
  config:
    NODE_ENV: production
    NPM_CONFIG_PRODUCTION: false
build:
  docker:
    web: Dockerfile
  config:
    WORKDIR: frontend
    NODE_ENV: production
run:
  web: yarn global add serve && serve -s build

backend/heroku.yml

setup:
  addons:
    - plan: jawsdb
  config:
    LANG: en_US.UTF-8
    RACK_ENV: production
    RAILS_ENV: production
    RAILS_LOG_TO_STDOUT: enabled
    RAILS_SERVE_STATIC_FILES: enabled
build:
  docker:
    web: Dockerfile
run:
  web: pumactl start

GitHub actions

ルート直下に.github、ディレクトリその下に workflow ディレクトリを作成
そこに heroku-backend.yml と heroku-frontend.yml を作成
heroku の APIkey とメールアドレスが必要になります。ダッシュボードから取得
GitHub actions の secrets の設定方法はこちら

.github/workflow/heroku-backend.yml

name: Heroku backend deploy

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: akhileshns/heroku-deploy@v3.12.12
        with:
          heroku_api_key: ${{secrets.HEROKU_API_KEY}} #herokuのAPIのkey
          heroku_app_name: 'coffee-oma-backend' #herokuアプリの名前
          heroku_email: ${{secrets.HEROKU_EMAIL}} #アカウントのメールアドレス
          appdir: "backend"　#サブディレクトリ名
          stack: "container"　#これがないとheroku.ymlを参照されません

.github/workflow/heroku-frontend.yml

name: Heroku frontend deploy

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: akhileshns/heroku-deploy@v3.12.12
        with:
          heroku_api_key: ${{secrets.HEROKU_API_KEY}}
          heroku_app_name: 'coffee-oma-frontend'
          heroku_email: ${{secrets.HEROKU_EMAIL}}
          appdir: "frontend"
          stack: "container"

これで master にマージされたら actions が走り、heroku にデプロイされます。

まとめ

最近 GitHub actions を使い始めましたが他の CI/CD サービスよりわかりやすい気がします。