Laravel開発環境をVirtualBoxとSail(Docker)で構築する

Laravel開発環境をVirtualBoxとSail(Docker)で構築する Webアプリ開発

本記事では、仮想環境を活用したLaravel開発環境の構築方法について紹介します。
具体的にはVirtualBoxとSail(Docker)を組み合わせて、ローカルマシン上に開発環境を構築します。Windows OS上ではWSLとDocker Desktopを組み合わせての環境構築が一般的です。しかし、VirtualBoxを利用中で仮想化支援技術が競合しWSLが使えない環境やDocker Desktopを商用利用できない環境では一般的な環境構築手順を模倣できません。本記事では、そんな環境でも可能な手順と必要なツールについて説明します。

環境構築手順の概要

本記事で紹介する手順はマシンのスペックやネット環境によりますが、1~2時間程度で実行できます。仮想環境を活用したLaravel環境を構築するために下記をインストールしていきます。

  • VirtualBox(WindowsOS上)
  • Ubuntu(VirtualBox上)
  • Docker Engine(Ubuntu上)

そして、最後にLaravel公式が提供する環境構築ツールのSail(Docker)を使用してWebアプリを立ち上げます。
大まかな手順を理解できたら、環境構築を始めていきましょう。

WindowsへのVirtualBoxのインストール

VirtualBoxとは

VirtualBoxは、Oracleが公開しているオープンソースの仮想化ソフトウェアです。
これを使用すると物理的に1つのコンピュータ上で複数の仮想マシン(VM)を作成し、それぞれのVM上で異なるOSを実行することができます。

冒頭で触れたWSL(Windows Subsystem for Linux)とは、完全なLinux環境を使える点やリソースの割り当てを制御できる点などが違いとして挙げられます。

VirtualBoxのインストーラーのダウンロード

VirtualBox公式ページにアクセスして「Windows hosts」をクリックして、インストーラーをダウンロードします。

Virtualboxのインストーラーをダウンロード

インストーラーの実行

ダウンロードしたインストーラーを管理者権限で実行します。
インストールは簡単でセットアップウィザードが起動後、内容を確認し、基本的に「Next」ボタンをしていくだけです。

VirtualBoxのインストールを開始

インストール先等を個別に設定した場合は、途中で設定しましょう。
最後まで進み、Finishをクリックするとインストール完了です。次の作業は、環境によってはダウンロードやインストールに1時間以上かかるため、一時中断する場合は、チェックを外しておきましょう。

VirtualBoxへのUbuntuインストール

Ubuntuのダウンロード

Ubuntuのダウンロードページからisoイメージをダウンロードします。
データサイズが約5GBあり、ネット環境によっては時間がかかります。僕の環境では20~30分かかりましたので、ご注意ください。

Ubuntu環境に慣れないうちはGUIもあったほうが便利なため、Desktop版をダウンロードしました。Desktop版はGUIを使うためにスペックがServer版より必要になります。そのため、スペックを抑えたい場合はServer版をダウンロードしましょう。

Ubuntuのインストール

最初にVirtualBoxを立ち上げます。
VirtualBox立ち上げ後、「新規」ボタンをクリックします。

仮想マシンの作成画面が表示されたら、作成するマシンの名前を入力し、「次へ」をクリックします。
ここでの注意点は、最小限のインストールをしたい場合(容量を食いたくない場合、時間をかけたくない場合等)は、ISO Imageを選択しません。ISOイメージを選択すると後述の「通常のインストール」相当が実施され、20~30分ほど多く時間がかかります。
選択した場合は、「次へ」をクリックすると、選択しなかった場合と設定手順が変わります。しかし、設定手順が減る方向のため説明は省略します。

仮想マシン名の入力

次にメモリとプロセッサの設定を行います。
Windows側での処理に影響が出ない範囲でインストールの間だけでも多めに割り当てるとインストール作業が早く終わると思います。
設定の目安は緑の範囲になります。

メモリとプロセッサの設定

次にハードドライブの容量設定を行います。
Ubuntuをダウンロードするときに推奨された容量以上で割り当てましょう。
割り当て後、「次へ」をクリックします。

2023/07/23追記
Ubuntuの最低条件+数十GBは確保した方が良いです。
私は上の画像のように25GBで最初始めました。
しかし、チュートリアル的なアプリを1つ作っているだけで、VMが容量オーバーで起動しなくなりました。

設定したVMを起動すると、ISOイメージを選択するウィンドウが表示されます。ここで、ダウンロードしたファイルを選択し、「Mount and Retry Boot」をクリックします。

ISOイメージの選択

改めて、MVが起動すると「Try Install ~」が選ばれた状態になると思います。
Enterを押して進めます。

インストール画面が表示されたら、左の言語欄から使用したい言語を選択し、「Ubuntuをインストール」をクリックします。(下の画像では日本語を選択した後になります)

Ubuntuをインストール

次にキーボードレイアウトの選択画面になります。

キーボードの選択

ここでの注意点は、画面外に「続ける」ボタンがあることです。
デフォルトでは、ウィンドウが横か下にしか動かせず、見えないところにある「続ける」ボタンをクリックできません。
そこで、インストールウィンドウ選択した状態で、「Alt + F7」を押します
すると、ウィンドウが画面からはみ出せるようになります。

ALTとF7キーでウィンドウを画面外に広げる

次の画面で「最小インストール」を選択し、「続ける」をクリックします。
ちなみに、試しに「通常のインストール」を実行した際は30~40分かかりました。
一方、最小のインストールは10分程度でした。

最小インストールを選択

次の画面では「インストール」をクリックします。

ディスクを削除してUbuntuをインストール

「ディスクに変更を書き込みますか?」でも「続ける」をクリックします。

ディスクに変更を書き込む

エリアを選択し「続ける」をクリックします。

エリアを選択

名前やパスワード等を入力し「続ける」をクリックします。

ユーザ名・パスワードの入力

インストールが終わると再起動を要求されます。再起動すると、「Please remove the installation medium, then press Enter:」というメッセージともに起動するので、Enterを押します。
初回起動後、次のようなアカウント登録や障害発生時のレポート有無などを設定するウィンドウが表示されます。
内容を確認しながら、SkipやNextを繰り返すだけでOKです。

以上でUbuntuのインストールが終わりです。

パッケージの更新

最初にターミナルを開いて、パッケージを更新しましょう。

ターミナルを開いたら下記コマンドを実行して、パッケージリストの更新とインストールされているパッケージの更新を行います。

sudo apt-get update && sudo apt-get -y upgrade

以上でVirtualBoxへのUbuntuインストールが完了です。

補足:Guest Additionのインストール

インストール直後では、下記ができないため、Guest Additionのインストールを行います。
・ゲストOSの画面サイズが変更
・ゲストOSとホストOS間でのクリップボードの共有(コピペ)
・ゲストOSとホストOS間でのファイルのドラッグ&ドロップ
まず、VirtualBoxのウィンドウの「デバイス」タブから「Guest Additions CDイメージの挿入」をクリックします。

Gest Additionのインストールに必要なパッケージのインストールします。ターミナルから下記コマンドを実行します。

sudo apt install -y  gcc make perl

次に下記コマンドで挿入したCDの中にあるインストーラーを実行します。<ユーザー名>は、ご自身の環境に合わせて変更が必要です。

sudo /media/<ユーザー名>/Vbox_GAS_7.0.8/VBoxLinuxAdditions.run

コマンド実行後、VirtualBoxのウィンドウの「デバイス」タブから「クリップボードの共有」と「ドラッグ & ドロップ」を「双方向」に設定し、Ubuntuを再起動するとコピペ等ができるようになります。

UbuntuへのDocker Engineインストール

UbuntuへDocker Engineをインストールする際に必要なコマンドをまとめました。
詳細は公式ページをご参照ください。

Docker Engineのインストール

Docker Engineをインストールするには、aptのアップデートとHTTPS経由でDockerリポジトリを使えるようパッケージのインストールが必要です。aptのアップデートは、Ubuntuインストール時にしてあるため、下記コマンドを実行すると良いです。

sudo apt-get install -y ca-certificates curl gnupg

次に、下記コマンドでDocker公式のGPGキーを追加します。

sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg

リポジトリのセットアップを下記コマンドで行います。

echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

最後に下記コマンドを実行して、Docker Engineをインストールします。

sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

インストール後、下記コマンドを実行して、「This message shows that your installation appears to be working correctly.」のような文章が途中に表示されているでしょうか?
表示されていれば、Docker Engineを無事インストールできています。

sudo docker run hello-world

補足:Dockerの実行権限をユーザーに付与する

Dockerを実行するたびにsudoで実行し、パスワードを入力するのは面倒です。そのため、下記コマンドを実行して任意のユーザーに実行権限を付与します。<ユーザー名>を今回作ったユーザー名を指定すると良いです。

sudo  usermod -a -G docker <ユーザー名>
sudo reboot

Sailを使ってWebアプリを立ち上げる

いよいよ最後のステップです。
ここでは、Sailを使ってWebアプリを立ち上げます。
Sailの詳細については、公式ページをご参照ください。

SailでWebアプリを作成する

SailでWebアプリを作成するのは非常に簡単です。
下記コマンドを実行するだけです。下記の<example-app>を自分の作りたいアプリを開発するディレクトリ名にするとよいです。

curl -s https://laravel.build/<example-app> | bash

コマンドを実行すると下図のようにmysql, redis, meilisearch, mailpit, seleniumの環境が構築し始めます。
僕の環境では約10分待つと出来上がりました。
また、出来上がったディレクトリのサイズを確認すると約75MBでした。

Sailによる環境構築

Sailを使ったWebアプリの動作確認

Sailで作ったWebアプリの立ち上げには./vendor/bin/sailを実行します。毎回すべて入力するのは面倒なため、下記コマンドでエイリアスを設定し、sailだけで実行できるようにします。OSの起動の度にコマンドを打たないで済むためには、上記コマンドを~/.bashrcに書き込むと良いです。

alias sail='[ -f sail ] && sh sail || sh vendor/bin/sail'

いよいよWebアプリの立ち上げです。
下記コマンドを実行すると、Webアプリが立ち上がります。

cd <example-app>
sail up

Webアプリは、localhostで立ち上がっています。そのため、VM内のブラウザ(デフォルトではFirefox)でlocalhostにアクセスします。
次のようにLaravelのロゴなどが表示されていればOKです。

Webアプリの立ち上げ確認

上の画像とタブの文字列が違うと思います。
これはSailが作ったファイルを少し変更して、自分が作ったアプリにちゃんとアクセスしているのかを確認したためです。
同じように確認するには、次の画像のように「./resourecs/view/welcome.blade.php」のtitleタグを変更してください。

タイトルを変更してWebアプリの立ち上げ確認

変更後、ブラウザでページを更新するとタグに表示された文字列が切り替わります。
以上でSailによるWebアプリの立ち上げは完了です。

補足:VMのネットワーク設定を変更する

上記ではVM内のブラウザで確認しましたが、Windows側のブラウザでも確認できるようにしたいですよね?
そのためには、VMのネットワーク設定を変更します。

設定変更は簡単でVirtualBoxからVMの設定画面を開き、ネットワーク>割り当てを確認します。
デフォルトの「NAT」を「ブリッジアダプター」に変更し、OKをクリックすると完了です。
ただし、職場環境によってはVMのネットワーク接続を禁止しているかもしれないので、設定変更する際はご注意ください。

ネットワークの割り当てをブリッジアダプターに変更する

まとめ・感想

本記事では、VirtualBoxとSail(Docker)を使用してLaravel開発環境を構築する方法を紹介しました。
VirtualBoxを利用して仮想マシン(Ubuntu)を作成し、その中でSail(Docker)を活用することで、ローカル環境で効果的な開発を行うことができます。しかし、最終的には、自身のプロジェクトの要件や好みに合った開発環境を選択してください。
また、本記事で構築した開発環境を他の開発者と共有したい場合は、同じ手順を繰り返さず、今回作ったVMのイメージをエクスポートしてあげましょう。

ぜひこの記事を参考にして、効率的にLaravel開発環境を構築し、魅力的なWebアプリの開発に取り組んでください。

コメント

タイトルとURLをコピーしました