Wordpressインストール代行サービはこちら

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

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

まめいぬ

wordpressのローカル開発環境をもっと便利にしたいなぁ。
私はこれまでWEB制作といえばローカルでコーディング→FTPでサーバーにアップって手順が基本だったんですけど、この際サーバーにデプロイするのもほぼオートでできたらなと考えまして。以前小耳に挟んでいたVagrantとVirtualBoxを使った方法で今回その方法を会得したので備忘録として記載しておきます。手順としては下記のような感じです。

  • レンタルサーバーにSSHを通す
  • ver管理と自動デプロイのためにGitを導入
  • Vagrantの設定を行う
  • VirtualBoxをインストールする

XSERVERにSSHを通す方法

SSHとは?SSHを使うと、リモートサーバに安全にログインできたり、ファイルをセキュアに送受信することができたりします。要は今回、ネットワークを介してサーバーにログインしたり、ログインしたマシンでコマンドを実行したいのでXSERVERにSSHを通します。

XSERVERの設定でSSHをONにする

手順

① サーバーパネルの管理画面にログインし「SSH設定」をクリック
② SSHの設定を有効に。「ONにする」をクリック
③ 『公開鍵認証用鍵ペアの生成』タブを選択しパスフレーズを入力し、『公開鍵認証用の鍵ペア生成(確認)』をクリック。公開鍵認証用の秘密鍵「(サーバーID).key」ファイルがダウンロードされる。※SSH接続時に使用するパスなので任意の物を設定。
④ DLした鍵ファイルは好きなところに配置して構わないが以後の設定で ~/Downloads にある方がやりやすいので私の場合は任意の保管場所にまずDLし、.keyファイルをコピーして ~/Downloadsにも配置。(ファイルが2個ある状態)

ターミナルで操作(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ディレクトリと秘密鍵のパーミッション(アクセス権限)を変更

まめいぬ

パーミッションとは、ファイルやディレクトリに対するアクセス権のこと。 複数のユーザーが1台のパソコンを共有する場合、自分のファイルを他人に不正に操作されないようにするためのアクセス権(パーミッション)を設定することができます。 アクセス権を正しく設定することで、大切なファイルを守ることができる。

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

$ chmod 700 ~/.ssh
POINT※パーミッション700の意味
7 = そのファイルの所有ユーザーに4(読み取り)、2(書き込み)、1(実行)を許可。
0 = そのファイルの所有ユーザーの属するグループに何も許可しない。
0 = その他の第三者に何も許可しない。

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

$ chmod 600 ~/.ssh/id_xserver_rsa
POINT※パーミッション600の意味
6 = そのファイルの所有ユーザーに4(読み取り)、2(書き込み)を許可。
0 = そのファイルの所有ユーザーの属するグループに何も許可しない。
0 = その他の第三者に何も許可しない。

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ログインの簡略化

まめいぬ

ここまで毎回コマンドを打つのは大変なのでログインを簡略化しましょう。
① まずはじめに.sshフォルダに config という書き込みファイルを作成(既にある人は省略)

$ 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':

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

まめいぬ

ちなみに色々やっていると.ssh フォルダに「known_hosts」というファイルも作成されますが気にしなくて大丈夫。過去のアクセス歴などが保存されるファイルです。あ、ssh接続を切断する場合はターミナルで exit を打つように。

XSERVERにGitをインストール

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

$ ssh sample

または

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

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

//作業用ディレクトリ
mkdir src
//実行ファイル置場
mkdir opt

3: gettextの導入

まめいぬ

2種類の作業ディレクトリを作成したら次は下記のコマンドで「gettext」を導入しましょう。Gitではこのgettextを内部で利用しているため、はじめに導入しておく必要があります。gettex公式サイトで最新版を確認しておきましょう。
//作業用ディレクトリへ移動
$ 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>

viに入力PATH=$HOME/opt/bin:$PATH

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

まめいぬ

上記でうまく行かなかった場合は「make clean」コマンドなどで中間ファイルを一旦すべて削除してから、ビルドしなおしてみよう。
・次のコマンドで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

まめいぬ

「HEAD branches config description hooks info objects packed-refs refs」と表示されればOK

post-receiveの作成

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

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

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

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

まめいぬ

※ vi追記方法
エディタが開くのでキーボードの「i」を押して編集モードにします。
編集モードになるとエディタのステータスが「– INSERT –」になります。
この状態で下記を入力
vi編集モード#!/bin/bash

cd ~/sample.com/public_html
git –git-dir=.git pull ~/sample.com/sample.com.git master

・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 の一番先頭

タイトルHost *
UseKeychain yes
AddKeysToAgent yes

これで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」に移動しておく。

まめいぬ

既にプロジェクトフォルダをローカルにクローンしている場合は次項の「vccw」の手順は無視し、「Vagrantを起動させてVCCWでのローカル環境を確認へ移動してね。
//新しくプロジェクトフォルダを作成する場合
$ mkdir ~/[PATH]/[DIRECTORY_NAME]
//フォルダへの移動または既にあるフォルダに移動する場合
$ cd ~/[PATH]/[DIRECTORY_NAME]

vccwをインストールしよう

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

まめいぬ

gitでクローンする場合はプロジェクトフォルダ内で下記コマンドを実行。
$ git clone https://github.com/vccw-team/vccw.git

Vagrant Boxの追加

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

$ vagrant box add vccw-team/xenial64
成功メッセージ==> box: Successfully added box ‘vccw-team/xenial64’ (v20180107) for ‘virtualbox’!

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

時間超過エラーメッセージAn error occurred while downloading the remote file. The error
message, if any, is reproduced below. Please fix this error and try
again.

*************, errno 60

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」ファイルで設定をすることで変更可能とのこと。

アクセス情報// ホスト名の場合(デフォルト)
http://vccw.test/

// IPアドレスの場合(デフォルト)
http://192.168.33.10/

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

まめいぬ

という訳で長くなってしまいましたが、VagrantとVirtualBoxを用いてwordpressの開発環境を構築し、本番環境に自動デプロイする方法でした。