Virtual Box+Vagrantを使ってローカル環境で既存のCakePHPアプリを動かす

はじめに

転職先でリリース済みサービスの開発に途中から参加することになり、テスト環境としてローカル環境を作ってアプリを動すために構築した手順を備忘録として残したいと思い投稿しました。

目次

1. VirtualBox,Vagrantのインストール
2. Vagrantfileの作成、各種編集
3. vagrant upの実行
4. 既存アプリのクローン
5. Apacheのhttpd.confの編集
6. MySQLの設定、アプリとの接続
7. 本番環境DBのダンプ→ローカルDBへリストア
8. ブラウザで接続確認

手順

1. VirtualBox,Vagrantのインストール

それぞれのHPからOSにあったものをダウンロードします。

Virtual Box↓
https://www.virtualbox.org/
Vagrant↓
https://www.vagrantup.com/

2. Vagrantfileの作成,各種編集

①Vagrantfileの作成

vagrantfileを設置するディレクトリを作成し「vagrant init」で初期化、vagrantfileを作成します。
自分はデスクトップ上でディレクトリを確認したかったので ~/desktop/work/vagrant内にvagrantfileを作成します。（※1）
また、vagrantディレクトリと同じ階層に仮想マシンとホストマシンと共有するための共有ディレクトリ（src）を作成します。（※2）
(※1)work：仮想マシンを複数立ち上げる場合、仮想マシンの数ぶんのディレクトリを作成するので、その大元のディレクトリになります。
(※2)共有ディレクトリ：実際のアプリは仮想マシン内にクローンしますが、共有ディレクトリを設定しておくことでホストマシンにも仮想マシンでクローンしたアプリが共有され、ホストマシンで使い慣れたエディタでアプリのソースをいじることができるようになります。

#workディレクトリ、vagrantディレクトリの作成
~$       cd desktop
desktop$ mkdir work

#workディレクトリに移動しvagrantとsrcディレクトリを作成
desktop$ cd work
work$    mkdir vagrant (Vagrantfileを作成するディレクトリ)
work$    mkdir src　　　(仮想マシンとの共有ディレクトリ)
work$    ls            (vagrantとsrcが作成されているか確認)
src vagrant　←が表示されればOK！

#Vagrantfileの作成
work$    cd vagrant
vagrant$ vagrant init "bento/centos-7.4"

↑"bento/centos-7.4"はvagrant boxと呼ばれる仮想マシンのテンプレート,雛形のようなものです。
1からOSをインストールして行くのは大変ですが vagrant init box名 で環境を構築することができます。

②Vagrantfileの編集

・vimの起動

vagrant$ vim Vagrantfile

(1)ネットワーク設定

# config.vm.network "private_network", ip: "192.168.33.10"

上記のコメントアウトを外して・・・

config.vm.network "private_network", ip: "192.168.33.10"

このようにします。
こちらで設定したIPアドレスにブラウザでアクセスしてアプリの動作を確認します。

(2).共有ディレクトリ、パーミッションの設定
「# config.vm.synced_folder」のコメントアウトを外して下記のように編集します。

config.vm.synced_folder "../src", "/vagrant", mount_options:['dmode=777','fmode=777']

「config.vm.synced_folder "ホストマシンのパス", "仮想マシンのパス"」 で共有ディレクトリを設定します。
「mount_options:['dmode=777','fmode=777']」は「config.vm.synced_folder」のオプションで、dmodeはディレクトリの権限、fmodeはファイルの権限を設定します。

(3)プロビジョニング（vagrant up時に行うプロセスを設定）
「# config.vm.provision」の記述を編集（コマンドアウトされていたら外してください）

config.vm.provision "shell", :path => "provision.sh"

↑これで「vagrant up」時に「provision.sh」が実行されるように設定されました。
「provision.sh」内に各種インストールの記述をしておけば「vatrant up」時に自動的にインストールを行ってくれます。

(4)「provision.sh」の作成,編集
先ほどVagrantfileに設定した「provision.sh」はまだ作成していないのでVagrantfileがある階層で「provision.sh」を作成し編集を行います。

#Vagrantfileがあるvagrantディレクトリ内にprovision.shを作成
vagrant$ touch provision.sh

自分の環境に合わせて「provision.sh」に以下の記述を修正しペースト

# Apache,unzip,gitのインストール
yum -y install httpd unzip git

# MySQLのインストール
yum -y install http://dev.mysql.com/get/mysql-community-release-el6-5.noarch.rpm
yum -y install mysql-community-server

# PHPのインストール
yum -y install epel-release
yum -y install http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
※remi-release-7の数字部分は仮想マシンのCentOSのバージョンに合わせる
yum -y install --enablerepo=remi,remi-php56 php php-devel php-mbstring php-intl php-mysql php-xml
※remi-php56の数字部分はインストールしたいPHPのバージョンに合わせる（今回は既存アプリの環境がPHP5.6）

# ApacheがVagrant up時に起動する設定
systemctl enable httpd.service
systemctl start httpd.service

# MySQLがVagrant up時に起動する設定
systemctl enable mysqld.service
systemctl start mysqld.service

# Vagrantの共有フォルダにパスを設定
rm -rf /var/www/html
ln -fs /vagrant /var/www/html

3.vagrant upの実行

Vagrantfileがあるvagrantディレクトリに移動し「vagrant up」を実行します。

vagrant$ vagrant up

各種設定やインストールを自動的に行うので時間がかかるかもしれないです。しばらく待ちましょう。

「vagrant up」が終わったら

vagrant$ vagrant ssh

↑を実行し

[vagrant@localhost ~]$

$マークの前が↑のように切り替わっていればログイン成功です！
ログインが成功したら「provision.sh」に記述したインストールが成功しているか確認してみます。

# Apacheバージョン確認
[vagrant@localhost ~]$ httpd -version

# MySQLバージョン確認
[vagrant@localhost ~]$ mysql --version

#PHPバージョン確認
[vagrant@localhost ~]$ php -v

それぞれのコマンド実行後にバージョン情報が返ってくればインストール成功です。
仮想マシンの環境構築は完了です。

4.既存アプリのクローン

GitHubやGitLabのリモートリポジトリから共有ディレクトリ内にアプリのディレクトリをクローンしてきます。

#共有ディレクトリに移動
[vagrant@localhost ~]$ cd /var/www/html

#共有ディレクトリ内でgitのクローンコマンドを実行
[vagrant@localhost html]$ git clone "クローン用のURL"

クローンが完了したら

[vagrant@localhost html]$ ls

↑で共有ディレクトリ内の中身を確認しアプリ名のディレクトリがあればクローン成功です！
クローンが成功するとホストマシンの共有ディレクトリからもアプリを確認できると思います。
（今回はデスクトップ上から確認できます。）

5.Apacheのhttpd.confの編集

Apacheのconfigファイルの記述を編集します。

#viの起動
[vagrant@localhost ~]$ sudo vi /etc/httpd/conf/httpd.conf

#ドキュメントルートの変更
DocumentRoot "/var/www/html"
↑上記のデフォルト設定から
DocumentRoot "/var/www/html/アプリのディレクトリ名"
に変更

# AllowOverride NoneをAllに変更
<Directory "/var/www/html">
    ...
    AllowOverride None
</Directory>
↓下記に変更
<Directory "/var/www/html">
    ...
    AllowOverride All
</Directory>

編集後、Apadcheを再起動し変更を反映させます。

# Apcheの再起動
[vagrant@localhost ~]$ sudo systemctl restart httpd

これでApacheの設定は完了です。

6. MySQLの設定、アプリとの接続

①MySQLの設定
MySQLにログインし
・新規ユーザーの作成
・作成ユーザーへの権限付与
・アプリと接続するDBの作成
を行います。

#rootユーザーでMySQLに接続
[vagrant@localhost ~]$ mysql -u root

#ユーザーの作成
mysql> create user "ユーザー名"@localhost (identified by "パスワード");
↑パスワードが必要な場合は（）内も記述

#mysqlというDBに移動
mysql> use mysql;

#作成したユーザーに全権限を付与
mysql> grant all on *.* to "ユーザー名"@localhost (identified by "パスワード");

ここまで行ったら一度mysqlからログアウトします。

mysql> exit

rootでログアウトしたら作成したユーザーで再度ログインし、アプリ用に使用するDBを作成します。

#作成したユーザーでログイン
[vagrant@localhost ~]$ mysql -u "ユーザー名"

#DBの作成
mysql> create database "DB名";

#DBの確認
mysql> show databases;
↑で作成したDBが表示されていればOK

②アプリとの接続
アプリ内のapp.phpを編集します。

#viを起動しapp.phpを編集
[vagrant@localhost html] /~/app.php

#Datasources内のusername,password,databaseを修正
'Datasources' => [
        'default' => [
            ...            
            'username' => 'mysqlで作成したユーザー名',                  
            'password' => 'mysqlユーザーのパスワード',                  
            'database' => '作成したDB名',                    
            ...

MySQLのユーザー作成時にパスワードを設定しなかった場合は「'password' => ''」とします。

7.本番環境DBのダンプ→ローカルDBへリストア

本番環境のDBをローカル環境に移行するためにMySQLのダンプ、リストアを行います。

#本番環境のMySQLからDBを指定しdumpを実行
[vagrant@localhost ~] mysqldump -u "ユーザー名" -h "ホスト名" -p --database "DB名" > "dumpファイル名"

#dumpしたファイルを指定しローカル環境のDBにリストア(ユーザー、DBは先ほどローカルのMySQLで作成したDB)
[vagrant@localhost ~]　mysqldump -u "ユーザー名" -p "DB名" < "dumpファイル名"

#念の為MySQLに接続しリストアできてるか確認
[vagrant@localhost ~]$ mysql -u "ユーザー名"

#リストア先のDBを指定し中身を確認
mysql> use "DB名";
mysql> show tables;
本番環境のDBが反映されていればOK！

8.ブラウザで接続確認

Vagrantfileで設定したIPアドレスにブラウザでアクセスしTOPページが表示されれば成功です！！

最後に

最終的に上手くローカルで動かせるようになるまで様々なエラーが発生し苦しめられました、、、
しかしその度に、エラーの原因を把握し解消するために色々調べ物をするのでその分知識はついたかなと感じています。
スクール受講時にもvagrant環境を作りましたが、その時はテキストに書かれているがまま思考停止でコマンドを打っていたので何が起きているのか全く分からずじまいだったのでこのタイミングでじっくり勉強できたのはいい経験になったなと思います。
自分のような初学者はエラーが発生すると同じようなエラーが発生した記事を参考にコードをパパッとコピペしがちですが、エラーの原因を分からないままにしてしまうと何も身につかず何度も同じエラーで苦しめられる羽目になり時間とエネルギーを無駄にしてしまう恐れがあります、、、
なので「急がば回れ」理論でエラーに向き合い理解した上で1歩1歩進んでいくことが大事なのかなと感じました。

ここまでお読みいただきありがとうございました。

※記述や認識に誤りがあればご指摘いただけると大変助かります！

参考にさせていただいた記事

https://qiita.com/kenta0629/items/574251c140387779b681
https://qiita.com/tatsuo-iriyama/items/e9d63f2eaa901d1e9132
https://akamist.com/blog/archives/648