こんにちは。前回に引き続き、WordPressとGatbyの連携について書いていきます。今回はGithubに上げたGatsbyプロジェクトのビルドとデプロイをGithub Actionsを用いて自動化する方法を書いていきます。

 

用意するもの

  • 自分のGatsbyプロジェクトがあるGithubのリポジトリ
  • Github ActionsのWorkflow
  • デプロイ先(今回はVPS)

Github Actionsについて

Github ActionsはGithubが用意しているCI/CD(Continuous Integration, 継続的インテグレーション/Continuous Delivery, 継続的デリバリー)ツールで、Githubのコミットなどに合わせてWorkflowを動作させることができます。これをGatsbyプロジェクトのコミットに合わせてGatsbyのビルドと生成されたHTMLのデプロイをGithub Actionsで行うことで、ソースコードの変更を自動で公開先に反映することができます。図にすると以下のような感じです。

こんな感じでローカルで作成したソースコードをGithubにプッシュするだけでビルドからデプロイまで行ってくれます。よって開発者はローカルでテストしてからプッシュする部分だけに注力できます。Github ActionsのWorkflowはYAMLで書かれており、リポジトリの.github/workflowsディレクトリ内に保存することで利用できます。また、他の人が書いたWorkflowを自分のファイルにインポートして利用する事ができるマーケットもあります。

Workflow例

前置きはここまでにして、以下にこのサイトでのWorkflow例を示します。

yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
name: Build and Deploy Gatsby

on:
  push:
    branches:
      - master
  repository_dispatch:
    types: [build]

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Line notify
        uses: snow-actions/line-notify@v1.0.0
        with:
          access_token: ${{ secrets.LINE_ACCESS_TOKEN }}
          message: start Github Actions
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: 12.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 i
      - run: npm run build --if-present
      - name: Install SSH key
        uses: shimataro/ssh-key-action@v2
        with:
          key: ${{ secrets.SSH_KEY }}
          name: id_rsa_vps
          known_hosts: ${{ secrets.KNOWN_HOSTS }}
          config: ${{ secrets.CONFIG }}
      #- name: Setup tmate session
      #  uses: mxschmitt/action-tmate@v1
      - name: rsync over ssh
        env:
          destination: ${{ secrets.RSYNC_DESTINATION }}
        run: rsync -r --delete ./public/ config:$destination
      - name: ssh do
        env:
          sshDo: ${{ secrets.SSH_DO }}
        run: $sshDo
      - name: Line notify
        uses: snow-actions/line-notify@v1.0.0
        with:
          access_token: ${{ secrets.LINE_ACCESS_TOKEN }}
          message: finish Github Actions

 

解説

流れとしては、LINE NotifyにGithub ActionsのWorkflowの開始と終了を通知させ、Nodeを導入してパッケージのインストール・ビルド、ssh rsyncでVPSにHTMLをデプロイといった流れです。ビルド毎にnpm installするのは時間がかかるため、キャッシュを用いて高速化しています。

secrets

上記の中で「secrets.変数名」となっている部分はGithubのSettingから設定できます。これはパスワードやアクセストークンなどの秘密情報を外部に漏らさないための機能です。

#

途中でコメントアウトしている部分はGithub Actionsを任意の場所で止めてGithub ActionsのマシンにSSHするためのWorkflowです。テストに使っていたものです。

Workflowを実行するタイミング

yaml
1
2
3
4
on: 
    push: 
        branches: 
            - master

上記の部分でWorkflowを実施するタイミングを設定しています。これはmasterブランチにpushがあった場合に実行されます。

sshについて

大抵の場合、VPSへのアクセスは公開鍵認証で行っているかと思います。Github Actionsで公開鍵認証を伴ったsshを行うときにはGithub Actionsのマシンで毎回.ssh周りを整える必要があります。そのへんを整えてくれるのが下記のWorkflowになっています。詳しい解説は以下の記事にあるので読んで見て下さい

https://qiita.com/shimataro999/items/b05a251c93fe6843cc16

これにてGatsbyのビルドとデプロイがGithubの管理だけで簡単に行えるようになりました。次回はWordPressでの記事の公開・更新に合わせてこのWorkflowを実行する方法について解説します。

 

以上です。お読みいただきありがとうございます。またよろしくお願いします。

参考

https://blog.yucchiy.com/2020/02/deployment-to-self-hosted-server-for-gatsbyjs/


2020.03.25 04:02  2020.04.17 17:22