目的

windows10上にVirtualBox + xUbuntu18.04環境を構築し、
ホームページ開発のためのnode.js, Expressをインストールしてみます。

Virtual Box + xUbuntu環境構築

OSインストールまで

Virtual Boxのインストールは省略、インストーラーと拡張パックインストーラ落として入れておく。
xUbuntuはここから公式サイトに行き、Mirrorサイト Japanからisoファイルをダウンロードする。公式サイトからだと.torrentファイルになるので注意。
Virtual Box > 新規から仮想マシンを追加し、isoファイルをストレージにセットして、xUbuntuをインストール。細かい手順はほかの記事でたくさんあるので省略。

OSインストール後の各種設定

Virtual Box Guest Addonsのインストール

これをしないとスクリーンサイズとかを変更できない。

xUbuntuを起動
Virtual Box デバイスメニュー > Guest Addons CDイメージの挿入

xUbuntu側で端末を起動し、インストール

cd /media/[username]/VBox_GAs_x.x.xx
sudo ./VBoxLinuxAdditions.run
sudo reboot

インストール後はメディアを取り出ししてよい。
Virtual Box 表示タブ > 仮想スクリーンで好みのスクリーンサイズにする
Virtual Box デバイスタブ > ドラッグ&ドロップを双方向に変更
Virtual Box デバイスタブ > クリップボードの共有を双方向に変更
ホストOSとの共有フォルダを使用する場合の権限を追加するために、ユーザーをvboxsfグループに追加。作業後はリブートしておいた方が良い。
```
sudo gpasswd -a <ユーザ名> vboxsf
```
とりあえずまっさらなLinux環境として、この仮想マシンをCloneしておいて保存しておくとよいよ。

パッケージのアップグレード

sudo apt update
sudo apt upgrade

VSCodeのインストール

snap packageでインストール可能。

sudo snap install --classic code

拡張機能から以下を追加しておく。
- Japanese Language Pack for Visual Studio Code

node.jsのインストール

ここの「Debian and Ubuntu based distributions」を参考にインストール。
xUbuntuは正式サポートされてないっぽいけどたぶん動くよね・・・。

端末からインストールしていく。

# curlが必要なので先に入れる
sudo apt install curl

# 今回は最新のv12を入れる
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash 
sudo apt-get install -y nodejs

# ビルドツールのインストール 
sudo apt-get install gcc g++ make
sudo apt-get install -y build-essential

# 最後にバージョン確認
node -v
# v12.10.0 でした。

Expressのインストール

公式を参考にインストールしていく。

ワークスペースディレクトリを作成し、移動
ディレクトリ構成を統一するためにgeneratorをインストール
```
sudo npm install -g express-generator
```
プロジェクトフォルダを自動生成する
これにより自動的にpackage.jsonやapp.jsが自動生成される。
-eはEJSというテンプレートの仕組みを使用する、というオプション。
```
express -e [PROJECT]

# [PROJECT]/配下に以下のファイル、ディレクトリが制せされる
# app.js  bin  package.json  public  routes  views
```
細かいディレクトリの構成の解説はこちらの記事がわかりやすかったです。
npm installで必要なパッケージをダウンロード
```
npm install 
```

とりあえず起動するか確認。

npm start

# http://localhost:3000/ にアクセスしてみてページが表示されればOK