投稿日：2025-11-10 /制作工程の話【2】

昔はXAMPPを使っていました。
しかし、ウェブデザイン技能検定1級の実技試験ではVagrantが使われるということで、普段から慣れておこうと開発環境をVagrantに移行することに。
もともとインフラ系の知識にも興味があったのでちょうど良い。

公式サイトから「VirtualBox」と「Vagrant」をそれぞれダウンロード。
Vagrantのダウンロードは「AMD64」と「I686」というのがあったけど、「I686」は32bit版Linuxや古い環境用とのことで64bit版Windows用の「AMD64」を選択しました。
私が使ってるPCは「Intel」だけどそこは関係なく「AMD」で良いそうです。
ちなみにインストール中に出てくる選択は「Yes」と「Next」で大丈夫でした。

インストールが完了したらとりあえずPCを再起動。
任意の場所にフォルダ作って、そこでターミナル開いて下記のコマンドを入力！
vagrant init ubuntu/focal64
「ubuntu/focal64」は2020年4月リリースのUbuntu 20.04 LTS（Focal Fossa）でサポート期限は2030年4月までだし勉強・開発用途ならこれで良いってちゃっぴーが言ってた。
（そして後ほど作り直すはめに……）
フォルダ内にVagrantfileが生成されたら今度はその中身の書換え。
初期のままだとただUbuntuが起動するだけらしいので、ちゃんとウェブサーバーとして機能するように、まるっと下記のように書き換えました。
表示用に全角スペース使ってるので丸コピは注意です。
Vagrant.configure("2") do |config|
　config.vm.box = "ubuntu/focal64"
　config.vm.network "private_network", ip: "192.168.33.10"
　config.vm.synced_folder "./htdocs", "/var/www/html"
　config.vm.provision "shell", inline: <<-SHELL
　　apt-get update
　　apt-get install -y apache2 mysql-server php libapache2-mod-php php-mysql
　　systemctl enable apache2
　　systemctl enable mysql
　SHELL
end

1行目：VagrantのVer.2形式で設定しますよ、という宣言。
　2013年頃にVagrant1.1で構文が大きく変わったそうで、今は"2"と指定するのが基本。
　config はこの中で設定項目を定義していくための変数。
2行目：どのOSの仮想マシンを使うか。ここでは「Ubuntu 20.04 LTS」を指定。
3行目：ホスト（自分のPC）からアクセスできるように仮想マシンのIPアドレスを設定。
　Vagrantのチュートリアルなどでよく使われる「192.168.33.10」を指定しました。
　VirtualBoxのHost-Only Adapterが「192.168.33.1」なので、同じ帯域で通信できるように。
　「33」の部分はVirtualBox側のAdapterと一致させておく必要がある。
　「10」の部分は2～254の範囲で自由に使ってOK。
4行目：ホスト側のhtdocsフォルダを仮想マシン内の/var/www/htmlに同期する設定。
　vagrantfileと同じ階層に「htdocs」を作ってそこにHTMLファイルとかを入れる構成。
5行目：仮想マシン起動時に実行するシェルスクリプトの開始宣言。
　provision は「初期セットアップ」を意味する。
6行目：パッケージリストを更新（定番）
7行目：Apache, MySQL, PHP関連のパッケージをまとめてインストール
8、9行目：ApacheとMySQLを起動時に自動起動するように設定
10行目はシェルスクリプトの終了、endは設定全体の終わりを意味する。

Vagrantfileを保存したら、ターミナルで「vagrant up」と入力して起動。
しばらくすると仮想マシンが立ち上がるので、ブラウザで「192.168.33.10」にアクセス。
「Apache2 Ubuntu Default Page」が表示されたらOK！

これでとりあえずhtdocsをルートとするウェブサーバー環境の完成です。