初めてのホームページ開発手記 part1 node.js + express 開発環境を作る

目的

• 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のインストール

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

1. xUbuntuを起動

2. Virtual Box デバイスメニュー > Guest Addons CDイメージの挿入

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

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

4. インストール後はメディアを取り出ししてよい。

5. Virtual Box 表示タブ > 仮想スクリーン で好みのスクリーンサイズにする

6. Virtual Box デバイスタブ > ドラッグ&ドロップ を双方向に変更

7. Virtual Box デバイスタブ > クリップボードの共有 を双方向に変更

8. ホストOSとの共有フォルダを使用する場合の権限を追加するために、ユーザーをvboxsfグループに追加。作業後はリブートしておいた方が良い。

   sudo gpasswd -a <ユーザ名> vboxsf
   

9. とりあえずまっさらな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は正式サポートされてないっぽいけどたぶん動くよね・・・。

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

   # 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のインストール

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

1. ワークスペースディレクトリを作成し、移動

2. ディレクトリ構成を統一するためにgeneratorをインストール

   sudo npm install -g express-generator
   

3. プロジェクトフォルダを自動生成する
   これにより自動的にpackage.jsonやapp.jsが自動生成される。
   -eはEJSというテンプレートの仕組みを使用する、というオプション。

   express -e [PROJECT]
   
   # [PROJECT]/配下に以下のファイル、ディレクトリが制せされる
   # app.js  bin  package.json  public  routes  views
   

   細かいディレクトリの構成の解説はこちらの記事がわかりやすかったです。

4. npm installで必要なパッケージをダウンロード

   npm install 
   

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

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