VagrantでbaserCMS3の動作環境を作ってみました(ただし発展途上)
[2013.12.11追記]
この記事は、baserCMS3ベータ版をもとに書いたものです。正式リリース版でのセットアップ方法とは手順が異なりますのでご了承ください(後日、正式リリース版での導入手順を追記します)。
[2013.12.29追記]
baserCMS3正式版でのVagrant導入手順をまとめてみました。よろしければ、本記事とあわせてご参照ください。
XAMPP/MAPPでの諸問題を解消したウェブ制作環境づくり
自分のPC内に仮想マシンを作ることのできるOracle製の『VirtualBox』。そこに、開発環境を簡単にセットアップできるとして普及し始めたのが『Vagrant』という支援ツールです。
従来、ウェブサイトを作る際は(特に『baserCMS』のような動的生成が絡むサイト構築の場面で)、自分のPCにXAMPPやMAMPをセットアップし、ウェブ+データベースサーバをローカルで動かすことが多かったかと思います。でも、下のスライドの「Web開発あるある」のようなケースに見舞われた方もいらっしゃるのではないでしょうか(私も「Skypeに80番ポート取られた!」に遭遇しました)。
そうした「あるある」を解消するのが、VirtualBox+Vagrantでの環境構築。サイト制作に必要なサーバ環境がお使いのPCから独立しているため(=仮想マシンの中で動くため)、「Skypeに80番ポート取られた!」というトラブルともサヨナラできるわけです。
で、このほど、自分が使っているマシン(MacBook Air〔Mid 2013〕)のBoot Camp上で動くWindows 7 Professional(64bit)にVagrant環境を作り、開発中のbaserCMS 3を動かすことができました。ややはしょり気味になりますが、構築の過程を紹介したいとおもいます。
まずは『VirtualBox』と『Vagrant』のインストールが必要です。ともにインストーラー形式で配布されているので、ウィザードに沿って進んでいけばそう戸惑うことはないでしょう。
私のブログにてインストール方法を書きましたので、よろしければご参照ください。
(WordPressに特化したタイトルになっていますが、『VirtualBox』と『Vagrant』のインストール手順は同じです)
WindowsでVagrant+WordPressの環境作ったよ(導入編)
baserCMS 3の入ったひな形を追加してセットアップ
二つのインストールが終わったら、仮想マシンのひな形となる「Boxファイル」を追加します。BoxにはbaserCMS 3はもとより、それを動かすためのOS(CentOS)やウェブサーバ(Apache)、PHP、MySQLなどが含まれていて、いくつかのコマンド(後述)によってbaserCMS 3のサイトを立ち上げることができるようになっています。
では、コマンドプロンプトを立ち上げて、baserCMS開発チームの@ryuringさんがつくったBoxを追加してみます。ちょっと時間がかかるのでしばしお待ちを。
Microsoft Windows [Version 6.1.7601] Copyright (c) 2009 Microsoft Corporation. All rights reserved. C:\Windows\System32>vagrant box add basercms http://basercms.s3-website-ap-north east-1.amazonaws.com/vagrant_boxes/CentOS-6.4-x86_64-basercms3-beta-v20131011.bo x Downloading or copying the box... Extracting box...ate: 433k/s, Estimated time remaining: --:--:--) Successfully added box 'basercms' with provider 'virtualbox'!
続いて、Cドライブ直下に vagrant-baser というディレクトリを作り、Boxを初期化します。
C:\Windows\System32>mkdir \vagrant-basercms C:\Windows\System32>cd \vagrant-basercms C:\vagrant-basercms>vagrant init basercms A `Vagrantfile` has been placed in this directory. You are now ready to `vagrant up` your first virtual environment! Please read the comments in the Vagrantfile as well as documentation on `vagrantup.com` for more information on using Vagrant.
Boxの初期化が終わったら、コマンド一発で『baserCMS』の動作環境を起動します。
C:\vagrant-basercms>vagrant up Bringing machine 'default' up with 'virtualbox' provider... [default] Importing base box 'basercms'... [default] Matching MAC address for NAT networking... [default] Setting the name of the VM... [default] Clearing any previously set forwarded ports... [default] Creating shared folders metadata... [default] Clearing any previously set network interfaces... [default] Preparing network interfaces based on configuration... [default] Forwarding ports... [default] -- 22 => 2222 (adapter 1) [default] Booting VM... [default] Waiting for machine to boot. This may take a few minutes... [default] Machine booted and ready! [default] Mounting shared folders... [default] -- /vagrant [default] Checking for host entries C:\vagrant-basercms>
とプロンプトが返ってきて、仮想マシンが起動しました。
仕上げに『VirtualBox』のポートフォワーディング設定を
さて、仮想マシンは起動したものの、実はこのままではサイトへのアクセスができません。仮想マシンのIPアドレスは 127.0.0.1 なのですが、この状態でブラウザからアクセスしても
という素っ気ない返事が返ってくるだけです……
そこで、きちんとサイトが表示されるよう、仮想マシンのネットワーク設定を変更します。実は、今回構築しているサイトにアクセスするためには、ホスト側(Windows 7)とゲスト側(CentOS)の80番ポートをつなぐ「ポートフォワーディング」の設定を行う必要があります。
必要な項目は C:\vagrant-basercms 内の Vagrantfile に記述します。適当なテキストエディタでファイルを開き、私は23行目あたりにこう書きました。
- # config.vm.network :forwarded_port, guest: 80, host: 8080 + config.vm.network :forwarded_port, guest: 80, host: 80
変更内容を反映するため、下のコマンドを実行します。
C:\vagrant-basercms>vagrant reload
80番ポートで通信できるようにしたところで http://127.0.0.1 にアクセスしてみると……
まずは、ウェブサーバ(Apache)のウェルカムメッセージが現われました。さらに http://127.0.0.1/basercms3 にアクセスすると……
おお! でました! おなじみの『nada icons』テーマですが、裏ではしっかりとバージョン3が動いてくれてます。
ホスト側からテーマのカスタマイズができない……orz
ところが現状では、ホスト側から仮想マシン内のbaserCMSファイル群にアクセスすることができてません。ファイル群がマシン内の /var/www/html/basercms3 にあることは判明しているのですが、いろいろ設定してみるもアクセスできず……引き続き、Boxの開発状況をウォッチしながら加筆していきたいとおもいます。