Edited at

Nuxt.js + CircleCI から SSH でデプロイさせる

nuxt generate して rsync (or scp) でデプロイするまでの CI を組みました。Nuxt.js + CircleCI、CircleCI + SSH それぞれ別個の情報はありましたがこの3つを合わせた情報は見当たらなかったため、備忘録を兼ねて Qiita に残しておきます。


CIサービスの選択

CI サービスは Travis CI や CircleCI が有名で、GitLab を使っているリポジトリなら GitLab CI が良さげという程度かと思いますが、今回は GitHub の private repository から CI させたかったため無料で private を読める CircleCI 一択でした。


config.yml を書く

CircleCI の設定は .circleci/config.yml を書いて行います。今回は以下のようにしました。


config.yml

version: 2

jobs:
generate:
working_directory: ~/workspace
docker:
- image: node:10.15.3
steps:
- checkout # レポジトリの取り込み

# node-modules のキャッシュが存在すれば復元
- restore_cache:
name: Restore yarn package cache
keys:
- v1-yarn-packages-{{ checksum "yarn.lock" }}

- run: yarn install --frozen-lockfile # yarn install

# node-modules をキャッシュ
- save_cache:
name: Save yarn package cache
paths:
- ~/.cache/yarn
key:
v1-yarn-packages-{{ checksum "yarn.lock" }}

- run: yarn run lint
- run: yarn run generate

# generate の生成物を次の deploy ジョブでも使用できるようにする
- persist_to_workspace:
root: '.'
paths:
- dist

deploy:
working_directory: ~/workspace

# rsync を使用するため machine を有効化
machine:
enabled: true
steps:
# persist_to_workspaceで保存したファイルの読み込み
- attach_workspace:
at: '.'

# scp でも良い
- run: rsync -e "ssh -o StrictHostKeyChecking=no" -ahv --delete ./dist/ ${DEPLOY_DEST}

workflows:
version: 2
deploy:
jobs:
- generate
- deploy:
requires:
- generate
filters:
branches:
only: master # master ブランチ以外では deploy を実行しない


以下の記事を参考にさせていただきました。ありがとうございました。

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

Nuxt.js+CircleCIで静的ページをAWSのS3へデプロイする

書いてませんが、テストを走らせる場合は generatesteps に含めるなり job を新たに準備するなりすれば大丈夫です。

1つだけハマったポイントとしては、

      # node-modules のキャッシュが存在すれば復元

- restore_cache:
name: Restore yarn package cache
keys:
- v1-yarn-packages-{{ checksum "yarn.lock" }}

では key*s* ですが

      # node-modules をキャッシュ

- save_cache:
name: Save yarn package cache
paths:
- ~/.cache/yarn
key:
v1-yarn-packages-{{ checksum "yarn.lock" }}

では key なのに気づかずエラーを出して15分ほど悩みました。こんな凡ミスをやらかす方が他にいないとも限らないので念のため。


DEPLOY_DEST の設定

CircleCI の Build Settings / Evironment Variables からデプロイ先を設定します。

SnapCrab_NoName_2019-3-26_14-35-28_No-00.png


SSH Permissions

CircleCI の Permissions / SSH Permissions から秘密鍵を追加します。Hostname は空欄で問題ありません。

SnapCrab_NoName_2019-3-26_14-37-54_No-00.png

お疲れ様でした。master に push すれば yarn generateとデプロイが走るはずです。