Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@hoooooo_san

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

Posted at

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

参考

Cygwin + Vagrant + Node.js + Express の環境構築めも
[【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を作成します。
中身はこんな感じです。


  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

private_networkのipはお好きなもので問題ないかと(デフォルトは192.168.33.10？)
たぶんip設定なくても大丈夫だと思います。


config.vm.network :private_network, type: "dhcp"

初回起動時はprovision.shを実行するようにしています。(シェルの内容は後程)


config.vm.synced_folder "../share", "/home/vagrant/share", id: "vagrant", :nfs => true, :mount_options => ['nolock,vers=3,udp']

↑ここ↑でローカルフォルダとvagrant上のフォルダのnfs設定をしています。

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

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


  #!/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

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

add_nvmpathの作成

provision.shで読み込むadd_nvmpathを作成します。
こちらはshareのフォルダ内に作成します。
内容は以下の通りです。


    # nvm設定
    if [[ -s ~/.nvm/nvm.sh ]];
      then source ~/.nvm/nvm.sh
    fi

単に.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なんですね…( ..)φメモメモ)


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

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

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

2018/08/15  11:17              .
2018/08/15  11:17              ..
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

ドキドキしながら待ちます(ドキドキ)
今回 vagrantの初期化(vagrant init)してないので、結構時間かかります。


default: Warning: Remote connection disconnect. Retrying...
default: Warning: Connection aborted. Retrying...

上記のログが繰り返しでることがありますが、なんとか起動します。
(なぜ出るのかよくわかりません…詳しい方教えてください…)
「default: Running: inline script」が表示されれば起動完了です！

vagrant接続

vagrant ssh もしくはteratermなどからログインします。
　※私はRLogin使ってます。
　
　ログイン後shareというディレクトリが存在することを確認します。


[vagrant@localhost ~]$ ll
total 0
drwxrwxrwx. 1 root root 0 Aug 15 02:18 share
[vagrant@localhost ~]$

expressひな形作成

shareディレクトリの中にexpressのひな形を作成します。


[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]$
今回jade使ってますがdeprecatedなんですね…次はpug使うようにします…

やってることとしては、


express -e [ひな形のディレクトリ名] --view=jade
でexpressのひな形を作成します。

その後作成したディレクトリに移動し


npm install --no-bin-links
を実行します。

windowsで環境作る際に特有のことらしいのですが、シンボリックリンクが貼れないので「--no-bin-links」のオプションを指定してシンボリックを貼らないようにします。

#expressの立ち上げ、表示確認


DEBUG=express-test:* npm start

というコマンドでexpressを立ち上げます。
ブラウザで「http://localhost:3000/」にアクセスし、


Express
Welcome to Express

という画面が出てきたら起動確認OKです！
コンソールには下記が出力されます。


GET / 200 1002.647 ms - 170
GET /stylesheets/style.css 200 11.078 ms - 111
GET /favicon.ico 404 26.384 ms - 1142
0
3
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
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?