LoginSignup
8
8

More than 3 years have passed since last update.

@920oj(Junya Oiwa)

VagrantでNode.jsの開発環境(Ubuntu18.04)を構築し、VSCodeでリモートSSH接続して開発する

Last updated at Posted at 2019-11-07

はじめに

開発環境！構築するのはとても面倒ですよね。バージョンが違うとすぐに動かなくなったり、チームで開発するときに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

image.png

ダウンロードできたら実行し、最後まで進めます。基本的には初期設定のままで終わらせてしまっても大丈夫でしょう。
起動できたらOKです。

image.png

Vagrantのインストール（ホスト側）

Vagrantの公式サイトに行き、自分のOSに合ったインストーラーをダウンロードしましょう、
https://www.vagrantup.com/downloads.html

image.png

ダウンロードできたら実行し、最後まで進めます。基本的には初期設定のままで終わらせてしまっても大丈夫です。

インストールできたら、コマンドプロンプトを開いてください。
Windowsキー+R→cmd と入力→Enter　で起動することができます。

起動できたら、
vagrant --version
と入力し、Enterを押してください。ここで、バージョン情報が出てきたらインストール成功です。

image.png

Ubuntu 18.04のインストール（ホスト側）

VirtualBoxとVagrantのインストールが出来て、仮想環境を立ち上げる準備が整ったので、早速Ubuntuをインストールしていきましょう。とはいっても、すでに用意されているboxファイルを使って一つのコマンドだけで出来てしまうので、かなり楽だと思います。

フォルダを作成

まずはフォルダを作ります。自分はドキュメントフォルダにdev_envフォルダを作り、その中にubuntu1804フォルダを作りました。
C\Users\(ユーザー名)\Documents\dev_env\ubuntu1804という階層になっていたらOKです。

Vagrantfileを作成

このフォルダの中でShiftキー+右クリック →「PowerShellウィンドウを開く」を選択し、Powershellを開きます。

image.png

カレントディレクトリがその場所になっていることを確認し、以下のコマンドを実行します。

vagrant init ubuntu/bionic64

少し待った後に、A Vagrantfile has been placed in thid directory. と表示されたらOKです。

image.png

フォルダの中身を見てみると、実際に「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です）

Vagrantfile
# -*- 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分程度で終わります。

image.png

処理が終わって入力状態になったら完成です！

VirtualBoxを起動すると、仮想マシンが動いていることがわかります。

image.png

これでUbuntuの仮想環境が整いました。

Ubuntu 18.04の初期設定（リモート側）

それでは早速、構築したUbuntu18.04にSSH接続を行い、Ubuntuの初期設定を行っていきましょう。

SSH接続する

Windows10の最新バージョンでは、sshが標準で使えるようになっています。もし使えなかったら、以下の記事の「Windows版 OpenSSH のインストール」欄の通りに進めて、sshコマンドが使えるようにしてください。

Powershellに以下のコマンドを入力し、実行します。

vagrant ssh

このようにubuntuのshellが表示されたらOKです。

image.png

もしもフォントがおかしくなるようでしたら、タイトルバーを右クリック→プロパティで、フォントをMSゴシックに変更してください。

image.png

パッケージをアップデートする

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」をインストールします。

image.png

すると、画面左下に緑色のマークが表示されると思います。

image.png

これでインストール完了です。

SSH接続ファイルを用意する

先程のPowershellの画面に戻り（閉じてしまった人は、vagrantfileのある場所に移動してください）以下のコマンドを入力します。

vagrant ssh-config --host ubuntu1804 >> config

すると、Vagrantfileのある場所に「config」ファイルが出来上がります。
image.png

これを、Cドライブ→Users→(自分のユーザー名)→「.ssh」フォルダの中に入れてください。（.sshフォルダがない場合は自分で新しく作成してください）

image.png

このように配置できたらOKです。VSCodeの画面に戻ります。

このconfigファイル、Powershellで書き出すと文字コードがUTF-16 LEになってしまうようなので、UTF-8に変換します。
VSCodeにconfigファイルを読み込ませてください。

「UTF-16 LE」と書かれているところを押して、「エンコード付きで保存」をクリックします。

image.png

この中で「UTF-8」を選択します。

image.png

これでSSH接続ファイルの用意は完了です。

VSCodeで設定ファイルを読み込ませる

次に、画面左下の緑のマークをクリックします。

image.png

すると、プルダウンメニューが出てくるので、「Remote-SSH: Connect to Host...」をクリックします。

image.png

「+ Add New SSH Host」をクリックします。

image.png

入力欄に「ubuntu1804」と入力し、Enterを押します。

image.png

新しく画面が開き、少し経って左下に「SSH: ubuntu1804」と表示されていたらOKです。

image.png

これで構築した開発環境に接続することが出来ました！実際にターミナルを開いてみると、SSH接続のターミナルが用意されていることがわかります。

image.png

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でもそっくり同じ環境をすぐに再現することができます。

  1. 今動いている仮想環境を終了する: vagrant halt
  2. boxファイルとしてパッケージングする: vagrant package　→同じディレクトリにpackage.boxが生成されます。
  3. 他のPCにboxファイルを移す
  4. boxファイルをインポートする: vagrant box add (新しいbox名) package.box

boxファイルを渡すだけで環境構築ができてしまうので、チーム開発などで役立ちます。

終わりに

自分はこれまでローカルに環境構築していましたが、複数PCを持っているとその都度構築やり直しになっていました。最近では全てVagrantで仮想環境を作り、そこで動かすことでスムーズに行うことができるようになりました。是非参考にしてみてください！

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
8