Gatsby.jsブログをGithub ActionsでVPSやクラウドへ自動デプロイする

name: Deployment for blog

on:
  push:
    branches:
      - master

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: 14.x
    - name: Cache dependencies
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-
    - run: npm install
    - run: npm run build --if-present
    - name: deploy to server
      uses: burnett01/rsync-deployments@4.1
      with:
        switches: -avzr --delete
        path: public/
        remote_path: /var/www/html
        remote_host: ${{ secrets.DEPLOY_HOST }}
        remote_port: ${{ secrets.DEPLOY_PORT }}
        remote_user: ${{ secrets.DEPLOY_USER }}
        remote_key: ${{ secrets.DEPLOY_KEY }}

シークレットな値を登録

Github Actionsの設定ファイルにシークレットな値を書いてはいけないので、Actionsが提供している機能を使います。

secrets.DEPLOY_HOSTなどと記載してる部分がそれです。

リポジトリのSettingsからSecretsと進み、New repository secretから追加します。

ssh接続するときのユーザー名をDEPLOY_USERに、ポート番号をDEPLOY_PORTに、ホスト名をDEPLOY_HOSTに登録します。

シークレットキー(id_rsaファイルなどに書いてあるやつ)をDEPLOY_KEYに登録します。
ちなみに最後改行を入れないとエラーになります。

具体的には

ssh -p 442 username@host.jp

みたいな感じで接続するとしたら、DEPLOY_USERはusername、DEPLOY_PORTは442、DEPLOY_HOSTはhost.jpとなります。

解説

下はmasterブランチにPushされたら今回設定した処理を実行するという意味です。

開発中のブランチで動作確認したければ、masterの下に開発中のブランチ名を足せば動きます。

on:
  push:
    branches:
      - master

最新のubuntu上で動かします。

runs-on: ubuntu-latest

stepsの下に実行する手順を順番に記載していきます。

Nodejsの環境を作ってnpm installします。

このブログを参考にしました。

    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: 14.x
    - name: Cache dependencies
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-
    - run: npm install

npm run buildしてpublicフォルダの下にindex.htmlなどのビルドしたファイルを吐き出します。

    - run: npm run build --if-present

ビルドしたファイルを本番サーバーにコピーしていきます。

コピーするビルド済みファイルはpublicの下にあるのでpathはpublic/。

remote_pathはコピー先。本番環境のフルパスを指定します。今回は/var/www/htmlです。pwdコマンドなどで調べましょう。

参考にしたブログではrsync-deployを使っていましたが設定する変数がよくわからなかったので、rsync deploymentsを使用しました。

こちらの方がメンテナンスされてそうでしたし、スター数も多いので良さそう。

    - name: deploy to server
      uses: burnett01/rsync-deployments@4.1
      with:
        switches: -avzr --delete
        path: public/
        remote_path: /var/www/html
        remote_host: ${{ secrets.DEPLOY_HOST }}
        remote_port: ${{ secrets.DEPLOY_PORT }}
        remote_user: ${{ secrets.DEPLOY_USER }}
        remote_key: ${{ secrets.DEPLOY_KEY }}