14時の間食

CakePHPの記事を中心にWeb制作について

VagrantでXAMPPに替わる開発環境を整備

Web制作
アイキャッチ画像-VagrantでXAMPPに替わる開発環境を整備Photo by Pascal

XAMPPでの開発はもう無理かな…

技術評論社から出ているPHPエンジニア養成読本という本を読みました。

今時の開発スタイルを手に入れるべく、実際に手順に沿って手を動かしてみたですが、モダンな開発ツールに触れるためには何かとコマンドプロンプトやターミナルといったCUIでの操作が求められますね。

XAMPPerの私は、「また黒い画面で操作するの！？えっと…XAMPPの場合はどうすればいいんだろう…(困惑)」となり、解決できないまま幾度となく挫折を味わうことに。

XAMPPはインストールすればWindows(MAC)上にLAMP環境がすぐ手に入ってとても便利です。お陰でずっとお世話になってきましたが、Linux上の本番環境とはディレクトリ構造に差異が多く、CUI操作もLinux用に作られたマニュアル通りにはいきませんでした。そこで、

Linuxの開発環境を用意しよう

そろそろ何とかしようと思い、Vagrantで仮想マシンを立ち上げ、開発用のLinux環境を整備することにしました。

今回はVagrantでVirtualBox上にCentOSをインストールし、その中にComposerでCakePHPをインストールするのが目標です。

ひと通りの作業が終わったので行った手順をメモしておきます。この手順書がChefを修得するまでの繋ぎになればいいなと。

なお、作業環境はWindows7です。VirtualBoxとVagrantをそれぞれインストールした状態から進めて行きます。

※VirtualBoxとVagrantのインストールと操作方法はこちらの記事を参考にしました。

Windows7でVagrantをつかってサクっと開発環境を作ってみよう/トーハム紀行

手順での「フォルダ」or「ディレクトリ」表記はホストOSのWindows上、Linux上を問わず「ディレクトリ」に統一しました。

CentOSをインストール

VagrantにCentOS6.4のBoxを追加

Vagrantbox.esのサイトからWebサーバ用途に良さそうなCentOS 6.4 x86_64をチョイス。他のバージョンや32bit版でも大丈夫かと。

コマンドプロンプトを開きbox addでダウンロード。

vagrant box add CentOS6.4-x86_64 https://github.com/2creatives/vagrant-centos/releases/download/v6.4.2/centos64-x86_64-20140116.box

作業ディレクトリへ移動

好きな場所に開発用ディレクトリを作りコマンドプロンプトでそこに移動。ここではドライブ直下にMyWebSiteディレクトリを作った想定。

cd c:\MyWebSite

DドライブやEドライブなど、他のドライブに移動する時は/dを付ける。

cd /d e:\MyWebSite

box名をCentOS6.4-x86_64に指定して初期化

vagrant init CentOS6.4-x86_64

Vagrantfileの編集

ディレクトリ内に生成されたVagrantfileをエディタで開きIPアドレスを任意で編集。ここでは192.168.33.12に設定。

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

起動

vagrant up

SSHログイン

vagrant ssh

でOK。そう、Macならね。

Windowsの場合はそうはいかないので一度コマンドプロンプトから離れ、Tera Termなどを使用し次の設定でSSH接続

接続設定

  • ip: 192.168.33.12
  • ポート: 22
  • ユーザー: vagrant
  • パスワード: vagrant

apacheのインストール

SSH接続した状態でCentOS上にサーバ環境を整備していく。

※ 以降の操作ではroot権限が必要になるので、su -してスーパーユーザーになるか適宜コマンドの先頭にsudoを加えて下さい。su -する時のパスワードはvagrantです。

まずはapacheからインストール。

yumでパッケージからインストール

yum -y install httpd

自動起動をONに設定

chkconfig httpd on

ホストOSから見れるようファイアウォールをOFF

service iptables stop

一度コマンドプロンプトに戻り(Macの場合exitでSSHから退出)

vagrant reload

でCentOSを再起動。立ち上がったらブラウザから192.168.33.12にアクセスしapacheの初期画面が表示されることを確認

Apache初期画面

設定ファイルを編集

再びSSH接続し、httpd.confを編集

vi /etc/httpd/conf/httpd.conf

編集箇所

後にインストールするCakePHPのmod_rewriteが有効になるよう、AllowOverride NoneをALLに変更。

<Directory /var/www/html/>
    〜略〜
    Options Indexes FollowSymLinks
    〜略〜
    AllowOverride ALL//+
    EnableMMAP Off//+
    EnableSendfile Off//+
</Directory>

この時ついでにOptions Indexes FollowSymLinksとなっている部分のIndexesを消すか、-Indexesとしておくと、ディレクトリ内にindexファイルがない場合のファイル一覧(index of...)を表示させないようにできる。

EnableMMAP OffとEnableSendfile Offの指定はVM上のApacheで静的ファイルの更新が検知されない問題の修正に必要です。

参考:
http://tipshare.info/view/4f3481ee4b21227814000001

共有ディレクトリの設定

公開ディレクトリ内を一度全て削除

sudo rm -rf /var/www/html

シンボリックリンクの作成

sudo ln -fs /vagrant /var/www/html

これで、ホストOS側のc:\MyWebSiteとゲストOS側の /vagrant及び/var/www/htmlの内容が同期する。

c:\MyWebSite内にindex.htmlを置くとその内容がブラウザから192.168.33.12でアクセスできることを確認。

リポジトリの追加

後にインストールするPHP・MySQL・phpMyAdminは、yumでただインストールするだけだと古いバージョンしか得られないので、新しいバージョンをインストールできるリポジトリを追加しておきます。

参考記事：CentOS6.4にEPEL,RepoForge,Remiリポジトリの追加 | WinRoad徒然草

wgetのインストール

yum -y install wget

EPEL,RepoForge,Remiリポジトリのダウンロード及び追加

下記を1行ずつ実行

wget http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm
wget http://pkgs.repoforge.org/rpmforge-release/rpmforge-release-0.5.3-1.el6.rf.x86_64.rpm
wget http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
rpm -Uvh epel-release-6-8.noarch.rpm
rpm -Uvh rpmforge-release-0.5.3-1.el6.rf.x86_64.rpm
rpm -Uvh remi-release-6.rpm

リポジトリの無効化

vi /etc/yum.repos.d/epel.repo

viで開いて6行目付近のenabled=1をenabled=0に修正

vi /etc/yum.repos.d/rpmforge.repo

同様にviで開いて8行目付近のenabled=1をenabled=0に修正

PHPのインストール

参考記事：yumコマンドでPHPのインストール | WinRoad徒然草

yumでパッケージからインストール

yum -y install php php-mbstring php-pear php-gd

続いてPHP5.4.30にアップデート(※バージョンは2014/07/23現在)

yum --enablerepo=remi,epel,rpmforge -y install php php-mbstring php-pear

php.iniの設定

設定ファイルを開く

vi /etc/php.ini

タイムゾーンを設定

date.timezone = Asia/Tokyo

MySQLのインストール

参考記事：CentOS6.4にMySQLとphpMyadminをインストール | WinRoad徒然草

yumでパッケージからインストール

yum -y install mysql-server

起動

/etc/rc.d/init.d/mysqld start

自動起動をON

chkconfig mysqld on

MySQLに接続

mysql -u root

ユーザー情報を表示

select user,host,password from mysql.user;

パスワード設定

ユーザーのパスワードを設定。下記を一行ずつ実行。ここではパスワードを全てvagrantと指定。

set password for root@localhost=password('vagrant');
set password for root@'vagrant-centos64.vagrantup.com'=password('vagrant');
set password for root@'127.0.0.1'=password('vagrant');

匿名ユーザーを削除

delete from mysql.user where user='';

ユーザー情報を再度表示

select user,host,password from mysql.user;

一度退出

exit

再度パスワードなしで起動しアクセスできないことを確認

mysql -u root

パスワードを入力するとアクセスできることを確認

mysql -u root -p

バージョン5.5.3へアップデート(※バージョンは2014/07/23現在)

yum --enablerepo=remi,epel,rpmforge -y install mysql-server

phpMyAdminのインストール

各リポジトリを有効化してyumでインストール

yum --enablerepo=remi,epel,rpmforge -y install phpMyAdmin php-mysql php-mcrypt

設定を編集

設定ファイルを開く。

vi /etc/httpd/conf.d/phpMyAdmin.conf

ホストOSからアクセスできるよう、設定ファイルのAllow from 127.0.0.1の次の行あたりにAllow from 192.168.を追加。

この場合、先頭が192.168.xx.xxとなっているIPを全て許可。
許可するローカルIPの種類はルーターやPCの設定によって変わってくる。

ブラウザで確認

ブラウザで192.168.33.12/phpmyadminへアクセスし、ID: root PASS: vagrantでログインできることを確認

phpMyAdminログイン画面

開発環境をBox化

PHPとMySQLの使える環境がひと通り整ったのでこれをVagrantでいつでも使えるようBoxにしておく。 コマンドプロンプトで

vagrant package

ディレクトリ内にpackage.boxが生成されたら名前を決めてbox add。ここではcakeboxという名前に設定。

vagrant box add cakebox package.box

box addを行っておけばVagrantのボックスリストに登録されるので、次回以降cdコマンドで好きな作業ディレクトリに移動し、vagrant init cakebox → vagrant up でこのサーバのクローンを作れる。

出来上がったboxの仕様はこんな感じ

  • CentOS6.4-x86_64
  • Apache2.2.15
  • PHP5.4.30
  • PEAR1.9.5
  • MySQL5.5.38
  • phpMyAdmin4.2.6

Composerを利用してCakePHPのインストール

参考記事

「Composer 再入門」から学び直す、Composerの使い方

ComposerでCekePHPをインストール

CakePHPをComposerで導入する手順(Vagrantでのデモ環境同梱)

インストール作業

作業ディレクトリに移動

cd /vagrant

Composerのインストール。composer.pharが作業ディレクトリに生成される。

curl -sS https://getcomposer.org/installer | php

composer.json

composer.jsonを作業ディレクトリに作成し保存。

CakePHPをインストールする場合、以下のように記述。CakePHP本体に加え、DebugKitも一緒にインストールします。

ホストOS側でエディタを使って作成する場合BOMなしで保存。

{
    "name": "example-app",
    "repositories": [
        {
            "type": "pear",
            "url": "http://pear.cakephp.org"
        }
    ],
    "require": {
        "cakephp/cakephp": "2.5.3",
        "cakephp/debug_kit": "2.2.*"
    },
    "config": {
        "vendor-dir": "Vendor/"
    }
}

作業ディレクトリ(composer.jsonがあるディレクトリ)内でComposerを実行

php composer.phar install

CakePHPインストール後の設定

Bakeを実行する。

/vagrant/Vendor/bin/cake bake

通常のCakePHPでいうappにあたるディレクトリをどこにするか聞かれるので名前を決める。ここでは/vagrant直下にmyappというディレクトリ名で指定。 その他の質問もYesで進めてOK。

対話が終わると自動的にmyappディレクトリが生成される。

データベースの用意

Bakeでは続けてdatabase.php生成できる。

データベースはphpMyAdmin(192.168.33.12/phpmyadmin/)なりで適宜作成し、設定に応じて対話していく。

bootstrap.phpの編集

myapp/config/bootstrap.phpを開いて下記を追加。

PluginディレクトリがVendorと同じく/vagrant直下に作られているため、Pluginディレクトリのロード階層を変更し、CakePlugin::loadAll();でDebugKitを読み込む。

// composerのautoloadを読み込み
require ROOT . '/Vendor/autoload.php';

// CakePHPのオートローダーをいったん削除し、composerより先に評価されるように先頭に追加する
// https://github.com/composer/composer/commit/c80cb76b9b5082ecc3e5b53b1050f76bb27b127b を参照
spl_autoload_unregister(array('App', 'load'));
spl_autoload_register(array('App', 'load'), true, true);

// Pluginディレクトリのロード階層を変更
App::build(array('Plugin' => array(ROOT . DS . 'Plugin' . DS)));

CakePlugin::loadAll();

ブラウザで確認

database.phpの生成が終わり、bakeから抜けたら192.168.33.12/myapp/にブラウザでアクセスしオールグリーンになっていることを確認

オールグリーン

MVCをBakeする

データベースにテーブルの用意が出来たらMVCをBakeしてみる。

myappディレクトリに移動

cd /vagrant/myapp

cakeファイルの場所を指定してbake

/vagrant/Vendor/bin/cake bake

おなじみのBake画面が表示されると思います。俺たちの開発はここからだ！

カテゴリー

最近の記事

Author

  • ささきち-このブログを書いてる人
    s3make@ささきち
    多摩川沿いに住むフリーのWebデザイナーです。近所のイオンによく行きます。