GitHub Actionsで、自作WordPressテーマをmasterブランチにプッシュしたらデプロイされるようにした

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

手順1: サーバー情報4点を確認

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

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

リモートパスとして使用したのは、以下の赤字の部分。

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ファイルに書いていく。

.github/workflows/deploy.yml を作成

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

workflowsの中に、deploy.ymlを作成する。

deploy.ymlの中身を記述する

今回記述したソースコードはこちら。

on:
  push:
    branches:
      - master 
name: Build and Deploy
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/"

以下は、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/"

FTP-Deploy-Actionは、ジョブの一意の識別名。

jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action

nameは、表示用のジョブ名。

jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action

runs-onでは、ジョブの実行環境を指定している。

jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest

stepsは、ジョブを構成する処理のステップ一覧。

    steps:
      - uses: actions/checkout@master
      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@2.0.0

usesには、リポジトリのソースコードを仮想環境に持ってくる処理が書いてある。

    steps:
      - uses: actions/checkout@master
      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@2.0.0

name: FTP-Deploy-Actionは、二つ目のステップ。

    steps:
      - uses: actions/checkout@master
      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@2.0.0

usesには、GitHub Marketplaceで公開されているFTPデプロイ専用のActionを指定している。

    steps:
      - uses: actions/checkout@master
      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@2.0.0

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行では、編集したテーマのパスと、本番アップをしたい先のパスを指定。

// 省略
        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/"