静的ファイルをCircle CIでビルドしてSSHでデプロイする

静的ページなどをウェブサーバーにデプロイするのをCIに任せたくなったので、Circle CIでの設定をいろいろ凝りつつ作ってみた。

ポイントはbuildジョブとdeployジョブを分けること。

• 結果が見やすくなる。
• それぞれのジョブについてworkflowで処理順や条件を個別に指定できる。
• ジョブ間でファイルを保持する設定が必要だが、そこまで大変ではない。

設定ファイル

解説はコメントで

.circleci/config.yml

version: 2

jobs:
    build:
        docker:
            - image: node:10 # 使いたいDockerイメージを指定
        steps:
            # レポジトリからファイルを取り込む
            - checkout

            # ビルドする (例)
            - run: yarn install --frozen-lockfile
            - run: yarn build

            # [重要] ビルド生成物を次のジョブで使えるよう保持する設定
            - persist_to_workspace:
                root: '.'
                paths:
                    - out # ビルド生成物が含まれる場所を指定

    deploy:
        machine:
            enabled: true
        steps:
            # 上のジョブで保持したビルド生成物を取り込む
            - attach_workspace:
                at: '.'

            # SCPでもいい
            - run: rsync -e "ssh -o StrictHostKeyChecking=no" -ahv --delete ./out/* ${DEPLOY_DEST}

# jobsのみだとbuildしか実行されない。ここで実際の処理順や条件を指定する。
workflows:
    version: 2
    build-and-deploy:
        jobs:
            - build
            - deploy:
                # buildが成功したらdeployを実行する
                requires:
                    - build 
                # masterブランチのみdeployを実行する
                filters:
                    branches:
                        only:
                            - master

CircleCIコンソール内での設定

プロジェクト内の設定を開いて以下を設定する

デプロイ先の環境変数

Build Settings → Environment Variables

デプロイ用のSSHキーを追加

Permissions → SSH Permissions

Hostnameは空でもよい