先日、Wordpressを入れるほどではない小規模なサイトで更新要素をつけたいとのご要望があり
せっかくなのでContentfulを使用してヘッドレスCMS実装させていただきました。
その備忘録です。

TL;DR

Contentfulの更新をちゃんとサーバー側の生成ファイルに反映させたかったので
gitlabのCI/CDを使用して自動デプロイの環境を設定しました。

前提

私はフロントエンドエンジニアで、バックエンドには苦手意識があります。
どれくらい苦手かというと、GUIでFTP入るだけでも本番サーバーだと未だにドキドキするくらいには苦手です(笑)

そんな私なので、コマンドでファイル転送なんて…と思ってやって来ていなかったのですが、
今回は環境的にどうしても自動デプロイを実装したく、喝を入れて頑張りました。

引っかかってる部分がフーン…みたいなところかもしれないし
専門用語の使い方がおかしかった場合も、生暖かく見守っていただければと思います…

ざっくりSTEP

①Nuxt.js + Contentful でのヘッドレスCMS化

詳しく書かれている秀逸な記事などがたくさんありますので
今回はこちらについては詳しく記載しません。

以前にもContentfulは使用したことがあって、そのときはホスティングはNetlifyを使用しました。
Netlifyは自動デプロイ環境がすでに完備されているので、サーバーの指定がなければこっちのほうがシンプルで楽です。
https://qiita.com/webiscuit/items/a93d0eaa051e062b5640

ちなみにここまでの状況でも、サイト自体には更新が反映されます。
ただし、生成ファイルには反映されないので（HTMLファイルなど）
VueではなくてあえてNuxtを選んでいる場合は特にもったいない気がします。

②gitlabリポジトリにて管理

案件は主にgitlabで管理していますので、今回もgitlabです。

③pushなどをトリガーに、ファイルを自動デプロイ設定

masterへのpushや何かトリガーがあった際に
gitlabのCI/CD機能（Gitlab Runner）で任意に設定したジョブを走らせます。

今回はビルドとデプロイの２つのジョブを順番に実行させてます。
ビルドで「nuxt generate」させ、その際に生成されたファイル（dist）を
デプロイでレンタルサーバーの指定ディレクトリへ転送しています。

今回のサーバーは指定のあった、さくらレンタルサーバー（ライト）です。
ライトはSSHをサポートしていないので、FTPSで対応しました。

ジョブの設定

リポジトリ内のルートディレクトリに「.gitlab-ci.yml」というファイルを作成します。
この中にジョブを記述していきます。

このファイルがpushされると、自動的にメニューのCI/CD→パイプラインに
２つのジョブが連結したかたちで追加されすぐに実行されます。
同一の画面内で動作確認やログ確認、キャンセルなどが可能です。

Dockerやlinuxコマンドなども普段あまり使用しないため
いろんな方のソースを見ながら、悪戦苦闘しました

build site:
  image: node:8
  stage: build
  script:
    - npm install --progress=false
    - npm run generate
  artifacts:
    expire_in: 1d
    paths:
      - dist

deploy:
  image: buildpack-deps:jessie-scm
  stage: deploy
  script:
    - apt-get update && apt-get install -y lftp
    - lftp -e "set ftp:ssl-auth TLS; set ftp:ssl-force true; set ftp:ssl-allow yes; set ftp:ssl-protect-list yes; set ftp:ssl-protect-data on; set ftp:ssl-protect-fxp yes; set cmd:fail-exit yes; set net:reconnect-interval-base 4; open -u $FTP_USER,$FTP_KEY $FTP_HOST; mirror -v -R dist $FTP_DIR; quit;"

$FTP_USERなどはgitlabの設定→CI/CD→Variablesで設定しています。

今回はFTPSになってるので、SSHやSFTPなどの場合はdeploy時の記述（後半）を変更します。
linuxコマンドはまだまだ初心者なので、詳細は下記参考リンク先などでご確認ください。

ちなみにサーバーが海外IPからのアクセス制限を行っている場合はエラーになるので、解除が必要です。

参考

環境が違うのでいろいろ改変してしまってますが、こちらの記事などを参考にさせていただきました。
https://qiita.com/ezaki/items/9f22b48e3ad83d226160
https://about.gitlab.com/blog/2017/09/12/vuejs-app-gitlab/
https://qiita.com/piroor/items/00841eeeef74cc7bc7da
https://xtech.nikkei.com/it/article/COLUMN/20140310/542302/

④Contentfulにwebhook設定

ContentfulのSettings→Webhookで該当のリポジトリを設定しました。
トリガーを細かく設定出来るので、とりあえず今回はこんな感じです。

参考

感想

本当はHTMLを直接触って更新してもいいんだけど、、と仰られていましたが
Nuxtを使用していてバージョン管理もしているので、後々バージョン管理がややこしくなるかも、、
というのもあり、今回はこちらの形で実装させていただきました。
GUIで更新出来る方がきっとやりやすいというのもあります。

せっかくContentfulをNuxtで導入しても、サイト側生成ファイルに反映されないと意味がない！
という謎のプロ意識で自分を追い詰めながら実装しましたが、出来てよかったです。