参考: Ubuntu 18.04 on Windows + Vagrant 環境構築

ここでは、参考として Vagrant という仮想マシン自動構成ソフトウェアを用いた Ubuntu 18.04 環境の構築方法を記しています

あくまで参考資料なので、本稿は飛ばしてしまって問題ありません



構成

  • OS:
    • Windows 10
  • ゲストOS:
    • Ubuntu 18.04 on VirtualBox + Vagrant
  • エディタ:
    • VSCode

VSCode インストール

まずは VSCode エディタを 公式ページ からダウンロードしてインストールします

インストール時は、以下の項目にチェックを入れておくことを推奨します


Windows上でのUbuntu環境構築

Windows上にUbuntu環境を構築する手法としては大きく以下の3つがあります

  • VMware Workstation Player や VirtualBox に Ubuntu OS をインストールして直接使う
    • ホスト型仮想環境の構築・使用方法としては最も古くから存在する方法であり、安定して動作する
    • Ubuntu の GUI 環境を使って開発できるため、分かりやすい
    • Windowsの上で別のOSの GUI を動かす方法であるため、高いマシンスペックを要する
  • VirtualBox + Vagrant 環境に Ubuntu 仮想環境を構築する
    • 基本的に1つ目の方法と同じだが、GUI ではなく CUI で動かすため、より低いマシンスペックで動作可能
    • Vagrant という仮想マシン構成ツールを用いることで、簡単に仮想マシンを構築することができる
    • 現在のWeb開発の主流となっている方法であるが、環境によっては不安定なこともある
  • WSL2 に Ubuntu ディストロパッケージを載せる
    • Windows Subsystem for Linux (WSL) のバージョン2 であれば、Dockerコンテナを用いたWeb開発も可能であり、動作も軽量なためおすすめ
    • ただし、ローカル環境でのSSL通信(https化)などができないため、現時点ではホスト型仮想環境による開発環境を推奨
    • 参考: Ubuntu 18.04 on WSL2 環境構築

ここでは、2つ目の環境構築手順を記します


VirtualBox, Vagrant のインストール

公式ページからインストーラをダウンロードしてきても良いですが、ここでは Chocolatey(Windows用パッケージマネージャ)を使った方法を採用します

Win + X |> A キー => 管理者権限PowerShell 起動

# Chocolatey 導入
> Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

# Chocolatey バージョン確認
> choco -v
0.10.15

# VirtualBox, Vagrant インストール
> choco install -y virtualbox vagrant

# シンボリックリンクを有効化
> fsutil behavior set SymlinkEvaluation L2L:1 R2R:1 L2R:1 R2L:1

# コンピュータの再起動が必要なので、再起動する
> Restart-Computer

# 再起動が完了したら Vagrantプラグインをインストール
## Windowsホスト側と仮想マシン側のファイル共有のマウント問題等を解決するためのプラグインを導入
> vagrant plugin install vagrant-vbguest
> vagrant plugin install vagrant-winnfsd
> vagrant plugin install vagrant-ignition

Ubuntu 18.04 仮想マシンの構築

Dockerコンテナを用いたWeb開発の最近のトレンドでは、仮想マシンとして、Docker特化Linuxである CoreOS を採用することが多いです

しかしここでは、筆者のメイン開発環境である Ubuntu 18.04 を採用します

Win + X |> A キー => 管理者権限PowerShell 起動

# 仮想マシンを構築するディレクトリを作成
## ここでは ユーザフォルダ/vagrant/ubuntu1804/ をプロジェクトディレクトリとする
> mkdir ~\vagrant\ubuntu1804

# プロジェクトディレクトリに移動
> cd ~\vagrant\ubuntu1804

# `Vagrantfile` というファイルを作成し、VSCode で編集
> code Vagrantfile

Vagrantfile

Vagrantfileとは、仮想マシンの構成・設定を記述するファイルであり、ここに使用するOSや共有フォルダ等を記述します

Vagrantfile
# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure("2") do |config|
  # Boxイメージ(仮想OS): Ubuntu 18.04 を指定
  config.vm.box = "generic/ubuntu1804"

  # VirtualBox Guest Additions を毎回インストールしていると起動が遅くなるため無効化
  config.vbguest.auto_update = false

  # 共有ディレクトリ
  ## Windowsユーザホームディレクトリを仮想マシンの /win/ ディレクトリにマウント
  config.vm.synced_folder "~", "/win"

  # VirtualBox設定
  config.vm.provider :virtualbox do |vb|
    # VirtualBox起動時の挙動を確認したい場合に有効化
    # vb.gui = true
  end
end

仮想マシン起動

PowerShellに戻り、以下のコマンドを実行します

# Vagrantfile の内容に基づいて仮想マシン起動
> vagrant up

## => 初回起動時はBoxイメージのダウンロードに時間がかかるため、しばらく待つ

# 起動したら VirtualBox Guest Additions をインストール
## => 3Dアクセラレーションによる動作高速化や不安定な動作を解消したりする
> vagrant vbguest

ネットワーク通信設定

VirtualBox上に構築する仮想マシンがネットワーク通信するためには、Windowsホストと通信ができる状態にしておく必要があります

通信経路は以下のようなイメージです

vmnet.png

まず、ホスト-ゲスト(VirtualBox仮想マシン)間でネットワークを形成するために、VirtualBoxの IPv4 アドレスを確認してください

# VirtualBox Host-Only Network の IPv4 アドレスを確認
> ipconfig
 :
VirtualBox Host-Only Network:
     :
    192.168.56.1 # <= IPv4 アドレスを確認

上記で確認した IPv4 アドレスのネットワーク部(192.168.56)をホスト-ゲスト間のプライベートネットワークに指定します(ホスト部(1)は重複しない任意の値を割り振る必要があります)

Vagrantfile
Vagrant.configure("2") do |config|
  # ..(略)..

  # ホスト-ゲスト間のプライベートネットワーク作成
  ## ネットワーク部: VirtualBox Host-Only Network と同じネットワーク部を指定(192.168.56)
  ## ホスト部: 重複しない任意の値を割り振る(下記の場合 100)
  config.vm.network "private_network", ip: "192.168.56.100"
  
  # 仮想マシンのネットワークとWindowsホスト側のネットワークをブリッジモード接続する場合
  ## - 公共ネットワークの場合はセキュリティ的にあまり良くない
  ## - vhosts(vagrant-hostsupdater)が使えない
  # config.vm.network "public_network"
end

Vagrantfile を編集したら PowerShell で Vagrant を再起動します

> vagrant reload

Vagrantの起動に失敗する場合

Vagrantは様々な理由で起動に失敗することがあります

以下のような対応を行い、それでも上手く行かない場合は、VMware Workstation Player 上で直接使うか、デュアルブート環境を作るのがベストであると著者は考えています

  • Vagrant, VirtualBox を最新バージョンに更新する

    > choco update -y vagrant virtualbox
  • Vagrantfile の設定変更

    • config.vbguest.auto_update = true にしてみる
    • config.vm.network の設定をコメントアウトして起動してみる

VSCode Remote Development プラグインの導入

起動した仮想マシンは、リモートサーバと同じような扱いになるため、サーバIPアドレス(Vagrantfile に設定した 192.168.56.100)に SSH で接続して操作する必要があります

そのため、ファイルの編集等は、操作感がいまいちなターミナルエディタ(vim, nano など)を使って行わなければなりません

しかし、VSCodeエディタにはこういったリモート開発をシームレスに行うための Remote Development プラグインがあるため、これをインストールしておくと便利です

  1. VSCodeを起動し、Shift + Ctrl + X キーを押してプラグイン検索窓を開く
  2. Remote Development で検索し、プラグインをインストールする

remote-development.png

仮想マシンへのアクセス

PowerShell に戻り、仮想マシンのSSH接続情報を設定ファイルに書き出します

# vagrant ssh-config |> 出力内容を ~\.ssh\config ファイルに書き込む
## --host: 任意の接続ホスト名を指定
> vagrant ssh-config --host ubuntu1804 | Out-File -Append -Encoding utf8 ~\.ssh\config

上記コマンドで、仮想マシンへのSSH接続情報が、ホスト名 ubuntu1804 で登録されます

VSCode上で Shift + Ctrl + P キーを押してコマンドパレットを表示し、connectと打つと Remote-SSH: Connect to Host... というコマンドが出てくるはずなので、このコマンドを実行します

remote-ssh.png

その後 ubuntu1804 というホストを選択すると、仮想マシンに接続された状態のVSCodeが起動します

このVSCode上で Shift + Ctrl + @ キーを押すと、Ubuntuのターミナルが起動するため、以降の操作はこのターミナル上で行います

remote-vscode.png


ネットワーク起動待ちサービスの停止

Ubuntu Linux は起動時に、ネットワークサービス関連の立ち上げに非常に時間がかかるため、ネットワーク起動待ちサービスは無効化してしまった方が良いです

そのため、仮想Ubuntu接続済みの VSCode のターミナルで以下のコマンドを実行します

# ネットワーク起動待ちサービスのスタートアップ起動を無効化
$ sudo systemctl disable systemd-networkd-wait-online.service

# ネットワーク起動待ちサービスを操作できないようマスクする
## マスクを外す場合は sudo systemctl unmask systemd-networkd-wait-online.service
$ sudo systemctl mask systemd-networkd-wait-online.service

仮想マシンの停止

仮想マシンを停止する場合は、PowerShellで vagrant halt コマンドを実行します


Docker環境構築

Ubuntu仮想マシンに接続したVSCodeのターミナル上で 参考: Docker on Ubuntu 18.04 環境構築 の手順を実行します