Windows7でVirtualBoxとVagrantを使ってローカル開発環境を構築する

公開日: : Vagrant, VirtualBox, サイト制作

スポンサーリンク

Vagrant(ベイグラント)とは

http://www.vagrantup.comで入手できる仮想マシンを簡単に立ち上げるためのツールです。今回Windows7で何らかのWebページをローカル環境で確認できるものを構築したのでその覚書きです。

主に下記の点において非常に便利なのだと思います。
・OSや各ソフトインストール、設定など一緒くたにできて楽
・その設定を保存(boxファイル化)して他人に渡すことができる

これを使うにはVirtualBoxやVMWareなどの仮想マシンを立てるためのソフトが必要となります。私はVirtualBoxを使用しました。

私が使ったバージョンは下記の通りです
VirtualBox:5.0.16
Vagrant:1.8.1

目標は仮想マシン内のCentOSでWebサーバーを立ち上げてローカルで確認できる環境を構築することです。
  

ダウンロード先
Vagrant
VirtualBox

インストールの手順は省きます。

以下よりコマンドを打ち込む等の文言が出てきますが、これはコマンドプロンプト(cmd.exe)を立ち上げてそこに打ち込むという意味です。
Windowsだと「ls」→「dir」です。

Boxの取得

Boxファイルとは仮想マシンを作るためのテンプレートです。一度このBOXをリストに登録してしまえばあとから何度でも同じ仮想環境を構築することができるようになります。これは公式サイトから取得できます。リンク先を見ていくと下記コマンドが見つかるので、これををコマンドプロンプトを立ち上げて打ち込みます。(が、今回はCentOSを入れたいのでUbuntuの入手できる下記をやる必要はないです。次の「他のBox取得方法」で探します。)

vagrant box add hashicorp/precise64

数分~数十分かかります。完了したらBoxが登録されたか下記コマンドにて確認することができます。

vagrant box list

これで今まで導入したBOXの一覧がわかります。

他のBox取得方法

Vagrantbox.esという非公式のサイトがあるのでそこから下記コマンドにて引っ張ってくることもできますが、素性は不明なので自己判断で使用してください。私は今回ここからCentOSを入れました。

vagrant box add [名前] [URL]

例)

vagrant box add cenos64 https://github.com/tommy-muehle/puppet-vagrant-boxes/releases/download/1.0.0/centos-6.6-x86_64.box

仮想マシンを初期化

一つのテンプレートからいくつも仮想マシンを作ることができます。とりあえず仮想マシン毎にディレクトリを作成します。

 1.適当なところに仮想マシン用のフォルダを作ります
 2.コマンドラインでcdを使ってそのフォルダへ移動します
 3.「vagrant init 」コマンドにて初期化します
 4.成功するとそのフォルダに「Vagrantfile」ができます

vagrant initで使用するBOX名は「vagrant box list」で確認することができます。
あとはvagrant upで環境を構築するだけなのですが、その前に設定を変更しておきます。

Vagrantfileの設定

Vagrantfileをメモ帳などで開いて設定を変更・追加します。Vagrantfile自体はRubyで書かれているようですが特にRubyを知らなくても問題ないです。

ネットワークの設定

下記コメントアウト部分(コメントアウトは「#」です)をはずします。

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

・・・がこれでvagrant upすると下記エラーが出る場合は次の変更にしてください。
vagrant up failed to create the host-only adapter

config.vm.network 'forwarded_port', guest: 80, host: 8000, host_ip: '127.0.0.1'
  config.vm.synced_folder '.', '/vagrant', disabled: true

ブラウザで確認するときのアドレスが変わります。
(192.168.33.10もしくはlocalhost:8000)

Provisionにより設定を一度に行う

VagrantfileはVagrantの設定ファイルでネットワークや初期化時に打ってほしいコマンドを指定できますので、ここで色々なソフトのインストールや設定のシェルスクリプトを指定しておくと便利です。

Provision自体はVagrantfileの下記部分をコメントアウト、もしくは追加することで利用することができます。(Rubyです)

config.vm.provision :~~~

#config.vm.provision :shell, :inline => "echo hello world"
config.vm.provision :shell, :path => "setting.sh"

上のhello worldは例です。vagrant up後に表示されるだけです。

setting.shの中身(例)

sudo yum -y install httpd
sudo service httpd start
sudo chkconfig httpd on

このシェルスクリプトを指定しておくとhttpdがインストールされ、立ち上がった状態になっています。

仮想マシンを起動

Vagrantfileのあるフォルダに移動して「vagrant up」コマンドを打ちます。テンプレート自体は何も変わらないのでまた新しく仮想マシンは作成可能です。はじめは数分くらい時間がかかります。

vagrantup
↑のような画面になります。次のSSH接続のために必要な項目を確認しておいてください。

各種コマンド

vagrant [~~]
 status:状態を見る
 suspend:一時停止する
 resume:元に戻す
 destroy:仮想マシン自体を削除する
 halt:終了
 up:立ち上げる
 reload:再起動

マシンが立ち上がったら「vagrant status」で状況を確認してみてください。「running~~」の文言があれば起動中です。

SSH接続

vagrant sshコマンドでできるが、WindowsはできないようなのでTeraTermなどのソフトを使って接続します。ここではTeraTermを使います。

vagrant_ssh1
↑確認した情報を打ちます

teraterm_secu
↑続行を押します

vagrant_ssh2
↑パスワードもvagrant

CUIが苦手という方は「WinSCP」というSSHソフトが使いやすいと思います。

vagrant_winscp
↑ドラッグ&ドロップでファイルをアップロード・ダウンロードできます(ディレクトリの権限を指定する必要がある場合がありますので、その時はTeraTermなどが必要です)

Webページを確認する

TeraTerm上で「cd /var/www/html」コマンドを打ち、公開ディレクトリへ移動します。そこで「sudo vi index.html」でindex.htmlファイルを作成します。(中身は何でも構いません)

index.html(例)

<html>
<body>
<h1>Hello World</h1>
<p>テストです</p>
</body>
</html>

http://localhost:8000/
(もしくは192.168.33.10。設定で異なる。)
をブラウザに打ち込み、移動して下記のようなのが見えていれば成功です。

helloworld_test_vagrant

自分でBOXを作る

Vagrantfileのあるディレクトリへ移動して「vagrant package」コマンド
しばらく待つと「package.box」ファイルができます。これを「vagrant box add [パッケージファイル]」コマンドでBOXに追加することもできます。

ex) vagrant box add my_box package.box

追加が完了したら.boxファイルは削除して構いません。BOX化すればprovisionの設定もあらかじめ行われるBOXファイルを作ることができます。

バッチファイルで起動させる

vagrant upまでの手順をバッチファイルにしておくと便利です。といってもvagrant upするディレクトリに移動して「vagrant up」するだけです。

例)mycentos.bat

cd C:\Users\xxx\Documents\myCentOS
vagrant up

次からはこのバッチファイルを叩けば立ち上げることができます。

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

ニコニコ動画やYoutubeのRSSフィードもサムネ付きで手軽に表示できるブログパーツ

通常サイトのRSSだけでなく、ニコニコ動画やYoutubeの動画サイトのRSSを読み込んでサムネ画像

記事を読む

【CSS】beforeのcontentで改行する

.bsample1:before{ content:"★参考★\A"; } .bsampl

記事を読む

人気記事表示ブログパーツの忍者レコメンドを使ってみる

忍者レコメンドとは 今回は忍者レコメンドという人気記事表示のブログパーツを紹介します。忍者レコメン

記事を読む

人気記事・ランダム記事等紹介の忍者レコメンドが大幅にパワーアップした件

以前このブログにて忍者レコメンドの紹介記事を書きました。その際にこのブログにも忍者レコメンドを設置し

記事を読む

【HTML/CSS】タイトルロゴ画像の設定の方法

自分のブログやサイトのタイトル部分にトップ絵画像を設置する方法です。方法としてはimgタグをHTML

記事を読む

関連記事を表示させるブログパーツLinkWithinの導入方法

LinkWithinについて ブログに関連記事を表示するパーツ『LinkWithin』を紹介します

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

さくらとロリポップのcronについての比較

私は今さくらのレンタルサーバーとロリポップのレンタルサーバーを両方試してみているのですがそのcron

記事を読む

【jQuery/javascript】Tweetボタンを動的に設置する

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

美人画像を表示してくれるブログパーツまとめ

美人時計など有名なものもありますが、美人画像を表示してくれるブログパーツをまとめました。暦や時刻を表

記事を読む

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑