More than 5 years have passed since last update.

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

Posted at 2020-03-25

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

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

今回作るもの

コンテンツ管理者がmicroCMS上でコンテンツ更新を行う。
microCMSがGithubへWebhookを送信する。
GithubがWebhookを受信し、Github Actionsで静的HTMLを生成する。
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 # ★