14時の間食

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

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

Web制作

    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 NoneALLに変更。

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

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

    EnableMMAP OffEnableSendfile 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=1enabled=0に修正

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

    同様にviで開いて8行目付近のenabled=1enabled=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デザイナーです。近所のイオンによく行きます。