GitHubで管理してるWordPressのテーマをWP Pusherで自動デプロイする
当ブログのWordPressのテーマをGitHubで管理していて、リモートにプッシュ・マージするたびにEC2にSSHで接続して手動でgit pullしていたのですが、自動化したいと思い「WP Pusher」というWordPressのプラグインを導入しました。
GitHub Actionsとどちらにしようか迷ったのですがWP Pusherの方が簡単そうだったのでこちらにしました。
実行環境
- EC2に既にテーマをアップロード済み
- 該当リポジトリは公開(public)
- ブランチはdevelopとmainの2つ。developで開発後リモートにプッシュ、GitHub上でプルリク作成しdevelopからmainにマージ(このmainにマージしたタイミングで本番にデプロイしたい)
WP Pusherのインストール
まずWP Pusherのサイトに行ってトップページの「Download」ボタンからプラグインをダウンロードします。(WP Pusherは公開リポジトリの場合無料で利用できます)
![WP Pusher トップページ](https://prod-files-secure.s3.us-west-2.amazonaws.com/3b8084dc-07d1-4420-98b2-e8e14c2bc711/c6d16b63-4b4c-43ef-9712-b952f3589542/p_41_1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T035308Z&X-Amz-Expires=3600&X-Amz-Signature=b2cb8948ecf3e94c658f09e5898708e5e1930b8ee7284752674a44d565d2930e&X-Amz-SignedHeaders=host&x-id=GetObject)
次に「プラグイン」→「新規追加」から先ほどダウンロードしたプラグインをzipファイルのままアップロードし、有効化します。
![WordPress プラグインのインストール](https://prod-files-secure.s3.us-west-2.amazonaws.com/3b8084dc-07d1-4420-98b2-e8e14c2bc711/b3a59405-1b0d-4d90-8f88-c0082a096d38/p_41_2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T035308Z&X-Amz-Expires=3600&X-Amz-Signature=dfad549ace2deb96de120201e22463bd0c4e8daebdb6060a6e0a1287ea1be2e0&X-Amz-SignedHeaders=host&x-id=GetObject)
WP Pusherの設定
プラグインのインストールが完了したらWP Pusherの設定を行なっていきます。 今回はテーマの自動デプロイを行うので「WP Pusher」→「Install Theme」と進みます。
設定項目は以下の4つ。
Repository host | GitHubにチェック |
---|---|
Theme repository | [AccountName]/[RepositoryName] の形式で入力 |
Repository branch | デプロイするブランチ名を入力 |
Link installed theme | 既にテーマファイルをアップロードしているのでチェックを入れます |
![WP Pusher テーマインストール画面](https://prod-files-secure.s3.us-west-2.amazonaws.com/3b8084dc-07d1-4420-98b2-e8e14c2bc711/0b07fbcd-54a2-41a8-bc1d-1bc6f87a47c6/p_41_3.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T035308Z&X-Amz-Expires=3600&X-Amz-Signature=23e07338b987511e0a2fa09e81a4cabfd4a5ce2c9d7d65ed0525740713c23352&X-Amz-SignedHeaders=host&x-id=GetObject)
入力が完了したら左下の「Install theme」ボタンを押してインストール。
インストールが完了したら、「WP Pusher」の「Theme」画面に行きます。
![WP Pusher インストール済みテーマ画面](https://prod-files-secure.s3.us-west-2.amazonaws.com/3b8084dc-07d1-4420-98b2-e8e14c2bc711/74e68c9e-d62e-441d-9641-922bf4e1cbe9/p_41_4.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T035308Z&X-Amz-Expires=3600&X-Amz-Signature=fd73c7fa59d61a746e9ac6befd62accf271a22b23dd7b7b1e5964abb54b3bbba&X-Amz-SignedHeaders=host&x-id=GetObject)
先ほどインストールしたテーマが表示されているはずですので、「Show Push-to-Deploy URL」ボタンをクリックして下に表示されたURLをコピーしてください。 これでWP Pusher側の設定は完了です。
GitHubの設定
次にGitHubでwebhookを追加します。
該当リポジトリの「Settings」→「Webhhoks」と進み「Add webhook」をクリックします。
![GitHub webhook追加手順](https://prod-files-secure.s3.us-west-2.amazonaws.com/3b8084dc-07d1-4420-98b2-e8e14c2bc711/17da6633-b50a-43f8-8eec-ba12eac4d512/p_41_5.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T035308Z&X-Amz-Expires=3600&X-Amz-Signature=86cbf4fb90cc68b3c28d1721e601c6b20f22c63080bd9186dca90ec58f89c13d&X-Amz-SignedHeaders=host&x-id=GetObject)
「Payload URL」にWP Pusherの設定画面からコピーしたURLをペーストし、「Let me select individual events.」を選択します。
![GitHub webhook追加画面](https://prod-files-secure.s3.us-west-2.amazonaws.com/3b8084dc-07d1-4420-98b2-e8e14c2bc711/3b070b9c-723d-47eb-929e-50c2ad6affe0/p_41_6-1600x1254.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T035308Z&X-Amz-Expires=3600&X-Amz-Signature=e6ad590a8c996c21e87e11d671717d90450d089b28f746b383148862586adf06&X-Amz-SignedHeaders=host&x-id=GetObject)
下にスクロールしていき、「Pull requests」にチェックを入れ、左下の「Add webhook」ボタンを押して追加します。
![GitHub webhook 「Pull request」にチェック](https://prod-files-secure.s3.us-west-2.amazonaws.com/3b8084dc-07d1-4420-98b2-e8e14c2bc711/85a1c4f3-92c1-4708-872c-4a9b5a8d34d0/p_41_7-1600x478.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T035308Z&X-Amz-Expires=3600&X-Amz-Signature=2995a337a7709ff9c12df880a4cdbbaf4ecfa79a5fd6da7940d17d8c38e0de28&X-Amz-SignedHeaders=host&x-id=GetObject)
これで全ての設定が完了です。
あとはdevelopブランチでリモートにプッシュし、mainブランチにマージしたタイミングで自動でデプロイされるようになります。