2
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 3 years have passed since last update.

nodeの実行バージョンをプロジェクトごとに自動切換え

Last updated at Posted at 2020-03-13

背景

nodeを使用した開発においてプロジェクトごとにnodeのバージョンを分けなければいけないことがある。こういった状況において人が管理するとあっさり記憶をなくして管理にあれこれ無駄の時間を浪費してしまう。本問題を解決するために表題の解決策を実施する。なお、本文章は文末にある参考ページを参照したうえで一つの文書としてまとめたものである。参考ページそれぞれの文章も非常によくまとまっているため閲覧するとより理解が深まる。

環境

本記事では以下の開発環境で構築を行い、正常に動作することを確認している。

  • Windows 10 64bit + WSL Ubuntu 18.04 LTS
  • Bash 4.4.20 (WSL Ubuntu)

WSLとはWindows Subsystem for Linuxの略称であり、Windows上でLinuxカーネルを一つのプロセスと扱えるものである。Linux系システムで動作するアプリケーションを開発をするときは開発ツール類はLinux準拠のものを使用したほうが開発しやすいためWSLを導入することをおすすめする。今回の文章で紹介するnvm(nodeバージョン管理ツール)もLinuxおよびMac環境では提供されているがwindows環境では提供されていない。互換性を意識したnvm-windowsが提供されているが完全互換ではない。
WSL未導入の人は以下のページを参考に導入しましょう。
WSL 2 を使用して node.js 開発環境を設定する

nodeのバージョン管理ツールを導入

node自体のバージョン管理を行うツールとしてnvmがある。まずはこちらをインストールする。

Ubuntu起動

Windowsの検索ウィンドウからUbuntuと入力して起動する。以降の操作はUbuntuのbash上で以下のコマンドを実行する。

nvmインストール

nvmをインストールする。nvmはnodeのバージョン管理を可能にするツール。手動で複数のnodeをバージョン管理するならばnvmを導入するだけでOK。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
source ~/.bashrc

Node.jsダウンロード・インストール

nvmを使用してnodeをダウンロードとインストールを一括で行う。はじめて開発する人は安定版の最新を入れるだけでよいでしょう。

  • 安定版の最新
nvm install --lts
  • バージョン指定

nodeのバージョンを指定して開発したい場合はバージョン番号を指定してインストールする。

nvm install 10.17.0

インストール済みNode.js表示

nvmを使用してインストールしたnodeを表示するにはnvmコマンドに対してlsオプションを指定する。

nvm ls

Node.jsバージョン切り替え

使用するnodeを切り替えたい場合は「nvm use バージョン番号」を指定する。

nvm use 10.17.0
node -v # node -vを実行した結果、利用するnodeが10.17.0になっていることを確認できる。

nodeの実行バージョンを自動切換え

プロジェクトフォルダごとにnodeバージョンを切り替えたい場合はdirenvとよばれるディレクトリごとに環境変数を定義するツールを導入する。

direnv の導入

WSL Ubuntu にはデフォルトで入っていないのでインストール。はじめてWSL Ubuntuを使用するときはaptが参照する情報を最新にしておく。aptをupdateしないとdirenvをaptコマンドからインストールできない。

sudo apt update #aptが参照するリポジトリを更新
sudo apt install direnv #direnvのインストール

~/.bashrcの末尾に以下を追記する。

export EDITOR=vi #環境ファイルを編集するeditorの設定
eval "$(direnv hook bash)"

設定ファイルの再読み込み

source ~/.bashrc

direnvとnvmコマンドに実行してもらいたいコマンドを事前に定義

nodeのバージョンを自動で切り替えてほしいディレクトリで.nvmrcと.envrcを作成する。
.nvmrcはnvmに利用したいnodeのバージョンを通知するファイル。
.envrcはdirenvに実行してほしいコマンドを記載したファイル。
上記の2つのファイルを作成することで特定のディレクトリに移動したときに自動でnodeのバージョンを切り替えるようにする。
本記事ではユーザーがprojfolderに移動した時、自動で利用するnodeのバージョンを10.17.0に切り替えることを想定する。

.nvmrcファイルの作成

projfolderではnodeのバージョンを10.17.0に切り替えたい。その場合、projfolder配下の.nvmrcに切り替えたいnodeのバージョン番号を登録する。

echo "10.17.0" > ~/projfolder/.nvmrc

.envrcファイルの作成

.envrcファイルにはディレクトリ切り替え時に先程の.nvmrcをnvmに読み込ませて実行するスクリプトを登録する。

cd ~/projfolder #projfolderに移動
direnv edit . #.envrcの編集

envrcファイルに以下を記入する

source $NVM_DIR/nvm.sh
nvm use #バージョン指定なしで実行すると.nvmrcファイルに記載されているバージョンを使用する

projfolder配下でdirenvを実行するための許可コマンドを実行する

direnv allow

上記にてprojfolderへユーザーが移動するとnvm useコマンドが実行されるので、自動でnodeのバージョンを切り替えることができるようになった。

参考ページ

https://riotz.works/articles/lulzneko/2019/06/17/automatically-swich-environment-variables-to-working-directory-of-shell/
https://askubuntu.com/questions/1072845/unable-to-locate-package-error-in-ubuntu-18-04-on-windows-10
https://tadtadya.com/nvm-manage-nodejs-version-for-each-user-and-directory/
https://docs.microsoft.com/ja-jp/windows/nodejs/setup-on-wsl2

2
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
2
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?