vagrant-image

黒い画面は苦手なWebデザイナーだけど、CakePHPの仮想環境をVagrantを使って構築してみた

やっと確定申告が終わりましたshow-koです。好きな寿司ネタはみんなとられてしまったので、仕方なくカニカマを選んでみました。サラダ巻き万歳。

今日は技術ネタを書こうと思うのですが、所詮黒い画面が苦手なデザイナーです。
わからないなりにやってみたら、なんとかなったという典型でして、あまり突っ込んだ内容にはなってません。

開発環境、どうしてますか?

はじめてWordPress使っている人と話した時、衝撃だった言葉があります。

「まさかサーバ上で直接編集とかしてないよね?当然ローカル環境作ってるよね?」

「ろろろ・・・ろーかるかんきょう、ですか。
もちろん、ちゃんとやってますよーとうぜんじゃないですかー(汗);;;」

としらばっくれて、速攻家に帰ってMAMPのインストールからはじめた事実を、周りのエンジニアの友人に話すと、たいてい呆れられます。
でも、この当時、私はPHPファイルといってもテンプレートタグくらいしか触らないし、ワードプレスの制作のほとんどはテーマのCSSを修正するだけでして、もともとあったワードプレスサイトを大幅リニューアル、なんてことは一度もやったことがなかったんでした。

そんな私も、MAMPでのローカル開発にようやく慣れてきたかな?と思った昨年秋ごろから、

「MAMPはもういらない!これからはVagrantだ」

という声をよく聞くようになりました。

はて、Vagrant?

Vagrantって何?

開発支援ツール「Vagrant」は、テスト用の仮想マシン作成やその環境設定などを自動化するツールだ。これを利用することで、仮想環境の作成からセットアップ、そして破棄までを、簡単なコマンドを実行するだけで行える。

さくらのナレッジより引用)

その道の達人から、何度説明を聞いても、いくらググッても、Vagrantがなんなのか、よくわからない。どうやら複数名で同時に開発するときには、便利そうだけれども。

そんな私にも、とうとう複数名で同時開発する機会がやってきた。
しかもWordPressではなく、CakePHPを使うらしい。

ディレクター氏曰く、「Vagrantが何をどうやってるのか、深いところまでデザイナーが理解する必要はない。チームのメンバーが同じ環境で作業できるようにするのが目的だから。とにかくやってみて。」

よーし、やってみよーー!

まずは、VirturalBoxをダウンロード

私の環境はMac Book Pro OS-X10.6.8です。
不具合が起こるのが怖くてMarvericksにしてません。

Virtual-Box

つぎに、Vagrantをダウンロード(1.4.3)

vagrant

Vagrantのバージョンを確認します。
ターミナルで下記コマンドを実行。

vagrant -v

Vagrantのバージョンが表示されればインストールはひとまず成功です。
私はVagrant 1.4.3をインストールしました。

Boxファイルの追加

仮想マシンを作成するにはBoxファイルというイメージファイルが必要らしい。
ここにいろいろあります。

うーん。 UbuntuとかCentOSとかHerokuとかDebianとか、聞いた事はあるけれど、なんだかよくわからないものがいっぱい並んでる。とにかくあらゆる環境をコマンド一発で作れるようにしてくれているらしい。

$ vagrant box add {title} {url}
$ vagrant init {title}
$ vagrant up

こういう風に使うらしい。

でも今回は、茅場町のコワーキングスペースCo-Edoの田中さんが作ったVagrantfileをまず使ってみることにします。

PHP開発環境のサンプルVagrantfile

GitHubにある、このVagrantfileを使います。

  • CentOS 6.4
  • Apache 2.2
  • PHP 5.4
  • PostgreSQL 9.3
  • phpPgAdmin
  • MySQLの最新版

(追記:このVagrantfileではPostgreSQLとphpPgAdminは使っていないそうです)

これらを、勝手に自動でインストールして、細かい設定までしてくれるらしい。
本当か?大丈夫なのか???

このVagrantfileの使い方は、以下のブログを読むとわかりやすいです。
shin1x1さんのGuthubからForkして作ったものが、これから実行するVagrantfileです。

ターミナルでこれを順番に実行。
$ git clone https://github.com/monsat/vagrant-lamp-sample
$ cd vagrant-lamp-sample/vagrant
$ vagrant up

この3行をターミナルで実行するだけで、あら不思議、開発環境のできあがり~

vagrant upをした後は、結構時間がかかりましたが、、、

完了したら、ここにアクセス!!
http://192.168.33.40/

スクリーンショット(2014-01-16 21.08.41)

できたーーーー!!!

ちょっと脱線

「ローカルIPは、その人によって異なるのでは?」
という疑問がWP-Eメンバーからあがりまして、VagrantのローカルIPについてイカさんが調べてくれました。そしたら多くの記事がhttp://192.168.33.40/にしていたことまではわかったのですが、どうしてそうなるのか、まではよくわかりませんでした。

んで、まゆげさんが教えてくれたんですが

Vagrantのプラグインの vagrant-hostsupdate

を入れてあげると、hostsファイルを書き換えてくれるらしいです。

気になる人は「vagrant plugin install vagrant-hostsupdater」でググってみてください。

Vagrantはどんどん進化しているらしい

私はまだ試してませんが、Vagrant Cloudなるものが登場しているらしいですね。こっちも要チェック。

まとめ

今回、全くエラーでひっかからず、ほぼ完璧に環境構築できました。
スクリーンショットでは、データベースが未設定のエラーが出ていますが、この数日後に、もう一度同じことをやったときには、vagrantfileが更新されてそこもクリアされていました。

裏で何がどのように動いているのかわからないのは不安ですが、田中さんがおすすめしてくれるものを言われるがまま設定しただけで、ここまでなんとかこれました。

vagrant upしてから完了するまでの約30分ほどの待ち時間、私が何をしていたかというと、、、

20140119-174852

太田先生、森下さん、ジャスティス隊長とタコ焼きを焼いていました。

その場にいる人達とタコ焼きすることもできる、高田馬場のコワーキングスペースCase新宿
ときどきふらりと出かけて行ってここで仕事しています。

7 thoughts on “黒い画面は苦手なWebデザイナーだけど、CakePHPの仮想環境をVagrantを使って構築してみた

  1. じゅんいちろうさん、コメントありがとうございます。

    >PostgreSQL 9.3
    >phpPgAdmin
    >は使っていないのでは?

    はい、仰る通りです。Vagrantfileを作った田中さんからご指摘がありまして、追記しました。
    最新版のMySQLを使っているそうです。

    1. ITかあさんの記事、さすが内容が濃いっす。vagrantファイルの中にhosts指定をしてある箇所があるんで、そこを書き換えてもOKってことですね?(合ってるかな?)
      コメントありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です