エックスサーバーのWordPressテーマをGitHubで管理&自動デプロイする方法

この記事を読む価値があるのは、

と思っている方にとって、解決策の１つになるのではないかと思っています。

今回は、すでに本番でテーマを運用していて、本番上のテーマを元にリポジトリを作ることを想定して進めます。

GitHub上で新規リポジトリを作成

GitHubのサイトからリモートリポジトリを新規作成してください。

エックスサーバーにSSHログイン

エックスサーバーの管理画面でSSH設定

・エックスサーバーの管理画面でSSH設定をONにする。

・公開鍵認証用の鍵ペアを生成すると、自動で公開鍵がダウンロードされます。以下の手順でダウンロードされた公開鍵をローカル環境に登録します。

ローカル環境の.sshディレクトリに秘密鍵を登録

秘密鍵のファイル移動

$ mv ~/Downloads/[ サーバーID ].key ~/.ssh/

秘密鍵のファイル名変更

必要ならば、秘密鍵のファイル名を変更します。サーバーIDだけだと分からなくなるので、僕は変更します。

$ mv [ サーバーID ].key [ 変更したい秘密鍵のファイル名 ]

パーミッション（アクセス権）を変更

/.sshディレクトリに対して、所有者のみに「読み込み」「書き込み」「実行」の権限を与えます。

$ chmod 700 ~/.ssh

秘密鍵ファイルに対しては、「実行」できないようにします。

$ chmod 600 ~/.ssh/[ 秘密鍵ファイル名 ]

エックスサーバーにSSHログイン！

ログインするには、以下のコマンドを実行します。

$ ssh -l [ サーバーID ] -i [ 秘密鍵ファイルのパス ] [ サーバーID ].xsrv.jp -p 10022

ログインコマンドの簡略化

毎回上記の長いコマンドを打つのは、メンドーなので以下の設定で簡略化してしまいます。

$ mkdir ~/.ssh/config

$ vim = ~/.ssh/config

Host my_server # 任意のコマンド名
  HostName [ サーバーID ].xsrv.jp
  Port 10022
  User [ サーバーID ]
  IdentityFile ~/.ssh/[ 秘密鍵のファイル名 ]
  ServerAliveInterval 60 # sshの自動切断を防ぐために記述

今回の場合だと以下のコマンドでログイン可能です。

$ ssh my_server

エックスサーバー上でテーマをリポジトリ化

ここからは、エックスサーバーにログインした状態で進めていきます。

管理したいディレクトリに移動

[Xserver]$ cd [ ドメイン名 ]/public_html/wp-content/themes/[ テーマ名 ]

テーマをリポジトリ化

[Xserver]$ git init
[Xserver]$ git add .
[Xserver]$ git commit -m "initial commit"

上記のコマンドを実行することで、テーマディレクトリ直下に.gitディレクトリが生成し、Gitの管理が可能になります。

GitHubで作成した新規リポジトリへpush！

[Xserver]$ git remote add origin [ GitHubの新規リモートリポジトリURL ]

[Xserver]$ git push -u origin master

GitHubのリポジトリURLは、GitHub上で取得できます。

webhook時に実行させるdeploy.phpを作成

テーマのディレクトリ直下にdepoy.phpを作成します。

<?php
exec('cd /home/yuyaserver/y-u-y-a-blog.com/public_html/wp-content/themes/jin-child');
exec('git pull -u origin master');
echo "<p>Success auto deployed!</p>";
?>

エックスサーバー上で公開鍵・秘密鍵を生成

エックスサーバー上のホームディレクトリ直下に.sshというディレクトリがあるので移動します。移動したら、以下のコマンドで鍵を生成します。（色々聞いてきますが、全てEnterで大丈夫です。）

[Xserver]$ cd ~/.ssh

[Xserver]$ ssh-keygen -t rsa

Generating public/private rsa key pair. Enter file in which to save the key (/Users/(username)/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

以下のコマンドで公開鍵の中身を確認し、コピーします。

[Xserver]$ vi id_rsa.pub

GitHubに秘密鍵を登録

https://github.com/settings/profileにアクセスして、左側のSSH and GPG keysを開きます。

次に右上の、New SSH keyを選択します。

Title：サイト名など好きな名前で大丈夫です。
Key：先ほどコピーした公開鍵の中身を貼り付けます。

GitHubでwebhook設定

GitHubのサイト上で、settings > webhooksを開いて右上のadd webhookを選択します。

Payload URLの部分でデプロイ先のdeploy.phpまでのURLを指定します。

例：
https://[ ドメイン名 ]/wp-content/themes/jin-child/deploy.php

エックスサーバー上で確認・プロトコル変更

コマンドでSSH接続を確認

再度、エックスサーバーにSSHログインをして、以下のコマンドで接続を確認します。

[Xserver]$ ssh -T git@github.com

Hi (account名)! You've successfully authenticated, but GitHub does not provide shell access.

上記のように返ってきたらOKです！

プロトコル変更

おそらく、今のままでは、GitHubとやりとりする際に、ユーザー名とパスワードが聞かれると思います。

以下のコマンドを実行します。

[Xserver]$ git config remote.origin.url

https://github.com/[ユーザID]/[リポジトリ]

上記のように、https://〜だと、SSH接続がうまくいかないので、次のコマンドで、プロトコルをhttps→SSHに変更します。

[Xserver]$ git remote set-url origin git@github.com:[ユーザID]/[リポジトリ].git

以上で、全ての設定が終わりました！
ローカルから、git pushするだけで本番に反映されると思います！

参考サイト

全体の流れ
SSHログインする方法
自動デプロイ全体概要
GitHubのwebhookで自動デプロイをする方法
本番サーバーで鍵を生成する方法
GitHubに公開鍵を設定する方法
SSHの際にパスワードを聞かれる問題の解決

ブランチごとにデプロイ

Python 3入門+応用+アメリカのシリコンバレー流コードスタイルを学ぶオンライン講座