vagrant + centos + node.js + Expressの環境構築をなるべくvagrantfileとシェルでがんばる

苦労しまくったので、メモに残そうと思い書きました。
windows上のvagrantでcentosの環境を作ってます。
なるべく自動で環境作成していくスタイル。
もっといいやり方ある場合は教えていただけるとありがたいです。

# 参考
[Cygwin + Vagrant + Node.js + Express の環境構築めも](https://qiita.com/fujisystem/items/9f53451ec29d76756256)
[【Windows】VagrantでCentOSの環境構築 + node.js(Express)の設定]
(https://qiita.com/naoto_koyama/items/a0bf83b6faca7a4f2c58)

# 構成
・ centos7.5
・ node.js
・ express

# VirtualBox・Vagrantのインストール
  参考に記載している記事を参考にしていただければと思います。

# vagrant用フォルダの作成
  vagrant用のフォルダをwindows内に作成します。
　私はこのような感じで作成しました。
　C:\Users\[ユーザー名]\Vagrant\centos

# nfs用フォルダの作成
  ローカルとvagrantのファイルを同期させたかったので、フォルダを作成しました。
　C:\Users\[ユーザー名]\Vagrant\share
　
　以下、上記フォルダ構成の前提で記載します。

# vagrantfileの作成
C:\Users\[ユーザー名]\Vagrant\centos　の中にvagrantfileを作成します。
中身はこんな感じです。
  <pre>
  Vagrant.configure("2") do |config|

  config.vm.box = "bento/centos-7.5"
  
  config.vm.network :private_network, type: "dhcp", ip: "xxx.xxx.xxx.xxx"
  config.vm.network :public_network, type: "dhcp"
  config.vm.network "forwarded_port", host: 3000, guest: 3000
  
  
  config.vm.synced_folder "../share", "/home/vagrant/share", id: "vagrant", :nfs => true, :mount_options => ['nolock,vers=3,udp']
  
  config.vm.provision :shell, :path => "provision.sh"
  
  # firewallの無効化
    config.vm.provision :shell, run: "always", :inline => <<-EOT
        sudo systemctl stop firewalld
    EOT

end
</pre>

private_networkのipはお好きなもので問題ないかと(デフォルトは192.168.33.10？)
たぶんip設定なくても大丈夫だと思います。
<pre>
config.vm.network :private_network, type: "dhcp"
</pre>
初回起動時はprovision.shを実行するようにしています。(シェルの内容は後程)
<pre>
config.vm.synced_folder "../share", "/home/vagrant/share", id: "vagrant", :nfs => true, :mount_options => ['nolock,vers=3,udp']
</pre>
↑ここ↑でローカルフォルダとvagrant上のフォルダのnfs設定をしています。

expressの画面表示確認の際にfirewallに邪魔されるのでvagrant起動時に必ずoffにするよう設定しています。

#provision.shの作成
 vagrantfileと同じところにprovision.shを作成します。
 中身はこんな感じ
 <pre>
  #!/bin/sh

yum check-update
sudo yum install -y epel-release
sudo yum update -y

home=/home/vagrant

yum -y install git

\#install nvm
git clone https://github.com/creationix/nvm.git $home/.nvm
source $home/.nvm/nvm.sh
nvm install --lts

while IFS= read -r line; do    
    echo "$line" >> $home/.bash_profile
done < $home/share/add_nvmpath

source $home/.bash_profile

nvm use --lts

#install express
npm i -g express-generator
 </pre>

やってることとしてはnodeとexpressのインストールです。
yumのアップデートとかやるんで、時間かかる覚悟はあった方がいいかもです…

# add_nvmpathの作成
provision.shで読み込むadd_nvmpathを作成します。
こちらはshareのフォルダ内に作成します。
内容は以下の通りです。
  <pre>
    # nvm設定
    if [[ -s ~/.nvm/nvm.sh ]];
      then source ~/.nvm/nvm.sh
    fi
  </pre>

単に.bash_profileに追記しなきゃいけないif文を書いただけです…

# できあがったフォルダ構成
C:\Users\[ユーザー名]\Vagrant\centos
∟Vagrantfile
∟provision.sh

C:\Users\[ユーザー名]\Vagrant\share
∟add_nvmpath

# vagrantの立ち上げ
  コマンドプロンプトで「C:\Users\[ユーザー名]\Vagrant\centos」まで移動して vagrant up コマンドをたたきます。
  (ちなみにlsコマンドに相当するwindowsのコマンドはdirなんですね…( ..)φメモメモ)
<pre>
C:\Users\[ユーザー名]>cd Vagrant\centos

C:\Users\[ユーザー名]\Vagrant\centos>dir

 C:\Users\[ユーザー名]\Vagrant\centos のディレクトリ

2018/08/15  11:17    <DIR>          .
2018/08/15  11:17    <DIR>          ..
2018/08/13  16:54               498 provision.sh
2018/08/15  11:25               630 Vagrantfile
               2 個のファイル               1,128 バイト
               2 個のディレクトリ  42,447,577,088 バイトの空き領域

C:\Users\[ユーザー名]\Vagrant\centos>vagrant up
</pre>

ドキドキしながら待ちます(ドキドキ)
今回 vagrantの初期化(vagrant init)してないので、結構時間かかります。
<pre>
default: Warning: Remote connection disconnect. Retrying...
default: Warning: Connection aborted. Retrying...
</pre>
上記のログが繰り返しでることがありますが、なんとか起動します。
(なぜ出るのかよくわかりません…詳しい方教えてください…)
「default: Running: inline script」が表示されれば起動完了です！

# vagrant接続
  vagrant ssh もしくはteratermなどからログインします。
　※私はRLogin使ってます。
　
　ログイン後shareというディレクトリが存在することを確認します。
<pre>
[vagrant@localhost ~]$ ll
total 0
drwxrwxrwx. 1 root root 0 Aug 15 02:18 share
[vagrant@localhost ~]$ 
</pre>

# expressひな形作成
  shareディレクトリの中にexpressのひな形を作成します。
<pre>
[vagrant@localhost ~]$ cd share/
[vagrant@localhost share]$ ll
total 1
-rwxrwxrwx. 1 root root 69 Aug 13 06:33 add_nvmpath
[vagrant@localhost share]$ express -e express_test --view=jade

  warning: option `--ejs' has been renamed to `--view=ejs'


   create : express_test/
   create : express_test/public/
   create : express_test/public/javascripts/
   create : express_test/public/images/
   create : express_test/public/stylesheets/
   create : express_test/public/stylesheets/style.css
   create : express_test/routes/
   create : express_test/routes/index.js
   create : express_test/routes/users.js
   create : express_test/views/
   create : express_test/views/error.jade
   create : express_test/views/index.jade
   create : express_test/views/layout.jade
   create : express_test/app.js
   create : express_test/package.json
   create : express_test/bin/
   create : express_test/bin/www

   change directory:
     $ cd express_test

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=express-test:* npm start

[vagrant@localhost share]$ cd express_test/
[vagrant@localhost express_test]$ npm install --no-bin-links
npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated constantinople@3.0.2: Please update to at least constantinople 3.1.1
npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer
npm WARN notice [SECURITY] constantinople has the following vulnerability: 1 critical. Go here for more details: https://nodesecurity.io/advisories?search=constantinople&version=3.0.2 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] uglify-js has the following vulnerability: 2 low. Go here for more details: https://nodesecurity.io/advisories?search=uglify-js&version=2.2.5 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm notice created a lockfile as package-lock.json. You should commit this file.
added 101 packages in 15.089s
[vagrant@localhost express_test]$ 
</pre>今回jade使ってますがdeprecatedなんですね…次はpug使うようにします…

やってることとしては、
<pre>
express -e [ひな形のディレクトリ名] --view=jade
</pre>でexpressのひな形を作成します。
その後作成したディレクトリに移動し
<pre>
npm install --no-bin-links
</pre>を実行します。
windowsで環境作る際に特有のことらしいのですが、シンボリックリンクが貼れないので「--no-bin-links」のオプションを指定してシンボリックを貼らないようにします。

#expressの立ち上げ、表示確認
<pre>
DEBUG=express-test:* npm start
</pre>
というコマンドでexpressを立ち上げます。
ブラウザで「http\://localhost:3000/」にアクセスし、
<pre>
Express
Welcome to Express
</pre>
という画面が出てきたら起動確認OKです！
コンソールには下記が出力されます。
<pre>
GET / 200 1002.647 ms - 170
GET /stylesheets/style.css 200 11.078 ms - 111
GET /favicon.ico 404 26.384 ms - 1142
</pre>