Vagrantでnpmのエラーが出ないようにNode.jsの開発環境を整える

どうも！

最近HHKB Pro 2を買ってうきうきの筆者です

今回はVagrantを用いたNode.jsの開発環境を構築していきたいと思います

目標はゲストOS内に共有フォルダをつくり，Node.jsをインストールするところまでです

Windowsをベースにしてやっていきますので，OSが違う方は適宜読み替えていってください

今回はWindows上にVagrantで開発環境を整えていきます

WindowsとVagrant，そしてNode.jsの組み合わせだとちょっと面倒なことが起きやすいのでそこも考慮した構築の仕方でやっていきます

個人の備忘録レベルなので，間違っているところがあるかもしれません

そのときはコメントなどでお知らせください！

VirtualboxとVagrantの入手・インストール

それではさっそく始めていきたいと思います

まずは公式サイトよりVirtualboxとVagrantを入手してきましょう

Virtualboxのダウンロード→こちら

Vagrantのダウンロード→こちら

自分の環境にあったものを選んでダウンロードしてください

自分の場合は，

• Virtualbox : 5.2.14
• Vagrant : 2.1.2

をダウンロード・インストールしました

この組み合わせには相性もあるみたいなので，そのときの最新のバージョンでうまくいかないときには，バージョンを落としてみるなどの対処をしてみてください

インストールは基本ウィザード通りに進めていってもらって大丈夫です

Vagrantのインストール後には再起動が必要となります

Boxの入手・Vagrantの立ち上げ

それでは，さっそく開発環境を構成していきましょう

まずはPowershellを管理者権限で開きます

WindowsにはPowershellの他にコマンドプロンプトもあるのですが，使い勝手がいいPowershellを使っていきます

そしてCドライブ直下に「vagrant」というディレクトリを作ります

Cドライブ直下の理由は後述します

Powershellでそこまで移動します

移動したら

でBoxを追加します

しばらく待って「Successfully added box ‘ubuntu/xenial64’……」と表示されれば成功です

エラーが出た場合は時間を置いてやるとうまくいくかもしれません

次に

を実行してカレントディレクトリにvagrantfileを置きます

うまくvagrantfileを作成できたらVagrantを立ち上げていきます

を実行してください

無事に起動できたらゲストOSであるUbuntuに接続します

今回はRLoginを使っていきます

RLoginはここから入手してください→こちら

ダウンロードからの解凍をして，RLoginを起動したら新規をクリックします

そこから下の画像のように設定を行ってください

またSSH秘密鍵には「C:\vagrant\.vagrant\machines\default\virtualbox」内にある「private_key」というファイルを設定してください

これで準備は完了です

あとは接続できればおｋです

接続できないときは設定を見直してみてください

もしかしたらバージョンの違いで設定が変わっている場合もあるので，そこはご了承ください

起動が確認できたら，vagrantfileを編集していきます

まず46行をコメントアウトします

そして，

というように書き換えます

それからその下に

上の3行を追記します

そして55，60，61行目をコメントアウトして上の画像のようにします

行数は多少異なるかもしれませんが，書いてある行を探してコメントアウトしてください

使用するメモリの大きさは各自環境に合わせて変えてみてください

そしてvagrantディレクトリ内にworkspaceディレクトリを作ったら，Powershellの方で

を実行してください

それが終わったら

を実行してVagrantを再起動してみてください

これらはこのQiitaの記事を参考にさせていただきました→こちら

ここまでできたら再びRLoginで接続してみてworkspaceというディレクトリが出来ていること，ちゃんと共有が出来ていることを確認してみてください

できていればOKです！

Node.jsのインストール

それではNode.jsをインストールしていきましょう

Node.jsのバージョン管理にはnvmなどがありますが，今回はNodebrewを使っていきたいと思います

これらを上から順に実行していけば大丈夫です

「nodebrew –version」でバージョン確認ができればOKです

その後は「nodebrew install ${version}」でNode.jsをインストール，「nodebrew use ${version}」で常用のNode.jsを設定すれば完了です

お疲れ様でした！

Cドライブ直下の理由

ここからはちょっと技術的なお話です

なぜ今回vagrantディレクトリをCドライブ直下に作ったかについてです

これにはWindowsのパス長の問題があります

npmでパッケージをインストールするときに，パスが長すぎるとWindowsの制限に引っかかってしまいエラーが出ます(共有フォルダ上でのお話です)

これを解決するためには共有フォルダにホストOSでnpm installを行う方法もあるのですが，これだと別のエラーが生じる可能性があります

なのでパスを短くするために，Cドライブ直下にvagrantディレクトリを作るという方法が一番丸いのではないか，といった具合です

まとめ

というわけで，環境構築の方法を紹介させていただきました

npm周りでエラーが出やすいので、これが誰かの参考になれば嬉しいです

それでは今回はこのへんで！

関連記事

Kali Linuxのインストール手順とツールの使い方[Linux] 実際に使って分かったPython入門本・サイトおすすめルート 競技プログラミング初心者のためのAtCoderのススメ PaizaのPython×AI機械学習入門がかなり良さそう