文系卒のWebエンジニアの成長と備忘録
エンジニア経験を生かして発信するメディアサイト

Vagrantで【nvm】を使用して《node.js》と《npm》を入れる方法

matrix

こんにちはYsです。Web系エンジニアとして働いています。
最近、LaravelというPHPフレームワークで開発の勉強をしていますが、その際にwebpack使用するためには《npm》と《node》が必要と分かり、インストール方法を書いておきます。

※構築した環境
  • Centos7.1 (virtualbox, 0)
  • Vagrant 2.2.3
※手順だけ書くと以下のように行います
  1. Vagrantからnvm（node version manager）をインストール
  2. nvmをbash_profileに反映
  3. nvmを使用してnpm（node package manager）とnodeをインストール

スポンサードサーチ



①：Vagrantからnvm（node version manager）をインストール

vagant sshでログインして、Vargant内部にgitがあるかどうかを確認します。

[vagrant@localhost ~]$ git --version
git version 1.8.3.1

入っていない方は以下のコマンドでインストールをしておいてください。
※-yというオプションは、全てのコマンドの返答に対してyesという内容になります。

[vagrant@localhost ~]$ sudo yum -y install git

次にgitを使用して、nvmをcloneしていきます。

[vagrant@localhost ~]$ git clone https://github.com/creationix/nvm.git ~/.nvm
Cloning into '/home/vagrant/.nvm'...
remote: Enumerating objects: 2, done.
remote: Counting objects: 100% (2/2), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 7495 (delta 0), reused 1 (delta 0), pack-reused 7493
Receiving objects: 100% (7495/7495), 2.40 MiB | 1.74 MiB/s, done.
Resolving deltas: 100% (4737/4737), done.

②：nvmをbash_profileに反映させる

インストールしたままだと使用することができません。
そのためbash_profileと呼ばれる、起動時に必ず実行するbashの設定ファイルに反映させる必要があります。

ls -laというコマンドを使用して.bash_profileがあるかを確認します。

[vagrant@localhost ~]$ ls -la
合計 24
drwx------  9 vagrant vagrant 4096  5月 18 11:59 .
drwxr-xr-x. 5 root    root      46  4月 11  2018 ..
-rw-------  1 vagrant vagrant 3009  5月 18 12:03 .bash_history
-rw-r--r--  1 vagrant vagrant   18  3月  5  2015 .bash_logout
-rw-r--r--  1 vagrant vagrant  266  5月 18 11:59 .bash_profile
-rw-r--r--  1 vagrant vagrant  231  3月  5  2015 .bashrc

viコマンドを使用して編集していきます。

[vagrant@localhost ~]$ vi .bash_profile 

# .bash_profile

# Get the aliases and functions
if [ -f ~/.bashrc ]; then
        . ~/.bashrc
fi

変な文字列が沢山ありますが、一応プログラムです。
これを編集していきます。まずはiを押してinsertモードにします。

PCの矢印キーで操作してください。
※何が不具合が生じたらescキーを押して:qというコマンドを打ってください。
保存せず、強制終了を行うコマンドです。

以下の行を追加します。どこでもいいですが分かり易いように上記の記述の直下くらい。

# nvmの実行
if [[ -s ~/.nvm/nvm.sh ]];
then source ~/.nvm/nvm.sh
fi

編集したら、escキーを押して:wqというコマンドを打って保存します。
保存し終えたら、一度exitで出て、再度vagrant sshでログインします。

無事にインストールできたのか確認します。
以下のように出ていれば成功です。

[vagrant@localhost ~]$ nvm help

Node Version Manager (v0.34.0)

③：nvmを使用してnpm（node package manager）とnodeをインストール

最後にnvmを使用して、npmとnodeをインストールしていきます。

nvmでは、安定版と最新版を選び、インストールすることができます。今回は安定版でインストールを行います。
※最新版だとローカルのgulpなどがうまく動かない危険性があるため

安定版: nvm install stable
最新版： nvm install --lts

安定版のインストール

[vagrant@localhost ~]$ nvm install stable
Downloading and installing node v12.2.0...
Downloading https://nodejs.org/dist/v12.2.0/node-v12.2.0-linux-x64.tar.xz...
######################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v12.2.0 (npm v6.9.0)
Creating default alias: default -> stable (-> v12.2.0)

実際にインストールされたのか確認します。
node -vとnpm -vというコマンドを使用します。※2019年5月現在では以下のものが安定版として配布されています。

[vagrant@localhost ~]$ node -v
v12.2.0

[vagrant@localhost ~]$ npm -v
6.9.0

おまけ：nodeのバージョンが古いと何をしてもダメな説

以前、nodeを使用した開発をしている状態でnpm installを試みた際に以下のようなエラーが発生したしました。

[vagrant@localhost ~]$ npm install
        npm ERR! Error: CERT_UNTRUSTED
        npm ERR!     at SecurePair. (tls.js:1430:32)
        npm ERR!     at SecurePair.emit (events.js:92:17)
        npm ERR!     at SecurePair.maybeInitFinished (tls.js:1029:10)
        npm ERR!     at CleartextStream.read [as _read] (tls.js:521:13)
        npm ERR!     at CleartextStream.Readable.read (_stream_readable.js:341:10)
        npm ERR!     at EncryptedStream.write [as _write] (tls.js:418:25)
        npm ERR!     at doWrite (_stream_writable.js:226:10)
        npm ERR!     at writeOrBuffer (_stream_writable.js:216:5)
        npm ERR!     at EncryptedStream.Writable.write (_stream_writable.js:183:11)
        npm ERR!     at write (_stream_readable.js:602:24)
        npm ERR! If you need help, you may report this log at:
        npm ERR!     <http://github.com/isaacs/npm/issues>
        npm ERR! or email it to:
        npm ERR!     <npm-@googlegroups.com>

        npm ERR! System Linux 2.6.32-696.30.1.el6.x86_64
        npm ERR! command "node" "/usr/bin/npm" "install"
        npm ERR! cwd /home/vagrant/CentOS/Project/laravel_dev/laravel_app
        npm ERR! node -v v0.10.48
        npm ERR! npm -v 1.3.6
        npm ERR! 
        npm ERR! Additional logging details can be found in:
        npm ERR!     /home/vagrant/CentOS/Project/laravel_dev/laravel_app/npm-debug.log
        npm ERR! not ok code 0

上記の原因を調べたところ、SecurePairと出ているのでセキュリティに関することでした。npmを使用したinstallの通信（ssl通信）のセキュリティ設定を解除すれば動く説が有効だったので以下のコマンドでセキュリティを解除。

sudo npm config set strict-ssl false

解除されたかどうかは以下のコマンドを打ち、返り値がfalseになっていれば解除されています。※通常はtrue

[vagrant@localhost ~]$ npm config get strict-ssl
false

上記の設定後、再度npm installを試みましたが今度は次のエラー。

[vagrant@localhost ~]$ npm install
    npm ERR! Error: No dist in undefined package
    npm ERR!     at next (/usr/lib/node_modules/npm/lib/cache.js:746:26)

上記の原因は、nodeモジュール内にキャッシュが残り上手くいかないというのが原因。
npm cache clean --forceを実行すればキャッシュが削除され、上手く動く説が有効でしたが動きませんでした。

最終的な原因はバージョン問題

上記のエラーの対策が上手くいかない場合はnodeのバージョン問題です。
アップデート前はの以前は使用していたパッケージがバージョンの問題で使用できなくなったり、上位互換が出たりします。

そのせいなのか、現行のバージョンと異なるパッケージをinstallしようと試みるのでエラーが永遠と吐かれ進めない状態になってしまいます。

なので、上記で紹介したnvmを使用して常に安定版で動かした方が後々の面倒な環境問題も起きないと思います。

人気記事【独学者おすすめ】プログラミング学習動画サービス3選

人気記事プログラミング実務未経験者が自社開発エンジニアになるための方法

人気記事エンジニアを目指しているなら使用すべき5つの転職サイト

前の記事

次の記事

＼記事のシェアをお願いします！／

2019/05/18 Programming