CommentOut

VirtualBox+Vagrantで仮想環境を作る VirtualBox+Vagrantで仮想環境を作る

VirtualBox+Vagrantで仮想環境を作る

公開日:  最終更新日:

まず前提として、私の環境はWindowsです。
Windows上で、Linuxの開発環境を立ち上げたいと思ったので、VirtualBox+Vagrantで開発環境を整えます。

1.VirtualBoxをインストールします

VirtualBoxのプログラムは以下のURLからダウンロードできます。
https://www.oracle.com/jp/virtualization/technologies/vm/downloads/virtualbox-downloads.html

2.Vagrantをインストールします

Vagrantもダウンロードしてインストールします。
https://www.vagrantup.com/

3.Vagrant環境用のディレクトリを作成します

普通に右クリックでディレクトリを作っても良いし、コマンドのmkdirで作っても良いです。
この時、ディレクトリ名は半角英数字で作っておいた方が、後からトラブル少なく済むと思います。

ディレクトリを作ったら、PowerShellなどを起動して、cdコマンドで作成したディレクトリまで移動します。

4.VagrantのBox(仮想OSのようなもの)をインストールします

Boxは何が使えるの?って方はHashiCorp Cloud Platformにアクセスしてみてください。
様々なBoxが提供されています。

私はAlmaLinuxが使いたかったので、以下のコマンドを打ちました。

$ vagrant init almalinux/8

このコマンドで、AlmaLinux 8用のVagrantfileがカレントディレクトリに作られます。

ちなみに以下のメッセージが表示された人

==> vagrant: A new version of Vagrant is available: 0.0.0 (installed version: 0.0.0)!
==> vagrant: To upgrade visit: https:www.vagrantup.com/downloads.html

これは「新しいバージョンが出てるから、このURLからアップグレードしてね!」っていうメッセージです。

5.Vagrantを起動する

$ vagrant up

このコマンドで、カレントディレクトリのVagrantfileに基づいて、仮想環境が立ち上がります。

==> default: Box 'almalinux/8' could not be found. Attempting to find and install...
    default: Box Provider: virtualbox
    default: Box Version: >= 0
==> default: Loading metadata for box 'almalinux/8'
    default: URL: https://vagrantcloud.com/api/v2/vagrant/almalinux/8
==> default: Adding box 'almalinux/8' (v8.8.20230606) for provider: virtualbox
    default: Downloading: https://vagrantcloud.com/almalinux/boxes/8/versions/8.8.20230606/providers/virtualbox/unknown/vagrant.box
    default:
==> default: Successfully added box 'almalinux/8' (v8.8.20230606) for 'virtualbox'!
==> default: Importing base box 'almalinux/8'...
==> default: Matching MAC address for NAT networking...
==> default: Checking if box 'almalinux/8' version '8.8.20230606' is up to date...
==> default: Setting the name of the VM: WordPress_default_1732069839483_8992
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
==> default: Forwarding ports...
    default: 22 (guest) => 2222 (host) (adapter 1)
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key

こんな風になったらVagrantが立ち上がっています。

以下のコマンドでもvagrantの状態を確認することができます。

$ vagrant status
Current machine states:

default                   running (virtualbox)

このように表示されたら、実行中ですね。

6.VagrantにSSH接続する

$ vagrant ssh

SSH接続したいので、『vagrant ssh』です。覚えやすいです。

ssh接続した後、Linuxから抜けるには通常通り、『exit』で良いです。

$ exit

以降、vagrantの立ち上げ→接続は以下の手順で行います。

  • PowerShellを起動
  • cdでVagrantfileがあるディレクトリまで移動
  • 『vagrant up』でvagrantを立ち上げ
  • 『vagrant ssh』でSSH接続

7.Vagrantを終了する

$ vagrant halt

このコマンドでvagrantの仮想環境を終了させることができます。

8.Vagrantで立ち上げたOSにローカルディレクトリをマウントする

これが一番大事なんですが、ローカル環境のディレクトリを仮想環境のディレクトリと同期させることができます。
つまり、Windows上でVisualStudioCodeで開発したコードが、そのまま仮想環境のLinuxのディレクトリに同期させることができるので、そのまま動かしてみて、チェックができるんです。

Vagrantfileをメモ帳やVisualStudioCodeで開くと、以下のような記述があります。

Vagrant.configure("2") do |config|
  # The most common configuration options are documented and commented below.
  # For a complete reference, please see the online documentation at
  # https://docs.vagrantup.com.

これをさらに下の方に読んでいくと、こういう記述があるんです。

  # Share an additional folder to the guest VM. The first argument is
  # the path on the host to the actual folder. The second argument is
  # the path on the guest to mount the folder. And the optional third
  # argument is a set of non-required options.
  # config.vm.synced_folder "../data", "/vagrant_data"

この一番最後の行のコメントを外し、少し書き換えます。
“../data”はローカルディレクトリ、”vagrant_data”は仮想環境側のディレクトリです。

  config.vm.synced_folder "../data", "/vagrant_data"

例えば、Gitリポジトリのディレクトリ直下にVagrantfileを配置し、Gitリポジトリ自体をマウントする。仮想環境では、/var/www/html以下にプロジェクト用ディレクトリを作成し、そこにマウントする。

【ローカル】

  • Git
    • Gitリポジトリ
      • .git
      • Vagrantfile
      • src
      • dist
      • README.md

【Vagrant】

  • var
    • www
      • html
        • project

以下のような設定になります。

  config.vm.synced_folder "../{git_repository}", "/var/www/html/project"

でも、ディレクトリをマウントしただけでは、動作確認が取れません。
仮想環境のサーバー上にファイルが乗っただけなので、環境上でちゃんと動くのか実行確認ができなければ、使いにくいですよね。

9.Vagrant環境のアプリにローカルからアクセスする

Vagrantfileの中に以下のようなコメントアウトされた記述箇所があると思います。

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine and only allow access
  # via 127.0.0.1 to disable public access
  # config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"

10.Vagrantを削除する

不要になったらVagrant環境自体を削除することができます。

$ vagrant destroy

作成したVagrant環境を削除するにはdestroyです。
まぁ、VirtualBoxの環境リストから右クリックで消すことが出来るので、destroy使わなくて良いです。
haltと間違えてdestroyすると嫌なので・・・

宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成(カルーセルやバリデーション等)など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。

この記事を書いた人

uilou

uilou

プログラマー

基本的に、自分自身の備忘録のつもりでブログを書いています。 自分と同じ所で詰まった人の助けになれば良いかなと思います。 システムのリファクタリングを得意としており、バックエンド、フロントエンド、アプリケーション、SQLなど幅広い知識と経験があります。 広いだけでなく、知識をもっと深堀りしていきたいですね。