ドットインストールを楽しむためのローカル開発環境【2024年版・Windows11・Vagrant】
React を使ったWebアプリの開発を始めるにあたって、改めてローカル開発環境を整えるべくドットインストールの「Vagrant入門 | ドットインストール PREMIUM」を再履修してみました。
※ 何を隠そう私はドットインストール大好きです！プレミアム版が無い頃からお世話になっていて困ったらすぐ課金して勉強してますし、実際に taguchi さんとお話できた時は光栄過ぎて言葉に詰まりました。笑
ふだんは Windows 端末を使っているのですが WSLの便利さに甘んじてローカル環境を汚しまくっているので、改めてキレイなローカル開発環境を手に入れるべくお勉強してみました。
今回の環境（2024年1月時点）
Windows 11 Pro
Virtual Box (7.0.12 r159484 (Qt5.15.2))
コースでは Mac の Terminalを使ってコマンドを実行していきますが、Windows では PowerShell でコマンドを実行していきます。
その他にも Windows環境での差異や、個人的に違和感を持った点などを自分なりにカスタマイズしてみました。
Boxファイルを取得
OSのテンプレートになる Boxファイルは Vagrantbox.esでも探すことができますが、Discover Vagrant Boxes でも探すことができそうです。
コースでは Cent OS を選択していますが Cent OS Linux が 2024年6月に開発終了する予定なので、新しい開発用Linuxを採用したいところですね。
Vagrant の新しい公式チュートリアル では Ubuntu 18.04 LTS 64bit をインストールすることになっていますが、Ubuntu はOSとしてサイズが大きいという話もあって、私は Cent OS の後継OSと目されている AlmaLinux を試しています。
ちなみに、Cent OS の後継OSと呼ばれているOSは複数あるみたいですよ。国産の MIRACLE LINUX とか、Cent OS の創設者の1人がつくった Rocky Linux とか。
vagrant box add almalinux/9Windows だからなのか PowerShell だからなのか分かりませんが、私の環境では Boxファイルをどのプラットフォームで使うのか選択肢が提供されていました。
1) hyperv
2) virtualbox
3) vmware_desktopコースのとおり、Virtual Box で使うべく`2`を選択しました。
`vagrant box list` コマンドを実行すると、Box ファイルの取得がうまくいっているか確認することができます。
`vagrant box` コマンドには、ほかにも以下のようなコマンドがあります。（ ※ `vagrant box -h` で使うことができるすべてのオプションが確認できます。 ）
`vagrant box list` : ローカルにあるBoxファイルを一覧表示する。
`vagrant box add` : ローカルにBoxファイルを追加する。
`vagrant box remove` : ローカルにある指定したBoxファイルを削除する。等
Boxファイルから仮想マシンを初期化・起動
取得してきた Box ファイルは OS のテンプレートになっているので、Box ファイルから開発環境ごとにいくつも仮想マシンをつくることができます。
仮想マシンを置きたいディレクトリを用意して以下のコマンドを実行して仮想マシンを初期化します。
vagrant init almalinux/9前述のとおり、Boxファイル自体は仮想マシンのテンプレートなので、 `vagrant init` コマンドで対象のディレクトリに仮想マシンのインスタンスを生成するようなイメージでしょうか。
仮想マシンを初期化すると、対象ディレクトリに Vagrantfile が生成されます。
後ほどセットアップする仮想マシンのWebサーバをブラウザから閲覧できるように、Vagrantfile をエディタで編集し、以下の記述を有効化しておきます。（コメントアウトを外す。）
config.vm.network "private_network", ip: "192.168.33.10"仮想マシンが初期化できたら、以下のコマンドで仮想マシンを起動できます。（起動までにしばらく時間がかかります。）
vagrant up`vagrant status` コマンドで、仮想マシンが起動しているかどうかを確認できます。`running` と表示されていれば起動できています。
`vagrant` コマンドには、ほかにも以下のようなコマンドがあります。（ ※ `vagrant -h` で使うことができるすべてのオプションが確認できます。 ）
`vagrant init` : 仮想マシンを初期化する。
`vagrant up` : 仮想マシンを起動する。
`vagrat status` : 仮想マシンの状態を確認する。
`vagrant suspend` : 仮想マシンを一時停止（スリープ）する。
`vagrant resume` : 仮想マシンを一時停止（スリープ）状態から復帰させる。
`vagrant halt` : 仮想マシンを終了させる。
`vagrant destroy` : 仮想マシンを削除する。等
仮想マシンに潜る
`vagrant up` に成功すると、以下のコマンドで仮想マシンにログインして仮想マシン内を操作できるようになります。イメージとしては、起動した仮想マシンに潜るような感じですね。
vagrant sshこの時に要求されるパスワードは `vagrant` になります。
※ 毎度この作業をするときは、映画「マトリクス」のような気持ちになります。「マトリクス リローデッド」でトリニティーが "I'm in." って言ってたアレです。分かりますか？余談です。
仮想マシンにWebサーバをセットアップ
デフォルトの仮想マシンには Webサーバは入っていいないため、Webサーバをインストールして、仮想マシンが起動する際に自動起動するように設定すると便利です。
以下のコマンドでWebサーバをインストールします。
sudo yum install -y httpd※ ちなみに Box ファイルのOS に Ubuntu を選択した場合、`yum`コマンドが使えませんでした。`apt` もしくは `apt-get` コマンドを使うべきのようです。
続いてWebサーバを起動するのですが、コースで使われている `service` コマンドが Almalinux では使えないため、`systemctl` コマンドを使います。
sudo systemctl start httpd`systemctl status httpd` コマンドでWebサーバが起動しているか確認できます。`Active: active(running)` の表示があれば起動しています。
仮想マシンが起動した時に一緒にWebサーバを起動させることができるのですが、コースで使われている`sudo chkconfig httpd on` コマンドが Almalinux では使えないので、以下のコマンドで同様の設定をします。
sudo systemctl enable httpd.service`systemctl is-enabled httpd.service` コマンドで、Webサーバの自動起動設定ができているか確認することができます。`enabled` と表示されていれば成功です。
仮想マシンを初期化した際に Vagrantfileを編集して、仮想マシンのWebサーバをブラウザから確認できるよう設定したため、ブラウザに `192.168.33.10`と入力すると、仮想マシンのWebサーバのルート`/var/www/html`が確認できるようになります。（デフォルトではテスト画面が表示されます。）
`/var/www/html`ディレクトリに index.html をつくれば、仮想マシンのWebサーバ越しにブラウザでページの挙動を確認することができます。
開発環境へのアクセスを簡易化したい
仮想マシン上のWebサーバのルートディレクトリは`/var/www/html` に設定されているのですが、このディレクトリは管理者ユーザーとして操作する必要があるので、けっこう扱いづらい状態にあります。
以下のコマンドを使うと、仮想マシンにログインした時のカレント（作業ルートディレクトリ）をウェブサーバのルートディレクトリとして扱うことができるようになります。
sudo rm -rf /var/www/html
sudo ln -fs /home/vagrant /var/www/html
chmod 755 /home/vagrant作業ルートディレクトに html ファイルをつくると、そのページをブラウザで表示できるようになります。これで仮想マシン内のWebサーバと作業ディレクトリのやりとりをしないで済むようになりました。
しかし、このままではわざわざ仮想マシンを起動しないとページやファイルの編集ができないため、ローカルにあるファイルと仮想マシン上のファイルを共有できるように設定します。
ローカルと仮想マシンとのフォルダ共有のために、あらかじめ SELinuxの設定を変更しましょう。
sudo vi /etc/selinux/config# /etc/selinux/config ファイル内
SELINUX=disabled上記設定を変更したら、仮想マシンを一旦終了しましょう。
※ SELinux は、システムにアクセスできるユーザーを管理者が詳細に管理する仕組みのようです。
ローカルと仮想マシンのフォルダを共有すべく、ローカルの Vagrantfile と同じ階層に`vagrant_data` というフォルダを用意して Vagrantfile に以下の設定を記述します。
config.vm.synced_folder "vagrant_data", "/home/vagrant"Vagrantfile と同じ階層にある`vagrant_data` フォルダと `/home/vagrant` フォルダを同期するで。という意味です。
SELinux の設定変更と `config.vm.synced_folder` の設定ができたら、仮想マシンを起動しましょう。
ローカルの`vagrant_data` フォルダに html ファイルをつくり、改めてブラウザから `192.168.33.10`を閲覧すると、ローカルのhtmlファイルが確認できるようになります。
「ローカルの`vagrant_data`フォルダ」と「仮想マシンの作業ルートディレクトリ」と「Webサーバのルートディレクトリ」 が同期しているので、ローカルにあるファイルを仮想マシンのWebサーバ越しに確認できるようになります。
まとめ
実現したローカル開発環境を確認すると「なんだ、こんなものか」と思う人もいるかもしれませんが「ブラウザにドラッグ&ドロップしてページを確認する」ことと「Webサーバにあるページを確認する」ことの違いが分かる人にとっては、違いの大きさが分かるかと思います。
ドットインストールのコースでは、仮想マシン内の一連のセットアップを自動的に済ませる Provisioning や、一度つくった仮想マシンを共有するためのBoxファイルの自作、Vagrant のプラグインについても言及がありますが、ここでは割愛します。
さて、ここまで書いといてなんですが最近は Vagrant よりも Docker で開発環境をつくるケースの方が増えているようなんですよね。
ということで、あくまで私がドットインストールを楽しむためのローカル環境構築のお話でした。
エラーが起きた時に役立つだろう参考サイト
この記事が気に入ったらサポートをしてみませんか？