VagrantとVirtualBoxでWordPressの開発環境を構築

WordPressの開発環境をローカルに置きたい

XSERVERにSSHを通す方法

XSERVERの設定でSSHをONにする

ターミナルで操作（MAC ver）

ここからターミナルで操作を行います。私はMACなのでMACの手順になりますがWinの方も検索するとたくさん出てくるかと思います。

① .SSHディレクトリ（.が付くと隠しファイルになる）を作成するため下記をターミナルでEnter

$ mkdir ~/.ssh

→ これで /Users/<ユーザー名>/.ssh が作成された。

② Downloads内の ◯◯.key ファイルを .ssh に移動

$ mv ~/Downloads/◯◯.key ~/.ssh/

→ これで /Users/<ユーザー名>/.ssh 内に ◯◯.key が移動される。

秘密鍵のファイル名を変更

通常、常識という意味でファイル名は「id_rsa」にするのが普通らしいが、私の場合は他のssh鍵も使いそうだったのでわかりやすく任意の鍵名を付けました。今回は id_sample_rsa で設定。

① まずは .ssh フォルダに移動

$ cd ~/.ssh/

② .sshフォルダに移動した ◯◯.key の名前を変更

$ mv ◯◯.key id_sample_rsa

③ .sshディレクトリと秘密鍵のパーミッション（アクセス権限）を変更

.sshフォルダのパーミッションを変更

$ chmod 700 ~/.ssh

id_sample_rsa のパーミッションを変更

$ chmod 600 ~/.ssh/id_xserver_rsa

XserverにSSHアクセスを実行

以下のコマンドをターミナルで打つ。

$ ssh -l サーバーID -i 秘密鍵ファイル名(今回はid_sample_rsa) サーバーID.xsrv.jp -p 10022

※ サーバーID = Xserverのサーバーパネル > アカウントデータ > サーバーIDの箇所

初めて接続する場合は下記を聞かれるかも

Are you sure you want to continue connecting (yes/no)?

→ 「yes」と打ってEnter

SSH接続パスワードを聞かれたら

Enter passphrase for key 'id_sample_rsa':

→ 上記のように聞かれたら、Xserver場で公開鍵を作成する際に設定したパスワードを入力。

SSHログインの簡略化

$ mkdir ~/.ssh/config

② configファイルに内容を記述

$ vi ~/.ssh/config

③ エディタが開くのでキーボードの「i」を押して編集モードにします。（※編集モードになるとエディタのステータスが「– INSERT –」になるよ。）この状態で下記を入力。

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

※ #コメント の部分は必ず消してね。

configファイルを上書き保存して終了

上記の入力が終わったら「編集モード」から「コマンドモード」に抜けたいので ESC を押す。
④ 「:wq」を打ってviを終了。（:wq = viの内容を保存して終了という意味）

簡単にSSHアクセスできるか確認

⑤ 最後にコマンドラインで下記を打ってみる。

$ ssh sample

この時configファイルが正常に読み込まれていれば 公開鍵のパスワードを聞かれる。

Enter passphrase for key 'id_sample_rsa':

パスワードを打って接続に成功すれば接続簡易化も終了！お疲れ様〜。

XSERVERにGitをインストール

１： xserverにsshでログイン
→ 前述の .ssh/config にssh簡易ログイン情報を記載済みの方は以下でログイン可能

$ ssh sample

または

$ ssh -l サーバーID -p 10022 サーバーID.xsrv.jp

２：　ログインしたらまずは作業ディレクトリと実行ファイル置き場を作成。

//作業用ディレクトリ
mkdir src

//実行ファイル置場
mkdir opt

３： gettextの導入

//作業用ディレクトリへ移動
$ cd src

//gettextを取得
$ wget "http://ftp.gnu.org/gnu/gettext/gettext-latest.tar.gz"

//解凍
$ tar zxvf gettext-latest.tar.gz

//解凍されたフォルダへ移動
$ cd gettext-<バージョン>
$ ./configure --prefix=/home/<サーバーID>/opt
$ make
$ make install

//インストールができたか下記のコマンドで確認
$ ~/opt/bin/gettext --version

gettext (GNU gettext-runtime) XX.XX.XX
と表示されればOK！

//gettextのコマンドラインツールを利用できるようにするため、
//「export PATH=$HOME/opt/bin:$PATH」を追加

$ cp ~/.bashrc ~/.bashrc.bk
$ vi ~/.bashrc

<span class=”under-y”>※ vi追記方法
エディタが開くのでキーボードの「i」を押して編集モードにします。編集モードになるとエディタのステータスが「– INSERT –」になります。この状態で下記を入力。</span>

configファイルを上書き保存して終了

上記の入力が終わったら「編集モード」から「コマンドモード」に抜けたいので ESC を押します。

・ 「:wq」を打ってviを終了
・ 下記のコマンドで再読み込み

//再読み込み
$ source ~/.bashrc

curlの導入

GitでHTTPS（SSL）を使えるようにするため、curlを導入します。

$ wget http://curl.haxx.se/download/curl-7.46.0.tar.gz
$ tar zxvf curl-7.46.0.tar.gz
$ cd curl-7.46.0
$ ./configure --prefix=/home/サーバーID/opt
$ make
$ make install

これでcurlが導入できました。下記コマンドで確認。

$ curl -V

curl 7.46.0 (x86_64-pc-linux-gnu)
最後にGitを導入してみよう。

gitを導入しよう！

$ cd ~/src
//Git本体を取得
$ wget https://github.com/git/git/archive/master.zip
$ unzip master.zip
$ cd git-master
$ autoconf
$ ./configure --prefix=/home/<サーバーID>/opt
$ make -i all
$ make -i install

・次のコマンドでGitの導入を確認。

$ git --version

git version 2.7.0.GIT などと表示されればOK！！

gitの初期設定を行う

次のコマンドで、Gitの初期設定をおこなっておくと良い。

$ git config --global user.email "you@example.com"
$ git config --global user.name "Your Name"

xserverにsshログインしてリポジトリ設定をおこなう

エックスサーバーにSSHでログイン後、public_htmlで公開しているファイルをGitで管理できるようにしておきます。

$ ssh sample
$ cd ~/<wordpressがインストールされているドメイン(sample.com)>/public_html/wp-content/themes/[テーマフォルダ]
$ git clone --bare --shared ~/public_html/wp-content/themes/[テーマフォルダ] sample.com.git</wordpressがインストールされているドメイン(sample.com)>

これで、「公開しているファイルのベアリポジトリ」が生成され他はず。Cyberduckなどでサーバーにftp接続して実際にフォルダが出来ているか確認してみると良いかも。

ベアリポジトリはかんたんに説明すると、「ワーキングディレクトリを持たないリモート用のリポジトリ」です。共有リポジトリとも呼ばれています。

上記のコマンドでは「git clone –bare –shared」を使って、公開用のリポジトリから「sample.com.git」という名前のベアリポジトリを作成しています。lsコマンドなんかで中身を見てみよう。

$ ls sample.com.git

post-receiveの作成

次は、今作成したベアリポジトリ内の「hooks」に「post-receive」というファイルを作成。hookでプッシュを感知し、post-receiveを使って「公開ディレクトリからベアリポジトリをpullする」といった設定をおこないます。

・次のコマンドを続けて入力。

$ cd sample.com.git/hooks
$ vi post-receive

viで次のとおり記述します。

・configファイルを上書き保存して終了
上記の入力が終わったら「編集モード」から「コマンドモード」に抜けたいので ESC を押します
・「:wq」を打ってviを終了。（:wq = vi 内容を保存して終了）

「–git-dir」を利用することで、指定したgitコマンドが使えるようになる。単純に「ベアリポジトリ（okutani.net.git）からpullをおこなう」といったコマンドを記述しているだけね。

・次のコマンドでpost-receiveに実行権限を付けておく。

$ chmod +x post-receive

これで、次のことが実現できるようになりました。

① ローカルから本番環境のベアリポジトリへプッシュ
② ベアリポジトリのhookがプッシュを感知し、post-receiveが動作
③ 本番環境にあるGitリポジトリが、ベアリポジトリへpullをおこなう

ローカルに本番環境からファイルをpullしてみる

まずは下記のコマンドでsshから抜ける。

$ exit

・まずはgit cloneで本番環境のベアリポジトリからリポジトリをクローンしてみる。

$ git clone sample<configに記載したhostの部分>:~/sample.com/sample.com.git</configに記載したhostの部分>

パスワードを聞かれたら公開鍵のパスワードを入力。これで本番環境のファイルを含んだローカルリポジトリが取得できる。

・ターミナルで下記のコマンドを入力

$ git pull

すると自身のPCに本番環境のpublic_html内のフォルダが同期（ダウンロード）されます。

実際にローカル環境から本番環境にファイルをpushしてみよう

$ cd sample.com
$ touch test-file #この時点で自分のローカルのsample.comフォルダにtest-fileが追加されていると思います。
$ git add -A
$ git commit -m "add test-file"
$ git push origin master

これでcyberduckなどで本番環境のpublic_html内を見てみると、test-fileが追加されているはず！追加されていれば、git pushだけで本番環境に自動デプロイすることが今後可能になったということですね。

sourcetreeでコミットできるようにする

・sourcetreeを開き「既存のローカルリポジトリを追加」をクリック
・sample.com を選択

それだけ。ただしこのままだとプルなどをするときにいちいちパスやホスト名を聞かれるので .ssh/config に下記を追記する

・.ssh/config の一番先頭

これでgit経由でSSH接続→コミットの準備は完了。

VirtualBoxをインストールしよう

まずはVartualBoxが必要となるため、公式サイトからインストーラーをダウンロードする。

インストール後、ターミナルで下記コマンドを入力しインストールの確認をし、詳細情報が表示されたらOK。

$ VirtualBox --help

Vagrantをインストールしよう

Vagrantを同様に、公式サイトからインストーラーをダウンロードしてこよう。

インストール後、ターミナルで下記コマンドを入力しインストールの確認。

$ vagrant -v

vagrant-hostsupdaterのインストール

hostsupdaterはVagrantのプラグインで、ホストOSの設定ファイル（/etc/hosts）へゲストOS情報の追加や削除を行うのに必要。下記コマンドでインストールする。インストール後はバージョンの確認を。

$ vagrant plugin install vagrant-hostsupdater

// インストール後の確認（vagrant-hostsupdaterのバージョンが表示されたらOK）
$ vagrant plugin list

プロジェクトフォルダの作成と移動

vagrantを起動するプロジェクトフォルダを作成します。私の場合、Gitの導入の部分で既にXSERVERからローカルにWordpressのプロジェクトフォルダをクローンしているので、そのフォルダ内の「Thema」に移動しておく。

//新しくプロジェクトフォルダを作成する場合
$ mkdir ~/[PATH]/[DIRECTORY_NAME]

//フォルダへの移動または既にあるフォルダに移動する場合
$ cd ~/[PATH]/[DIRECTORY_NAME]

vccwをインストールしよう

VCCWの公式サイトからzipファイルをインストールし、解凍した「vccw」フォルダの中身をプロジェクトフォルダ内に入れる（もしくはリネーム）か、gitからクローンする。

$ git clone https://github.com/vccw-team/vccw.git

Vagrant Boxの追加

下記コマンドで仮想環境のイメージとなるVagrant Boxを追加する。サイズが大きく、多少時間がかかる場合があるが、完了したらメッセージが表示される。

$ vagrant box add vccw-team/xenial64

この時、ダウンロードに時間がかかりすぎて下記のようなエラーが出ることがある。そんな時はイメージ自体ファイルサイズが大きいため通信速度を確認するか、時間帯を変えて再度試してみよう。

Vagrantを起動させてVCCWでのローカル環境を確認

ここまでの作業が完了したら、プロジェクトフォルダにて下記コマンドを実行し、Vagrantを起動させる。途中でパスワードの入力を求められますので、PCの管理者権限でのパスワードを入力します。初回は少し時間がかかるようです。

$ cd ~/[PATH]/[DIRECTORY_NAME]
$ vagrant up
・
（省略）
・
==> vccw.test: [vagrant-hostsupdater] This operation requires administrative access. You may skip it by manually adding equivalent entries to the hosts file.
Password: [PCでの管理者権限のパスワードを入力]
・
（省略）
・
PLAY [all] **************************************************************************
・
（省略）
・
PLAY RECAP *********************************************************************
vccw.test : ok=70 changed=63 unreachable=0 failed=0

これでVagrantの環境内にWordPressがインストールされていきます。PLAY RECAP ****のメッセージが表示されたら完了!!また、VartualBoxのコントロールパネルでVagrantのVCCWイメージが起動しているのが確認でき、起動できていれば下記画像の「電源オフ」の部分が「実行中」に変わる。

ちなみにデフォルトではローカルのホスト名もしくはIPアドレスをブラウザでアクセスすると、サイトが表示されているのが確認できる。これらのアクセス情報は「site.yml」ファイルで設定をすることで変更可能とのこと。

これで無事にローカルからwordpressにログインできれば成功！Themaは既にGitクローンしていると思うので、ローカルwordpress側の設定で本番環境と同じになるはず。この環境でコードをいじればGitが感知して変更内容を本番環境にデプロイできるんですね。いやー便利便利。