Vagrant 〜ローカル開発環境の構築〜

こんばんわ、毒きのこです。
今日は午前中ダイエットも兼ねてランニングをしていたのですが、異様に風が強く何度も吹き飛ばされそうになりました。

はい、本日のお題は「Vagrant 〜ローカル開発環境の構築〜」。

Webアプリやフロントエンドのお勉強を始めた初心者の方にお役に立てればと、ちょっとした開発環境構築について書きたいと思います。

例えばPHPやJavaScript、Htmlでもなんでもいいのですが、作ったサービスを実際のサーバー上でどのように動くか試してみたい時ってありますよね。そんな時、ひと昔前ならXAMPP、MacだとMAMPとかですかね。

僕も7年くらい前? ガラケーソシャゲブームだった頃はよくお世話になっていました。ですが、これらはチーム内で開発する際にやれPHPのバージョン違いによる不都合だったり、port80の占有、開発に必要な環境は個々でインストールする必要があるなど、昨今の開発現場では色々不便で使われなくなってきているのではないでしょうか(むしろ使ってるとこある?)

そこで今回紹介するのが

Vagrant

2013年頃ですかね、フロントエンド界隈でもドカンと流行りましたよね。とりあえずローカルに仮想環境を構築するなら非常に便利なのでおすすめです。

Vagrantを使うことでどういったメリットがあるかというと、

  • ホストPCと分離した開発環境を作成出来る(ホストPCは自分のPCのこと)
  •  Boxという概念があり、これを使うことで共通の環境を各々のPCに構築出来る
  • 開発環境の自動化(Chef、puppetなどと連携)

などでしょうか。

とりあえずこの回でやりたいことは、Vagrantで簡単に仮想環境を構築し、PHPの実装内容をブラウザで確認する、です。

概要はわかったので、早速入れて使ってみましょう。

下準備

まず、Vagrantを使うにはVirtual BoxとベースとなるOSイメージをインストール・ダウンロードしておきます。

まず練習用にディレクトリを作成しておきましょう。
ターミナルを開きホーム上に以下のようなフォルダを作成してみてください。

VirtualBoxのインストール
https://www.virtualbox.org/

OSのイメージをダウンロード
Discover Vagrant Boxes | Atlas by HashiCorp
※検索ボックスから「centOS」と打ち込み、一番上にでたcentos/7をダウンロード(2017.2.20現在)

ダウンロードしたBoxをVagrantに追加します。

Vagrantにboxを追加出来たか確認してみます。

作業用のディレクトリを作成します。

Vagrantの設定

下準備が出来ましたので、Vagrantの設定をしていきます。

Vagrantを初期化します。

Vagrantfileというファイルが作成されるので、そちらを少しいじってネットワーク周りの設定を行います。

自分の場合は29行目に、# config.vm.network “private_network”, ip: “192.168.33.10” という記述があるので、そちらのコメントを外して有効にしてやります。

では仮想マシンを起動してみます。

sshで起動した仮想マシンに接続してみます。

ログイン出来ましたでしょうか?
ちなみに仮想マシンからログアウトする際は

とやるだけです。
また仮想マシン自体を落として終了する場合は以下。

サーバー環境の構築

サーバー環境っていってもVagrantの仮想環境上(CentOS)の構築なんですけどね。ただCentOS上に構築していくため、実際のサーバー環境を構築するのと同じ手順になります。ここで動いたものは実際サーバー構築した際も同様に動くことになります。これはローカル環境でテストする際など捗りますね。

ではやってっていきましょう。

PHPとApacheをまずインストールします。
PHPは実際のWebアプリを記述するためのもに、Apacheはそれを動かすwebサーバーですね。

※ローカルのディレクトリでやらずにVagrantにssh接続し、そこで実行します。

無事PHPとApacheを入れられたら実際に動作確認をしてみましょう。まずApacheを入れたら以下のようなディレクトリが作成されます。

  • /var/www/
  • /etc/httpd/
  • /var/log/httpd/

他にもいくつか。
とりあえずここで確認するのはApacheを入れたことでドキュメントルートに置いたhtmlファイルを読み込み、表示出来るかどうか。

以下のコマンドを入力し、index.htmlファイルを生成してください。

内容は何でもいいのですが、とりあえず定番のHello Worldを。

Apacheを起動させます。

はいこれで後は適当なブラウザで先ほどVagrantfile内でもコメントを外したIPアドレスを打ち込んでみます。”192.168.33.10″でしたね。

はい、ちゃんとHello Worldが表示されましたね。今度はPHPを表示させてみましょう。まずApacheの設定ファイルを編集します。

以下のような記述がある箇所があると思います。

この下に以下の2つを追記してください。

これでとりあえずApacheが拡張子がphpとなってるものを解釈してくれます。それではtest.phpを作ってみましょう。場所は先ほどのindex.htmlと同じ場所になります。

test.phpが出来たら再びブラウザで、https://192.168.33.10/test.phpと入力してみてください。

こんな感じに現在日時が表示されたかと思います。
実際叩いた時間と差異があると思いますが、これはサーバーに設定されている時刻を表示していて、その設定は初期設定のまま何も弄ってないのでこのような日時が返ってきています。

まとめ

どうでしょうか、Vagrantを使った仮想環境構築。
凄い簡単に実際のサーバーと変わらない環境を作れたかと思います。

今回は最低限の表示周りのみだったので色々端折っていますが、MySQLを入れてDBを触ってみたりPHPだけではなくRubyやJava等、好きなものを入れて遊ぶことも可能です。

しかもローカルに仮想環境を立てているので、当然通常のサーバーのように稼働に応じて料金なんかも発生しませんし、グチャグチャに弄って飽きたらVagrantのboxを削除してしまえばいいだけ。

ちょっとしたサーバーのお勉強にもいいですね。

ではでは本日はこれで。良い開発ライフを〜

スポンサーリンク
336 x 280 レクタングル(大)
336 x 280 レクタングル(大)