WordPressテーマ開発 – GitHub Actionsを使用したデプロイの自動化 to XServer

2025年8月3日公開 / 2025年8月6日更新

GitHub Actions を使用して, mainブランチを更新した際に、XServerに自動でデプロイされるように設定していきます。

TypeScriptとSCSSのビルドもGitHub Actionsで行います。

FTPユーザの作成

デプロイに使用するFTPユーザを作成します。今回はXServerにデプロイするので、XServerの管理画面からFTPユーザを作成しました。

今回はここで接続先ディレクトリをワードプレスのテーマディレクトリに設定しておきます (/home/user/hogehoge/public_html/wp-content/themes)

GithubでSecretsを設定

FTPユーザの情報をGithubのSercretsに設定します。

以下の３つを設定します

・FTP_SERVER (FTPサーバー（ホスト）名 ???????.xserver.jp)

・FTP_USERNAME

・FTP_PASSWORD

deploy.ymlの作成

.github/workflows/deploy.yml を作成し、デプロイ処理を記述していきます

.github/workflows/deploy.yml

name: Deploy to production server via FTP

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      # リポジトリをクローン
      - name: Checkout repository
        uses: actions/checkout@v4

      # Node.js環境をセットアップ
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"

      # npm パッケージのインストール
      - name: Install dependencies
        run: npm ci

      # ビルド処理 (TypeScript, SCSS)
      - name: Build assets
        run: npm run build

      # FTP アップロード
      - name: FTP Deploy
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: ./tararan-theme/
          local-dir: ./tararan-theme/

name: Deploy to production server via FTP

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      # リポジトリをクローン
      - name: Checkout repository
        uses: actions/checkout@v4

      # Node.js環境をセットアップ
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"

      # npm パッケージのインストール
      - name: Install dependencies
        run: npm ci

      # ビルド処理 (TypeScript, SCSS)
      - name: Build assets
        run: npm run build

      # FTP アップロード
      - name: FTP Deploy
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: ./tararan-theme/
          local-dir: ./tararan-theme/

※リポジトリのディレクトリ構造は以下のようになっていて、テーマのディレクトリ(tararan-theme)のみFTPアップロードしています

…設定完了！！

デプロイが楽になった🐪