GitHub Actionsを使用して、自作WordPressテーマを編集した後に自動デプロイを行いました

GitHub Actionsを使用して、本サイトのWordPressテーマを編集した後に、GitHubのmasterブランチにプッシュをすると、エックスサーバーに自動でデプロイされるようにしました。

その過程を記事にまとめておきます。

前提条件

• WordPressで作成されたサイト
• GitHubでソースコードの管理を行なっている
• ソースコードを編集したテーマをエックスサーバーに上げることで、本番反映を行っている

全体の流れ

1. 必要なサーバー情報を確認する
2. GitHubにシークレットの変数を登録する
3. ymlファイルを準備する

手順1: 必要なサーバー情報を確認する

以下4点の情報を確認します。

• FTPサーバー(ホスト)名
• ユーザー名
• パスワード
• リモートパス

以下3点は、「手順2: GitHubにシークレットの変数を登録する」で使用します。

• FTPサーバー(ホスト)名
• ユーザー名
• パスワード

リモートパスは、「手順3: ymlファイルを準備する」のREMOTE_DIR:の値として使います。

FTPサーバー(ホスト)名, ユーザー名

サーバーパネル > サブFTPアカウント設定 > FTPソフト設定 に書いてありました。

パスワード

サーバーパネルにログインするときに使用しているパスワードです。

リモートパス

ファイルをアップロードする先のパスです。

私の場合、FTPソフトにCyberduckを使用していて、アップしたいディレクトリにあった「style.css」上で右クリックを押すと「URLをコピー」が表示され、「FTPS URL」をクリックすると以下のようなパスが取得できました。

ftps://sv10179.xserver.jp/ki-hi-ro.com/public_html/ki-hi-ro.com-2022/wp-content/themes/ki-hi-ro.com-2022/style.css

リモートパスとして使用したのは、以下の赤字の部分です（手順3で使用しました）。

ftps://sv10179.xserver.jp/ki-hi-ro.com/public_html/ki-hi-ro.com-2022/wp-content/themes/ki-hi-ro.com-2022/style.css

手順2: GitHubにシークレットの変数を登録する

手順1で確認した以下の3点を、Git Hubに登録します。

• FTPサーバー(ホスト)名
• ユーザー名
• パスワード

GitHub > Settings > Secrets > Actions で「New repository secret」をクリックすると、以下の入力欄が出てくるので、記入して「Add secret」をクリックします。

Nameに、任意の変数を設定して、Secretにその値を入力します。

例えば、ユーザー名を登録するときは、Nameに「FTP_USERNAME」を、Secretにエックスサーバーの管理画面で確認した「ユーザー名」を入力しました。

FTPサーバー(ホスト)名とパスワードも登録します。

以下のように3つ登録されたことを確認します。

手順3: ymlファイルを準備する

GitHubのmasterブランチにプッシュした段階で、エックスサーバーにアップされるような記述をymlファイルに書いていきます。

手順はこちらです。

1. .github/workflows/deploy.yml を作成する
2. deploy.ymlの中身を記述する

.github/workflows/deploy.yml を作成する

本番反映させたいディレクトリに、.githubというフォルダを作成します。その中で、workflowsというフォルダを作成します。

workflowsの中で、deploy.ymlを作成します。

deploy.ymlの中身を記述する

今回記述したソースコードはこちらです（codepenではymlファイルが無かったので、JSに書いたものを使いました）。

See the Pen deploy.yml by Shibata Hiroki (@khiro-enginner) on CodePen.

最初の4行目までは、masterブランチにプッシュした時に、アクションするような記述を書いています。

on:
 push:
  branches:
   - master 

5行目は、アクションの名前です。

name: Build and Deploy

6行目以降は、アクションの中身を記述しています。

jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@2.0.0
        env:
          FTP_SERVER: ${{ secrets.FTP_SERVER }}
          FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
          LOCAL_DIR: "./"
          REMOTE_DIR: "/ki-hi-ro.com/public_html/ki-hi-ro.com-2022/wp-content/themes/ki-hi-ro.com-2022/"

15〜17行目では、手順2で設定した変数（FTP_SERVER, FTP_USERNAME, FTP_PASSWORD）を使用しています。

// 省略
        env:
          FTP_SERVER: ${{ secrets.FTP_SERVER }}
          FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
          LOCAL_DIR: "./"
          REMOTE_DIR: "/ki-hi-ro.com/public_html/ki-hi-ro.com-2022/wp-content/themes/ki-hi-ro.com-2022/"

最後の2行では、編集したテーマのパスと、本番アップをしたい先のパス（手順1で確認したもの）を指定しています。

// 省略
        env:
          FTP_SERVER: ${{ secrets.FTP_SERVER }}
          FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
          LOCAL_DIR: "./"
          REMOTE_DIR: "/ki-hi-ro.com/public_html/ki-hi-ro.com-2022/wp-content/themes/ki-hi-ro.com-2022/"