VagrantとVirtualBoxでローカル開発環境を構築（Mac）

こんにちは、40webdesigner（@40webdesigner）です。

WordPressを構築するときは自身が借りているレンタルサーバーにインストールして、Cyberduck経由でDreamweaverで開き（ファイルはいったんダウンロードされているらしい）、編集後ファイルを上書き保存すると同時にサーバーにアップされる、というやり方でやっていたんですが、いかんせんバックアップが取れないし履歴も残らない。

一応その日の作業を始める前にサーバーから全ファイルをダウンロードして日付をつけてフォルダに保存したりしてバックアップは取ってたのですが、なんかもっといい方法があるはず・・・。

そういえばエンジニアの方に「履歴は？残ってる？」と聞かれたことがあって、「いえー、ぜんぜん」と答えたら「そう・・・」とちょっと困ったふうだったのを思い出し、これはなにか方法があるはずだと調べました。

一応gitとかGitHubとかの名前や存在は知っていたけど、もしやそこらへんにヒントが・・・？

Git（ギット）は、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。

お、やっぱりそれっぽい。

何やらまだよくわからないが、ちょっとググってみるとGitを使うには「ローカル開発環境」が必要っぽい。ああ、やっぱり必要なのか、ローカル開発環境。以前から気にはなっていたんですが、そろそろ導入する時期かなあ。

前置き長くなりましたが、そういうわけで、まずはローカル開発環境を構築してみることにしました！

Contents

1 参考にしたサイト
2 準備
3 構築

参考にしたサイト

ドットインストール｜ローカル開発環境の構築

ドットインストールには事あるごとにお世話になってます。
Bootstrap案件がきたときとか、jQuery Mobile、PHP入門などなど。さくっと勉強できるので概要をつかむにはとても重宝しています。

ドットインストールでローカル開発環境の構築を学んでドットインストールの効率的な使い方を考えてみました

ドットインストールのローカル開発環境を文字起こしした方の記事。コピペで使わせてもらいました！ありがたや〜。

準備

いろんな情報を見てしまうといろんなことに惑わされる（というか頭がゴチャゴチャするだけ）なので、基本はドットインストールに沿って構築します。

準備として、下記をインストールしましょう。

– Vagrant
– VirtualBox
– FileZilla
– hoster

hosterのインストールは開発者不明との警告が出て先に進めなかったので、環境設定のセキュリティを開き、どんなファイルでもインストール可という設定に変更してからインストールしました。（終わってから設定は元に戻したほうが安心）

【OS X Mountain Lion】「Mac App Store」以外のアプリをインストールする方法

※MAVERICKでも同じ。

構築

さ、あとは手順通りにやっていけば簡単！・・・と思っていたら大間違いで、いきなりつまづきましたよ。

ターミナルを開いて、

cd Vagrant

1	cd Vagrant

最初の呪文を入力してエンターーーーーーーー！

手順によるとVagrantというディレクトリに移動するはずなんですが、ターミナルからは「そのフォルダないよ」ってお返事。
VagrantというフォルダはVagrantをインストールした時に作られるフォルダのはずで、私の場合そのフォルダがアプリケーションの直下にあったんですが、上記呪文だとそこを参照してくれないみたい。ううむ。

ターミナルを立ち上げると最初に出てくる文字が「［‘自分のコンピュータ名’:～］ログイン名%」。
で、試しに次のステップ「ディレクトリを作る」っていのを試してみたら、Users＞自分のログイン名のフォルダ＞指定したフォルダ（ディレクトリ）が出来ました！じゃあそのフォルダ（ディレクトリ）で作業すればオッケーねということで、Vagrantディレクトリにたどり着くことは諦めて、と。

ディレクトリを作った呪文

mkdir localdev

1	mkdir localdev

これがログイン名フォルダの直下に出来たので、次はそこに入る呪文

cd localdev

1	cd localdev

とここでまた疑問が。

ドットインストールでは、localdevに入りましたよーっていう表示が

~ Vagrant/localdev$

1	~ Vagrant/localdev$

それに対してわたしのほうは

localdev ユーザー名$

1	localdev ユーザー名$

Vagrantというディレクトリはないのでいいのですが、ディレクトリの表示のされ方が違うんですよね・・・。
でもなんだか合ってる気がする・・・ので、そのまま突き進みました！

次はですね、Vagrantfileの編集でつまづきます。
このあたりで私のイライラ度MAX。
文章にするとあっという間ですが、実際はかなりの時間を費やしていて、グーグル先生に色々聞いてみたり、ドットインストールを何度も見なおしたり。

何につまづいたのかというと、「文字入力ができない！」「保存の仕方がわからない！」。
UNIXコマンドとかぜんぜん知らなかったので、何を調べていいのかもわからず、もうこの先には進めないのかと諦めそうになりましたが、、、

呪文vi Vagrantfileのviっていうのが編集モードに入ることらしい。
[I]キーを押すとインサート（挿入）モードになる。これで文字が打てる。
[:w]は保存、[:wq]は保存して終了らしい。（ドットインストールをじっくり見ると一瞬出てくる）

この3つでなんとかクリア！これがわかるのに何時間かかったことかあああああ。分かる人にはあっという間ですよねえ。

Vagrantfileの編集ではIPアドレスを変更します。これが無事にできたらいよいよVagrant upです！
この先は順調だったので省略！

ひとまずローカル開発環境は出来上がったのでした。ああ疲れた。

40web

36歳のときにそれまで勤めていた金融業界を卒業、地に足の着いた生活がしたいと東京・渋谷から房総へ移住。Webデザイナー養成校に通い、40歳のときにWebデザイナーとして独立。地方在住・40歳・コネなしからスタートして、現在は仲間と会社を作るまでに成長。今の興味は資産形成とブロックチェーン。ビットコインのマイニングもやってます。