この記事を読む価値があるのは、
・WordPressのテーマカスタマイズをGitHubで管理したい。。
・FTPソフトを使うのがメンドー。。
・FTPソフト使うと、いつも不要なファイルもアップロードしてしまう。。
と思っている方にとって、解決策の1つになるのではないかと思っています。
今回は、すでに本番でテーマを運用していて、本番上のテーマを元にリポジトリを作ることを想定して進めます。
【リポジトリ作成】
・GitHub上で新規リポジトリを作成
・エックスサーバーにSSHログイン
・エックスサーバー上でテーマをリポジトリ化
・GitHub上で作成したリポジトリへpush!
【自動デプロイ設定】
・エックスサーバー上で公開鍵・秘密鍵を生成
・GitHubに秘密鍵を登録
・webhook時に実行させるdeploy.phpを作成
・GitHubでwebhook設定
目次
GitHub上で新規リポジトリを作成
GitHubのサイトからリモートリポジトリを新規作成してください。
エックスサーバーにSSHログイン
エックスサーバーの管理画面でSSH設定
・エックスサーバーの管理画面でSSH設定をONにする。
・公開鍵認証用の鍵ペアを生成すると、自動で公開鍵がダウンロードされます。以下の手順でダウンロードされた公開鍵をローカル環境に登録します。
ローカル環境の.sshディレクトリに秘密鍵を登録
秘密鍵のファイル移動
$ mv ~/Downloads/[ サーバーID ].key ~/.ssh/
秘密鍵のファイル名変更
必要ならば、秘密鍵のファイル名を変更します。サーバーIDだけだと分からなくなるので、僕は変更します。
$ mv [ サーバーID ].key [ 変更したい秘密鍵のファイル名 ]
パーミッション(アクセス権)を変更
/.sshディレクトリに対して、所有者のみに「読み込み」「書き込み」「実行」の権限を与えます。
$ chmod 700 ~/.ssh
秘密鍵ファイルに対しては、「実行」できないようにします。
$ chmod 600 ~/.ssh/[ 秘密鍵ファイル名 ]
アクセス権については、以下の3つがあり、それぞれ点数があります。
よく見る「755」などを参考に説明していきます。
「読み込み」→ 4点
「書き込み」→ 2点
「実行」 → 1点
7 → 所有者の権限 「r + w + x」
5 → グループの権限「r + w」
5 → その他の権限 「r + w」
今回の場合だと、所有者に読み込み・書き込み・実行の権限が与えらています。
また、所有者が実行できないようにする際には、「600」などを指定したりします。
エックスサーバーに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の際にパスワードを聞かれる問題の解決
ブランチごとにデプロイ