はじめに
開発環境！構築するのはとても面倒ですよね。バージョンが違うとすぐに動かなくなったり、チームで開発するときにOSの違いでコケたりします。この記事は、Vagrantという仮想環境を構築するソフトウェアを使って、Node.jsの開発環境を構築していきます。さらに、最近Visual Studio Codeに実装された「Remote-SSH」機能を用いて、ローカルのVSCodeと構築した開発環境をつなげて、より快適に開発を行う方法を紹介します。
やること一覧
- VirtualBoxのインストール（ホスト側）
- Vagrantのインストール（ホスト側）
- Ubuntu 18.04のインストール（ホスト側）
- Ubuntu 18.04初期設定（リモート側）
- Node.jsのインストール（リモート側）
- VSCodeの設定（ホスト側）
長い……
検証環境
【ホスト側】
- Windows 10 Pro 1903 (Windows_NT x64 10.0.18362)
- VirtualBox 6.0.12
- Vagrant 2.2.5
- Visual Studio Code 1.39.1 (user setup)
【リモート側】
- Ubuntu 18.04 LTS
- Node.js v12.13.0 LTS
- npm 6.12.0
VirtualBoxのインストール（ホスト側）
VirtualBoxの公式サイトに行き、自分のOSに合ったインストーラーをダウンロードしましょう。
https://www.virtualbox.org/wiki/Downloads
ダウンロードできたら実行し、最後まで進めます。基本的には初期設定のままで終わらせてしまっても大丈夫でしょう。
起動できたらOKです。
Vagrantのインストール（ホスト側）
Vagrantの公式サイトに行き、自分のOSに合ったインストーラーをダウンロードしましょう、
https://www.vagrantup.com/downloads.html
ダウンロードできたら実行し、最後まで進めます。基本的には初期設定のままで終わらせてしまっても大丈夫です。
インストールできたら、コマンドプロンプトを開いてください。
Windowsキー+R→cmd と入力→Enter で起動することができます。
起動できたら、
vagrant --version
と入力し、Enterを押してください。ここで、バージョン情報が出てきたらインストール成功です。
Ubuntu 18.04のインストール（ホスト側）
VirtualBoxとVagrantのインストールが出来て、仮想環境を立ち上げる準備が整ったので、早速Ubuntuをインストールしていきましょう。とはいっても、すでに用意されているboxファイルを使って一つのコマンドだけで出来てしまうので、かなり楽だと思います。
フォルダを作成
まずはフォルダを作ります。自分はドキュメントフォルダにdev_envフォルダを作り、その中にubuntu1804フォルダを作りました。
C\Users\(ユーザー名)\Documents\dev_env\ubuntu1804という階層になっていたらOKです。
Vagrantfileを作成
このフォルダの中でShiftキー+右クリック →「PowerShellウィンドウを開く」を選択し、Powershellを開きます。
カレントディレクトリがその場所になっていることを確認し、以下のコマンドを実行します。
vagrant init ubuntu/bionic64
少し待った後に、A Vagrantfile has been placed in thid directory. と表示されたらOKです。
フォルダの中身を見てみると、実際に「Vagrantfile」というファイルが作成されていることがわかります。これを編集していきます。
Vagrantfileの編集
初期状態でも動くのですが、ここでは開発環境向けに、IPアドレスの固定と、メモリを増やす設定をしていきます。
生成されたVagrantfileをテキストエディタで開いてください。ここではNotepad++を使います。
ポートフォワードの設定
ポートフォワードを設定して、ホスト側からリモート側のネットワークへアクセス出来るようにします。
26行目をアンコメント（コメントになっているのを外す）し、ゲストとホストのポートの番号をそれぞれ変更します。
config.vm.network "forwarded_port", guest: 3000, host: 3000
このように設定すると、ホスト側でlocalhost:3000にアクセスした際、ゲスト側のlocalhost:3000にフォワーディングされます。
IPアドレスの固定
次に35行目、IPアドレスを固定する設定を、アンコメントします。
config.vm.network "private_network", ip: "192.168.33.10"
初期状態で、192.168.33.10という値になっているので、そのまま使います。
メモリを増やす
初期状態ではメモリが1024MB(=1GB)となり、メモリ不足になる可能性があります。そこで、余裕を持って2048MB(=2GB)に変更します。（もしホスト側にメモリに余裕がある場合は、4096MB(=4GB)や8192MB(=8GB)でも良いかもしれません）
それぞれ52行目、57行目、58行目をアンコメントします。そして、vb.memoryの値を変更する値(2048)にします。
config.vm.provider "virtualbox" do |vb|
# # Display the VirtualBox GUI when booting the machine
# vb.gui = true
#
# # Customize the amount of memory on the VM:
vb.memory = "2048"
end
最終的にコメントになっている部分を除外すると、以下のような感じになります。（わからなくなった場合はこれをコピペしてもOKです）
# -*- mode: ruby -*-
# vi: set ft=ruby :
Vagrant.configure("2") do |config|
config.vm.box = "ubuntu/bionic64"
config.vm.network "forwarded_port", guest: 3000, host: 3000
config.vm.network "private_network", ip: "192.168.33.10"
config.vm.provider "virtualbox" do |vb|
vb.memory = "2048"
end
end
めちゃくちゃスッキリしてしまった……これだけでUbuntuがインストールできるんですね！
Vagrant upをする(インストール)
先程編集したVagrantファイルを上書き保存し、もう一度Powershellの画面に戻ります。
編集したVagrantファイルを読み込ませることで、初回時にダウンロード・インストールを全自動で行ってくれます。
今いるカレントディレクトリを確認し、Powershellで以下のコマンドを入力し、実行します。
vagrant up
ずらずらずらとインストールが進みます。回線にもよりますが、10分程度で終わります。
処理が終わって入力状態になったら完成です！
VirtualBoxを起動すると、仮想マシンが動いていることがわかります。
これでUbuntuの仮想環境が整いました。
Ubuntu 18.04の初期設定（リモート側）
それでは早速、構築したUbuntu18.04にSSH接続を行い、Ubuntuの初期設定を行っていきましょう。
SSH接続する
Windows10の最新バージョンでは、sshが標準で使えるようになっています。もし使えなかったら、以下の記事の「Windows版 OpenSSH のインストール」欄の通りに進めて、sshコマンドが使えるようにしてください。
Powershellに以下のコマンドを入力し、実行します。
vagrant ssh
このようにubuntuのshellが表示されたらOKです。
もしもフォントがおかしくなるようでしたら、タイトルバーを右クリック→プロパティで、フォントをMSゴシックに変更してください。
パッケージをアップデートする
Ubuntuのインストールが終わった直後は、いくつかのパッケージが最新ではないかもしれません。そこで、まずはパッケージのアップデートを行います。
以下のコマンドを入力し、実行してください。
sudo apt update -y
パッケージリストの更新が終了したら、実際のアップデートを行います。
sudo apt upgrade -y
少し時間がかかりますが、アップデートはこれで完了です。
日本語化する
これはしなくてもOKなのですが、一応日本語化しておきましょう。
まずは日本語化関連パッケージをインストールします。
sudo apt install language-pack-ja-base language-pack-ja
ロケールを変更します。
sudo localectl set-locale LANG=ja_JP.UTF-8 LANGUAGE="ja_JP:ja"
最後に読み込み直して完了です。
source /etc/default/locale
Node.jsのインストール（リモート側）
ここではLTS版（長期サポート版）をインストールしていきます。
まずはaptでnodeとnpmをインストールします。
sudo apt install nodejs npm -y
次にNode.jsのバージョン管理パッケージの「n」をインストールします。
sudo npm install n -g
nがインストールできたら、Node.jsのLTS版を指定してインストールします。このときnpmも該当バージョンが同時にインストールされます。
sudo n lts
これで最新バージョンが別にインストールされたので、衝突を防ぐために初めにaptで入れたほうのNode.jsとnpmを削除(purge)します。
sudo apt purge -y nodejs npm
最後にシェルを再読み込みして、おしまいです。
exec $SHELL -l
インストールできたか確認
vagrant@ubuntu-bionic:~$ node -v
v12.13.0
vagrant@ubuntu-bionic:~$ npm -v
6.12.0
インストールできました。
ここで一度リモートのSSH接続を終了します。 exit を入力しEnterを押すとSSH接続が終了します。
Powershellの画面はこのあとで使うので、閉じないで次のVSCodeの設定に進んでください。
VSCodeの設定（ホスト側）
いよいよVSCodeで開発環境にSSHで接続し、実際に開発できるようにしてみます。
拡張機能のインストール
Microsoftの拡張機能、「Remote - SSH」をインストールします。
すると、画面左下に緑色のマークが表示されると思います。
これでインストール完了です。
SSH接続ファイルを用意する
先程のPowershellの画面に戻り（閉じてしまった人は、vagrantfileのある場所に移動してください）以下のコマンドを入力します。
vagrant ssh-config --host ubuntu1804 >> config
すると、Vagrantfileのある場所に「config」ファイルが出来上がります。
これを、Cドライブ→Users→(自分のユーザー名)→「.ssh」フォルダの中に入れてください。（.sshフォルダがない場合は自分で新しく作成してください）
このように配置できたらOKです。VSCodeの画面に戻ります。
このconfigファイル、Powershellで書き出すと文字コードがUTF-16 LEになってしまうようなので、UTF-8に変換します。
VSCodeにconfigファイルを読み込ませてください。
「UTF-16 LE」と書かれているところを押して、「エンコード付きで保存」をクリックします。
この中で「UTF-8」を選択します。
これでSSH接続ファイルの用意は完了です。
VSCodeで設定ファイルを読み込ませる
次に、画面左下の緑のマークをクリックします。
すると、プルダウンメニューが出てくるので、「Remote-SSH: Connect to Host...」をクリックします。
「+ Add New SSH Host」をクリックします。
入力欄に「ubuntu1804」と入力し、Enterを押します。
新しく画面が開き、少し経って左下に「SSH: ubuntu1804」と表示されていたらOKです。
これで構築した開発環境に接続することが出来ました！実際にターミナルを開いてみると、SSH接続のターミナルが用意されていることがわかります。
Vagrant基本操作
Vagrantfileのある場所でターミナル（Powershell）を開き、
仮想環境を開始する: vagrant up
仮想環境を終了する: vagrant halt
現在の状態を表示する: vagrant status
スナップショットをとる: vagrant snapshot save (スナップショット名)
スナップショットから復元する: vagrant snapshot restore (スナップショット名)
その他のコマンドについては以下の記事が参考になります。
https://qiita.com/oreo3@github/items/4054a4120ccc249676d9
boxファイルのエクスポート・復元
現在の仮想環境の状態をそのまま「boxファイル」としてエクスポートすることができます。これにより、他のPCでもそっくり同じ環境をすぐに再現することができます。
- 今動いている仮想環境を終了する:
vagrant halt - boxファイルとしてパッケージングする:
vagrant package→同じディレクトリにpackage.boxが生成されます。 - 他のPCにboxファイルを移す
- boxファイルをインポートする:
vagrant box add (新しいbox名) package.box
boxファイルを渡すだけで環境構築ができてしまうので、チーム開発などで役立ちます。
終わりに
自分はこれまでローカルに環境構築していましたが、複数PCを持っているとその都度構築やり直しになっていました。最近では全てVagrantで仮想環境を作り、そこで動かすことでスムーズに行うことができるようになりました。是非参考にしてみてください！