今日からすぐできる！VagrantとVirtualBoxを使ってローカル開発環境を構築する方法【初心者向け】
MacのPCを使ってローカル開発環境を構築する方法を解説。VagrantとVirtualBoxを使って構築します。ターミナルの使い方から、ファイル転送ツールの導入まで各種ツールの使い方も詳しく紹介。今日からすぐに使えます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
プログラミング学習を始める際の最初の壁が、開発環境の構築だったということはないでしょうか？
今回はVagrantとVirtualBoxを用いたローカル開発環境の構築方法をご紹介します。これでPC上に開発環境を比較的簡単に用意することができます。
なお、今回はMacのPCを使って紹介します。
目次
本記事では下記の手順で解説していきます。
実際に開発環境を構築したあとは、Rubyのファイルを例にブラウザで確認するまでの手順を紹介します。
VirtualBoxをインストールする
VirtualBox（バーチャルボックス）とは、PC仮想化ソフトです。現在はオラクルが開発しており、製品表記は「Oracle VM VirtualBox」になっています。このPC仮想化ソフトを使うと、使用しているPC上に仮想的なPCを作成して、別の OSをインストール・実行することができます。PC仮想化ソフトには、VirtualBox以外にVMware PlayerやParallelsといったものがありますが、無料で手軽に使えて、Windowsや Linuxなど複数のOS をサポートしているVirtualBoxがおすすめです。
VirtualBoxのサイトにアクセスしてインストールしてみましょう。
左にある「Downloads」のボタンをクリックすると、OSごとのパッケージがダウンロードできます今回はMacですので、Mac OS Xを選びました。
ダウンロードしたファイルを開くとこのような画面になりますので、「Double click on this icon」をクリックしてインストールしてください。
これでVirtualBoxのインストールは完了です。
Vagrantをインストールする
続いて、Vagrant（ベイグラント）をインストールします。Vagrantとは、一言で言えば環境構築を簡単に立ち上げるためのツールです。Vagrantがなければ仮想マシンを立ち上げや環境構築にさまざまな作業が必要でしたが、Vagrantはそういったワークフローをまとめて行うことができます。
VirtualBoxとVagrantの2つがあることで、開発環境を仮想マシン上に自動作成することができます。
では早速インストールしましょう。Vagrantのサイトにアクセスすると、ダウンロードのボタンがあるのでクリックします。
今回はMacを使用するので「MAC OS X」をクリックしてダウンロードします。
ダウンロードしたファイルを開くとこのような画面になりますので、Vagrant.pkgをクリックしてインストールしましょう。
インストールが完了したらターミナルを開いて下記のコマンドを実行してみてください。
$ vagrant -v
無事にバージョンが返ってくればVagrantのインストールは完了です。
Vagrant 1.7.4
VagrantでCentOSを立ち上げる
続いて、インストールしたVagrantを使って、CentOSを立ち上げてみます。実際の操作はターミナルを使用しましょう。
Vagrantbox.esというサイトから立ち上げるために必要な情報を取得することができます。今回は、CentOS 7.0の64bitを使い、名前は「centos」にしましょう。
まずはターミナルを使って、Vagrantに「centos」という名前のboxを追加します。boxとは仮想マシンを手軽にクローンするためのベースイメージのことです。
$ vagrant box add centos http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20130427.box
boxの追加には少し時間がかかりますが、完了したら設定ファイルを作りましょう。
$ vagrant init centos
そして最後にVagrantを起動します。
$ vagrant up
これで、VagrantでCentOSの立ち上げが完了しました。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
ファイル転送ツールを導入する
それでは今度は、ファイル転送ツールを使ってMacからCentOS内のファイルを参照できるようにしましょう。
ファイル転送ツールにはCyberduckやFileZillaなど様々ありますが、今回はFileZillaを使っていくことにします。
先ほどの、「vagrant up」でVagrantを立ち上げる際に出力されるログを見てみましょう。ここにSSH接続に必要な情報はが表示されています。パスワードはvagrantになります。
~/D/I/centos ❯❯❯ vagrant up
Bringing machine ‘default’ up with ‘virtualbox’ provider…
==> default: Resuming suspended VM…
==> default: Booting VM…
==> default: Waiting for machine to boot. This may take a few minutes…
default: SSH address: 127.0.0.1:2200
default: SSH username: vagrant
default: SSH auth method: private key
default: Warning: Connection refused. Retrying…
==> default: Machine booted and ready!
==> default: Checking for host entries
それではさっそくFileZillaを立ちあげ、左上の新規接続ボタンを押してください。
ダイアログが立ち上がるので「New Site」をクリックしてから上記のようにログから得られた情報を入力していきます。Hostには「default: SSH address」で表示されたものを入力します。
これで無事につながれば接続完了です。
Rubyファイルをブラウザから確認する
最後に、具体的な使い方として、Rubyのファイルを作成して、それをブラウザで確認してみましょう。
まずは、httpdサーバの構築を行っていきます。ターミナルからSSH接続を行いましょう。
$ vagrant ssh
無事に接続ができたら、次はwebサーバーのインストールです。
$ sudo yum -y install httpd
インストールが完了したら起動します。
$ sudo service httpd start
下記のように表示されればOKです。
[vagrant@localhost ~]$ sudo service httpd start
Starting httpd: httpd: Could not reliably determine the server’s fully qualified domain name, using localhost.localdomain for ServerName
[ OK ]
続いて、Apacheの起動設定を行います。
$ sudo chkconfig httpd on
これでオンになりました。
オンになっていることは下記のコマンドで確認することができます。
$ chkconfig –list httpd
デフォルトではファイアウォール設定がされているので、iptablesコマンドを使って編集します。
sudo service iptables stop
sudo chkconfig iptables off
続いてはブラウザからアクセスするための設定を行っていきます。一度、SSHの接続から離れましょう。
$ exit
ここでVagrantファイルを編集していきます。
Vagrantファイルの編集はターミナルで下記のように入力します。
vi Vagrantfile
下記のようにコメントアウトされている一行があるので、#を削除してコメントアウトを外しましょう。削除するには、#の上にコマンドを合わせて、小文字の「x」と入力します。
# config.vm.network “private_network”, ip: “192.168.33.10”
削除できたら、「:wq」と入力して保存します。
保存をしたら、Vagratのリロードをします。
$ vagrant reload
リロードが完了したら192.168.33.10にアクセスしてみましょう。
このような画面が確認できればブラウザからアクセスできたということになります。
また、192.168.33.10に接続できることは、下記のコマンドで確認することができます。
$ vagrant ssh
$ ip a
せっかくなのでファイルを設置して表示もしてみます。シンボリックリンクを作成します。
$ vagrant ssh
$ sudo rm -rf /var/www/html
$ sudo ln -fs /vagrant /var/www/html
そして、下記のような「test.rb」のファイルを作成して、FileZillaを使ってアップします。
<!DOCTYPE html>
<title>Vagrant</title>
</p>
<p>
<h1>Hello, Vagrant!!</h1>
ここまでできたらブラウザを立ちあげて、http://192.168.33.10/test.rbへアクセスしてみましょう。
このようにブラウザで表示されるはずです。
これでVagrantを使ったローカル開発環境の構築ができました。
Vagrantを使えば他にも、Mac上でWindowsの動作確認を行ったり、簡単にWordPressの環境を構築したりすることができます。Vagrantなら簡単に試して、失敗したら簡単にやり直しができるのでぜひご自身で試してみてください。
もっと簡単にプログラミングの開発環境を準備したいという場合は、クラウド上で開発環境を使えるCloud9の使い方も合わせてご覧ください。
[お知らせ]TechAcademyでは、ローカル開発環境の構築なしでWebサービスの開発ができるオンラインブートキャンプを開催しています。プログラミング未経験からプロを目指すことが可能です。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
