WEBサイト制作

ショッピングサイト制作

システム開発

コンテンツ制作

TORATについて

制作の流れ

プライバシーポリシー

お問い合わせは
こちらから

TOP

Vagrant+VirtualBoxを使ってWeb開発環境を構築する方法

2020年03月17日

投稿者: アンディ

プログラミングで開発を行うためには、ローカルの開発環境は必須です。

ローカル環境でWebサイトを開発するための定番ツールはXAMPPやMAMP、仮想ツールのDockerやVagratなどがあります。

今回はVagrantとVirtualBoxを用いたローカル開発環境の構築方法をご紹介します。

なお、今回はMacOSを使って紹介しますがWindowsでも手順はほぼ同様です。

VirtualBoxとは

VirtualBox(バーチャルボックス)は、使用しているPCに仮想環境を構築して、別のOSをインストール・実行することができる仮想化ソフトです。

VirtualBoxのインストール

それではVirualBoxをインストールしていきましょう。

まずはVirualBoxの公式サイトにアクセスします。

左にある「Downloads」から自分の使用するPCのOSを選びパッケージをダウンロードします。

ダウンロードしたファイルを開き、「1」のDouble click on this iconをクリックしてインストールしていきます。

インストール後アイコンをアプリケーションに移動して完了です。

Vagrantとは

Vagrant(ベイグラント)は仮想環境を簡単に操作、構築するためのツールです。仮想マシンの立ち上げや環境構築には複雑な作業が必要となるのですが、Vagrantを使うことで簡単なコマンド操作で仮想環境を構築することができます。

Vagrantのインストール

それではVagrantの公式サイトからインストールを行いましょう。

使用するPCのOSにあったものをインストールします。

ダウンロードしたファイルを開き、「Vagrant.pkg」をクリックしてインストールします。

インストールが完了したら、ターミナルを開いて下記のコマンドで確認します。

vagrant -v

このようにバージョンが正しく表示されればインストール完了です。

Vagrant 2.2.7

仮想マシンの立ち上げ

フォルダの作成

まずはわかりやすいように仮想マシンを入れるフォルダを作っていきます。

ターミナルを開き下記のコマンドを入力していきます。

mkdir MyVagrant

cd MyVagrant

mkdir MyCentOs

これでホームディレクトリ内にMyVagrant/MyCentOsというディレクトリを作りました。

vagrantfileの作成

cd MyCentOsで移動し、下記のコマンドでvagrantfileを作成します。

cd MyCentOs

vagrant init bento/centos-7

初めて使用する場合はセットアップに時間がかかります。電源につないで待機するほうがいいかと思います。

vagrantfileの作成が完了したらvagrant upで仮想マシンを起動していきましょう。

vagrant up

ではvagrant statusコマンドで仮想マシンの状態を確認してみます。runningと表示されればOKです。

vagrant status

仮想マシンにログインする

仮想マシンにログインするにはvagrant sshのコマンドを打ってあげます。

vagrant ssh

コマンドの入力部分がvagrantから始まっていれば仮想マシンにログインしている状態となります。

逆にログアウトするにはexitと打ちます。

IPアドレス設定

次に接続先のIPアドレスを確認します。IPアドレスはVagrantfileにも書かれています。下記のコマンドで確認してみましょう。

いったんexitで仮想マシンからログアウトします。

exit

cat Vagrantfile | grep id

エディタでVagrantfileを開き、#を削除してコメントアウトを外します。IPアドレスは被らないようにする必要があります。今回は”192.168.33.11″にしてみました。

config.vm.network “private_network”, ip: “192.168.33.11”

FTPでアクセスする

FTPにはCyberduckやFilezillaなどがあります。今回はCyberduckを使ってアクセスします。

まずは新規接続からアクセスします。

サーバーやホスト名にはvagrantを立ち上げた際のログに表示された情報を入力します

上記の場合接続設定は下記のようになります。

ユーザー名とパスワードはデフォルトで「vagrant」の設定になっています。

  • Host:127.0.0.1
  • User:vagrant
  • Password:vagrant
  • Port:2200

プロトコルですが「SFTP」か「SSH」と書かれたものを選択します。

無事につながれば接続完了です。

PHPファイルの表示

先ほどアクセスしたFTPから新しくフォルダーを作成します。今回は「test」というフォルダーを作成し、その中に「index.php」を作成しました。

「index.php」には下記のコードを記述します。

<!DOCTYPE html>
<title>Vagrant</title>
</p>
<p>
<h1>Hello, Vagrant!!</h1>

ファイルが作成できたらターミナルからtestディレクトリに移動します。

cd test

そして下記のコマンドでPHPのウェブサーバーを立ち上げます。

php -S 192.168.33.11:8000


ではブラウザでhttp://192.168.33.11:8000にアクセスします。

下記のような画面が表示されると無事にPHPファイルを確認することができました。

仮想マシンの終了

作業が終わればマシンを終了させましょう。

終了するには以下のコマンドを入力します。

vagrant halt

仮想マシンからログアウトする際は以下のコマンドを実行します。

exit

まとめ

VagrantとVirtualBoxを使用し仮想マシンを作ることで、WEBの開発環境をサクッと構築することができます。様々なアプリケーションをインストールすることでMac上でWindowsの動作確認や、WordPressの環境構築も簡単に行うことができます。

この記事の投稿者

フロントエンドエンジニア

アンディ

記事はありませんでした
ブログ一覧へ

書いた人

WRITERS