vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

Vagrantで仮想マシンに接続&Webサーバを立ち上げてみよう

      2017/01/31

LINEで送る
Pocket

mac-intr-vagrant-virtualbox

  1. Macに『Vagrant + VirtualBox』を導入する手順
  2. Windowsローカル開発環境を『Vagrant + VirtualBox』で作ってみよう
  3. Vagrantを使ってみよう!Boxの取得から起動・停止・削除まで
  4. 『Vagrant Cloud』を利用してVagrantのBoxを追加してみよう
  5. Vagrantで仮想マシンに接続&Webサーバを立ち上げてみよう <- 本記事
  6. Vagrantで作成した環境を「コピー&配布して他人と共有する」方法
  7. 『Vagrant+VCCW』でWordPressローカル環境を構築してみよう
  8. 本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期!

こんにちは、okutani(@okutani_t)です。ローカル開発環境の構築には、よくXAMPP・MAMPなどが使われていますね。

今回はXAMPP・MAMPを使わずに、最近流行りの「Vagrant」を使うことで、かんたんにローカル開発環境下でWebサーバーを立ち上げるまでを紹介しています。

前回の記事で、Vagrantの導入方法など解説しています。記事冒頭のSeriesリンクから辿ってみてください。

では、仮想マシンに接続&Webサーバーの立ち上げ方法をみていきましょう。

スポンサーリンク

仮想マシンに接続する

では仮想マシンに接続してみましょう。

ログイン

下記コマンドを初期化をおこなったディレクトリ上で入力。

$ vagrant ssh

vagrant-start-web-server

sshで仮想マシンに接続出来ました。pwdコマンドでホームディレクトリを確認すると「/home/vagrant」と表示されています。

ログアウト

仮想マシンからログアウトするには下記コマンドを入力。

$ exit

では、仮想マシンにもう一度接続して、Webサーバーを構築していきましょう。

WEBサーバーを導入する

下記コマンドでWEBサーバーを導入します(前回の記事のとおり、OSはCentOS6.4)。

$ sudo yum -y install httpd

sudoは管理者権限で実行、yumはLinuxで使うパッケージのインストールコマンドです。上記コマンドでhttpdをインストールしました。

下記コマンドでWEBサーバーを立ち上げます。

$ sudo service httpd start

vagrant-start-web-server2

[OK]と出て、無事にWEBサーバーが立ち上がりました。

下記のコマンドを入力しておくと、仮想マシンを再起動した時に自動的にWEBサーバーが立ち上がります。

$ sudo chkconfig httpd on

またローカルで開発環境を構築するので、設定に邪魔なファイアウォールをOFFに。さらに再起動時にもファイアウォールをOFFにする設定をおこないましょう。

$ sudo service iptables stop
$ sudo chkconfig iptables off

index.htmlを配置してブラウザで確認する

CentOSでは「/var/www/html」に公開するWEBサイトを配置します。htmlディレクトリに移動しましょう。

$ cd /var/www/html

index.htmlファイルをviコマンドで作成します。

$ sudo vi index.html

viを使ったことがない方は下記の通り入力しましょう。

  1. 「i」キーを押して入力モードにする
  2. 表示したい文字列を入力する(今回は「Hello!Vagrant」と入力)
  3. ESCキーを押した後「:」キー、「w」キー、「q」キーと入力してENTER

index.htmlファイルを作成した後、exitコマンドで仮想マシンからログアウトします。

$ exit

その後、仮想マシン作成時に生成されている「Vagrantfile」にネットワークの設定を記述します。

$ vi Vagrantfile

29行目あたりにある「# config.vm.network “private_network”, ip: “192.168.33.10”」の先頭の「#」を削除することで「192.168.33.10」からindex.htmlにアクセスできるようになります。

vagrant-start-web-server4

Vagrantfileの設定を反映させるため、仮想マシンを再起動します。少し時間がかかります。

$ vagrant reload

再起動後、ブラウザでindex.htmlを確認してみましょう。ブラウザのアドレスバーに「192.168.33.10」と入力。

vagrant-start-web-server5

ブラウザに「Hello!Vagrant」と表示されているのが確認できました。

仮想マシンに接続せずにファイルを更新

sshで仮想マシンに接続してindex.htmlを作成しましたが、仮想マシン初期化時のディレクトリと、仮想マシン上のvagrantディレクトリリンクしています。

今回、myCentOSVMディレクトリ上で初期化したので、そこにindex.htmlを作成し、「vagrant」ディレクトリと「var/www/html」ディレクトリをリンクすれば、ログインせずにファイルの作成・編集ができて便利です。

$ vagrant ssh
$ sudo rm -rf /var/www/html

上記コマンドで先ほど作成したindex.htmlを削除しておきます。

$ sudo ln -fs /vagrant /var/www/html
$ exit

上記コマンドでリンクさせてからログアウトしました。

では、index.htmlをmyCentOSVMディレクトリ直下で作成してみましょう。

$ vi index.html

hello!myVagrantと書き込んで保存。

vagrant-start-web-server6

ssh接続せずにindex.htmlファイルを作成、反映できました。

IPアドレスとホスト名を紐付けるプラグインを導入

ここで「vagrant-hostsupdater」というプラグインを導入しておくと、サイトを表示する際に「http://192.168.33.10」というIPアドレスでのアクセスが「http://my-vagrant.com」といったホスト名でアクセスができるようになります。

とても便利なので導入しておきましょう。

一度仮想マシンを終了させます。

$ vagrant halt

下記コマンドで導入。

$ vagrant plugin install vagrant-hostsupdater

vagrant-start-web-server7

※正確にいうとvagrant-hostsupdaterは仮想マシンを立ち上げた際に、ホストOSの/etc/hostsにVagrantfileの設定に合わせて書き換えます。仮想マシン終了時に自動で起動前のhostsの設定に戻ります。

Vagrantファイルにホスト名を記述

導入後、Vagrantfileの「config.vm.network “private_network”, ip: “192.168.33.10”」の下あたりにホストの設定を記述します。

今回は「myvagrant.com」としていますが、お好きな文字列を利用できます。

config.vm.network "private_network", ip: "192.168.33.10”
config.vm.hostname = "myvagrant.com"

Vagrantfileを保存、「vagrant up」で起動。

その後「myvagrant.com」にブラウザからアクセスしてみましょう。

vagrant-start-web-server8

無事、自分で設定したホスト名でアクセスできました。

Vagrantを使った仮想マシンの接続&Webサーバーの立ち上げ方法は以上です。

おまけ: vagrant sshを簡略化する

vagrantへのSSH接続は、わざわざVagrantfileのあるディレクトリまで移動してコマンドを打たないといけないため、少々めんどうです。

次のコマンドを実行しておくと、その手間を省いてくれます。

参考Vagrant ssh-configでvagrant sshを快適にする – Qiita

$ cd Vagrantfileまでのパス
$ vagrant ssh-config --host myvagrant >> ~/.ssh/config

今回はmyvagrantにしましたが、任意の名前をつけられるのでお好きにつけてみてください。

こうすることで、どこのディレクトリにいても下記コマンドで仮想マシンにアクセスできます。

$ ssh myvagrant

これでより便利にVagrantが使えるようになりました。参考にしてください。

まとめ

仮想マシンにsshで接続した後、WEBサーバを立ち上げてブラウザから確認しました。

ホスト名をつけると作成中のWEBサイトの確認がしやすくなるので、vagrant-hostsupdaterはぜひ導入してみましょう。

  1. Macに『Vagrant + VirtualBox』を導入する手順
  2. Windowsローカル開発環境を『Vagrant + VirtualBox』で作ってみよう
  3. Vagrantを使ってみよう!Boxの取得から起動・停止・削除まで
  4. 『Vagrant Cloud』を利用してVagrantのBoxを追加してみよう
  5. Vagrantで仮想マシンに接続&Webサーバを立ち上げてみよう <- 本記事
  6. Vagrantで作成した環境を「コピー&配布して他人と共有する」方法
  7. 『Vagrant+VCCW』でWordPressローカル環境を構築してみよう
  8. 本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期!

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
ちなみにVagrantfileは一度設定をおこなえば、vagrant destroyで仮想マシンを削除してもすぐに同じ環境を作ることができるので便利です。参考にしてください。

 - Vagrant

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

『Vagrant+VCCW』でWordPressローカル環境を構築してみよう

こんにちは、okutani(@okutani_t)です。お店のサイトやブログなん …

VagrantのBOXを「複製&配布して他人と共有する」方法

こんにちは、okutani(@okutani_t)です。Vagrantで作った環 …

本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期!

こんにちは、okutani(@okutani_t)です。VCCWを使うとWord …

『Vagrant Cloud』を利用してVagrantのBoxを追加してみよう

こんにちは、okutani(@okutani_t)です。Vagrant1.5以降 …

Vagrantを使ってみよう!Boxの取得から起動・停止・削除まで

こんにちは、okutani(@okutani_t)です。WindowsやMacの …

Macに『Vagrant + VirtualBox』を導入する手順

こんにちは、okutani(@okutani_t)です。Macにローカル開発環境 …

Windowsローカル開発環境を『Vagrant + VirtualBox』で作ってみよう

こんにちは、okutani(@okutani_t)です。本記事では『Vagran …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。