Nuxt.jsでSSGしたサイトをGitHubからXserverへftpsで自動デプロイする

6237 ワード
GitHubActions ftps nuxt.js xserver xserver テキストリンク

背景

  • クライアントさんがXserverをご所望。
  • mainブランチへpushしたら自動でdeployしたい。
  • 手動deployもできてほしい。
  • すごく急ぎだったため設定にかける時間は最小限に。（ということでrsyncは断念）

Xserverの準備

サブFTPアカウントを作っておく。

GitHub Actionsの設定

想定
- パッケージマネージャはyarnを使用。
- Node.jsは14.xを使用。

FTPのホスト・アカウントをリポジトリのsecretに設定する

リポジトリのSettingsタブ→Serets ページで[New repository secret]ボタンを押して各パラメーターを入力しておく。

Actionを作成する

/.github/workflows/main.yml
name: Deploy

on:
  push:
    branches:
      - main
  workflow_dispatch:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '14.x' # プロジェクトに合わせて

    - name: Get yarn cache directory path
      id: yarn-cache-dir-path
      run: echo "::set-output name=dir::$(yarn cache dir)"

    - name: Cache Node.js modules
      id: yarn-cache
      uses: actions/cache@v2
      with:
        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
        key: ${{ runner.OS }}-yarn-${{ hashFiles('**/yarn.lock') }}
        restore-keys: |
          ${{ runner.OS }}-yarn-

    - name: Install dependencies
      run: yarn install --frozen-lockfile --prefer-offline

    - name: Build
      run: yarn generate

    - name: Deploy
      uses: SamKirkland/FTP-Deploy-Action@2a4e9b1312ebeb73a1f72b9330c71831c1e4ce01 # v4.0.0 のコミットハッシュ
      with:
        server: ${{ secrets.FTP_HOST }}
        username: ${{ secrets.FTP_USER }}
        password: ${{ secrets.FTP_PW }}
        protocol: ftps
        security: strict
        local-dir: dist/
        server-dir: public_html/
        state-name: ../ftp-deploy-sync-state.json # 管理ファイルは公開フォルダの外に置く
        exclude: .nojekyll # Nuxtが親切に作ってくれるけどXserverには要らない

備考

syncではないからゴミが溜まる？ 頻繁に更新するサイトやサイズが大きいサイトなら真面目にsyncの仕組みを設定する、いやむしろNetlifyあたりを提案する方がいいかも。

参考