背景
- クライアントさんが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あたりを提案する方がいいかも。