ヘッドレスCMS × Static Site GeneratorでJamstackなサイトをFTPを使ってデプロイする #Nuxt

前回：ヘッドレスCMS × Static Site GeneratorでJamstackな爆速表示サイトを作ってみるチュートリアル
前回からの続きです。

前回は、GithubとNetlifyを連携させて、microCMSで更新があった際に、Netlify上でビルドし、デプロイする流れで作成しました。
ただ、FTPなどでアップロードするケースも未だに多々ありますので、今回はmicroCMSで更新があった際にGithub Actionsでビルドし、FTPで公開サーバにアップロードする手順を記載していきます。
※設定やソースコードは前回のものをベースに進めます。

今回作るもの

1. コンテンツ管理者がmicroCMS上でコンテンツ更新を行う。
2. microCMSがGithubへWebhookを送信する。
3. GithubがWebhookを受信し、Github Actionsで静的HTMLを生成する。
4. Github Actionsで公開サーバへ資産をFTPでWebサーバへデプロイする。

事前準備

コンテンツ公開用のサーバへFTP接続可能にしておく。
さくらレンタルサーバーを利用する際は、Githubサーバ(海外)からのアクセスを許可しておくこと！！
Github > Developer settings > Personal access tokens から repo に権限を付与したGithub Tokenを作成しておく。

作り方

Step.1 Github Actionsの設定

Step.1-1 環境変数の設定

他の人に知られたらまずい、サーバ接続情報をリポジトリ > Setings > Secretsで設定します。
※今回はFTP接続情報

Step.1-2 Github Actionsの定義の作成

以下のようなワークフローを作成し、リポジトリにPUSHします。

.github/workflows/main.yml

on: repository_dispatch
name: Publish Website
jobs:
  FTP-Deploy-Action:
    # ubuntu環境にmasterブランチをチェックアウト
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master

    # ビルド用NodeJS12.xをセットアップ
    - name: Use Node.js 12.x
      uses: actions/setup-node@v1.4.1
      with:
        node-version: '12.x'

    # ビルド環境の構築+ビルド
    - name: Build Project
      run: |
        npm install
        npm run generate

    - name: List output files
      run: ls dist/

    # FTPアップロード
    - name: FTP-Deploy-Action
      uses: SamKirkland/FTP-Deploy-Action@2.0.0
      env:
        # FTPサーバー名
        FTP_SERVER: ${{ secrets.FTP_SERVER }}
        # FTPアカウントのユーザー名
        FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
        # FTPアカウントのパスワード
        FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
        # どのディレクトリのデータをアップロードするか
        LOCAL_DIR: dist/
        # リモートのどのディレクトリにアップロードするか
        REMOTE_DIR: ${{ secrets.FTP_REMOTE_DIR }}
        ARGS: --delete # ★

実験する場合はまずは、★の行をコメントアウトすることをオススメします。
設定をミスってるとサーバの意図しないファイルが吹っ飛ぶ場合もあるので。。。

※SamKirkland/FTP-Deploy-Action@3.0.0を使おうとしましたが、distディレクトリが同期できなかったため泣く泣く2.0.0を利用。。。
　（./をまるっとFTP転送してみると、Actions内で作成されるnode_moduleやdistがなかった）

Step.2 microCMS側

Step.2-1 Webhookの設定

microCMSのAPI設定>Webhook からGithubActionsの設定を行います。

Step.3 動作確認

microCMSでなにかコンテンツを公開すると、Github Actionsが実行され、指定されたFTPサーバにファイルがアップロードされます。

実行したActionsの詳細なログも確認できます。

おわりに

Github Actionsはnpmみたいに他の人が公開しているテンプレートを使えるので、よくあるworkflowなら楽に作成できる。
資産デプロイは多少時間がかかるため、資産削除→デプロイの流れで実施する場合は、何かしらの工夫をしないとサイトが見れなくなるダウンタイムが発生する。