WSL2上でNode.jsを動かそう

f:id:enia:20210912174453p:plain えにあです。

以前、Windows10上にLinux環境(WSL2)を構築する記事を書きました。
次は、構築したLinux環境上で開発を行えるようにしていきます。
今回は、LinuxにNode.JSをインストールしていきます。
enia.hatenablog.com

この記事は下記NodeJS公式の記事を参考にしています。当然ではありますが、公式サイトの情報が一番信頼できます。
nodejs.org

NOTE: なぜLinux上で開発を行うの?
プログラミングはWindows環境でも問題なく行えます。
しかし、ソースコードの量がある程度増えてくると、ビルドに時間がかかってくるようになります。
よほど大きなシステムでない限り、1~2分程度の時間かもしれません。その程度であれば我慢できるでしょうか?
しかし、ソースコードを少し修正して動作確認をするたびに待ちが発生すると、開発のリズムが崩れ、開発が楽しくなくなってしまいます。
Linux環境でビルドすると、Windows環境の半分程度の時間でビルドできます。
開発をより楽しいものにするために、Linux環境で開発できるようにするのです。
また、仕事でシステム開発を行っている場合は、本番システムはLinux環境で動いていることが多いのではないでしょうか。
ローカル開発でもLinux環境を利用することは、本番環境との差異を小さくすることにも繋がります。


目次

環境

  • OS: Windows10 Home Edition (x64)
  • WSL2: Ubuntu 20.04

以下の手順はwsl上で行います。Windows Power Shell上ではないことに注意してください。

公式ドキュメントからインストール手順を探す

公式ドキュメントの最下部に移動すると、WSLのインストール方法へのリンクが記載されてます。 f:id:enia:20210910073946p:plain

リンクを押下するとMicrosoftのページへ遷移します。
Mircrosoftの記事であれば、情報源として安心できそうです。
docs.microsoft.com

aptライブラリのインデックスを更新する

この後の手順でパッケージをインストールする際にはapt-getを利用します。
sudo apt-get updateを実行し、APTライブラリのインデックスを更新します。
よくわからなければ、apt-getで環境構築する際の事前のおまじないだと思ってください。

enia:~$> sudo apt-get update

Get:1 http://security.ubuntu.com/ubuntu focal-security InRelease [114 kB]
Hit:2 http://archive.ubuntu.com/ubuntu focal InRelease
Get:3 http://security.ubuntu.com/ubuntu focal-security/main amd64 Packages [861 kB]
Get:4 http://archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB]
~中略~
Get:40 http://archive.ubuntu.com/ubuntu focal-backports/universe Translation-en [2068 B]
Get:41 http://archive.ubuntu.com/ubuntu focal-backports/universe amd64 c-n-f Metadata [276 B]
Get:42 http://archive.ubuntu.com/ubuntu focal-backports/multiverse amd64 c-n-f Metadata [116 B]
Fetched 20.0 MB in 24s (826 kB/s)
Reading package lists... Done

curlをインストールする

この後の手順で、コマンドラインでインターネットからコンテンツをダウンロードするために使用するツールである、curlを利用します。
sudo apt-get install curlcurlをインストールします。
私の場合、すでに最新バージョンだったようです。

enia:~$> sudo apt-get install curl 

Reading package lists... Done
Building dependency tree
Reading state information... Done
curl is already the newest version (7.68.0-1ubuntu2.6).
curl set to manually installed.
0 upgraded, 0 newly installed, 0 to remove and 11 not upgraded.

nvmをインストールする

多くの場合、作業しているさまざまなプロジェクトのニーズに基づいて、複数の Node.js のバージョンを切り替える必要があります。 ノード バージョン マネージャー (一般的には nvm と呼ばれることが多い) は、Node.js の複数のバージョンをインストールするための最も一般的な方法です。 ここでは、nvm をインストールしてからそれを使用して Node.js と Node Package Manager (npm) をインストールする手順について説明します。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bashで、nvmをインストールします。

enia:~$> curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash 

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 13527  100 13527    0     0   5945      0  0:00:02  0:00:02 --:--:--  5945
=> Downloading nvm from git to '/home/enia/.nvm'
=> Cloning into '/home/enia/.nvm'...
remote: Enumerating objects: 290, done.
remote: Counting objects: 100% (290/290), done.
remote: Compressing objects: 100% (257/257), done.
remote: Total 290 (delta 34), reused 111 (delta 20), pack-reused 0
Receiving objects: 100% (290/290), 163.37 KiB | 81.00 KiB/s, done.
Resolving deltas: 100% (34/34), done.
=> Compressing and cleaning up git repository

=> Appending nvm source string to /home/enia/.bashrc
=> Appending bash_completion source string to /home/enia/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

正常終了しました。
ターミナルを閉じて再起動し、wslにログインします。 command -v nvm を実行して、nvmと返ってくることを確認します。

enia:~$> command -v nvm
nvm

NOTE:
私の環境では、ターミナルを再起動させずにコマンドを実行すると何も帰ってきませんでした。

この時点ではnodeはインストールされていませんが、インストールされていないことを確認するために、nvm -lsを実行します。

enia:~$> nvm ls

            N/A
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)

node.js、npm をインストールする

いよいよ、node.jsをインストールしていきます。

Microsoftのページには安定板ではなく、最新版と安定板のインストール手順がそれぞれ記載されていますが、ここでは安定板だけをインストールしていきます。
安定板をインストールするにはnvm install --ltsを利用します。ltsはlatestの略です。

enia:~$> nvm install --lts

Installing latest LTS version.
Downloading and installing node v14.17.6...
Downloading https://nodejs.org/dist/v14.17.6/node-v14.17.6-linux-x64.tar.xz...
################################################################################################################# 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v14.17.6 (npm v6.14.15)
Creating default alias: default -> lts/* (-> v14.17.6)

これでnode.jsのインストールは完了です。再度nvm lsを実行します。 なにやら表示されればOKです。バージョンはその時点の安定板のバージョンになっています。

enia:~$> nvm ls

->     v14.17.6
default -> lts/* (-> v14.17.6)
node -> stable (-> v14.17.6) (default)
stable -> 14.17 (-> v14.17.6) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/fermium (-> v14.17.6)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.6 (-> N/A)
lts/fermium -> v14.17.6

nodeコマンドが利用できるようになったことをnode --versionで確認します。 nvm -lsで表示されていたものと同じバージョン名が表示されるはずです。

enia:~$> node --version
v14.17.6

node.jsをインストールするとnode.jsのパッケージマネージャであるnpmも自動的にインストールされます。
npmコマンド利用できるようになったことをnpm --versionで確認します。

enia:~$> npm --version
6.14.15

ここまでで、node.jsのインストール作業は完了です。

(オプション)yarnをinstallする

Yarnとは、主にJavaScriptで開発されたプログラム部品(モジュール)を管理するためのパッケージ管理システムの一つで、npmと互換性があります。

npmに比べ実行速度が高速です。パッケージの導入時に依存先のパッケージのバージョン番号を記録(yarn.lockファイル)するため、環境の再構築や他のコンピュータでの環境構築において正確に同じバージョンのパッケージを導入することができます。npmで許可されていたパッケージ導入時のコード実行が禁止され、パッケージの整合性をチェックサムで検証するなどセキュリティにも配慮しています。

2016年に米SNS大手フェイスブックFacebook)社が自社環境でのパッケージ管理のために開発し、BSDライセンスに基づいてオープンソースソフトウェアとして公開しました。

yarnのインストール手順は下記の公式サイトに記載されています。 classic.yarnpkg.com

公式の手順にしたがって、npm install --global yarnコマンドでインストールします。

enia:~$> npm install --global yarn
6.14.15
> yarn@1.22.11 preinstall /home/enia/.nvm/versions/node/v14.17.6/lib/node_modules/yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)

/home/enia/.nvm/versions/node/v14.17.6/bin/yarn -> /home/enia/.nvm/versions/node/v14.17.6/lib/node_modules/yarn/bin/yarn.js
/home/enia/.nvm/versions/node/v14.17.6/bin/yarnpkg -> /home/enia/.nvm/versions/node/v14.17.6/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.22.11
added 1 package in 1.254s

yarnコマンドが利用可能になっていることをyarn --versionで確認します。

enia:~$> yarn --version
1.22.11

以上でyarnのインストールは完了です。

おわりに

今回はWSL2上でNode.jsを動かす手順を紹介しました。 WSL2上で開発することで、より効率的に開発できるようになります。

今回はここまで!