先日，Windows に WSL で Ubuntu 20.04 を入れたので Nuxt.js が使えるようにしたいと思います．

nvmによるNode.jsバージョン管理

nvmインストール

Node.js はバージョンの違いでパッケージが動かないこと等がたまにあるので，簡単にバージョンが切り替えられるように nvm (Node Version Manager) を使って Node.js をインストールしたいと思います．

私の環境では zsh ですが，bash を使っていれば最後尾の部分を変えてください．

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | zsh
$ source ~/.zshrc

Node.jsインストール

$ nvm install stable --latest-npm

stableバージョンではなく，LTS (Long Time Support) の最新バージョンが使いたい場合は stable の代わりに --lts を使用してください．

インストールできるバージョンは以下のコマンドで確認できます．

$ nvm list-remote

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

デフォルトで動いている Node.js のバージョンは以下のように確認できます．

$ node -v

これは default に設定されているバージョンが起動しています．これを切り替えるには use コマンドを使います．

$ nvm use stable

ここで指定できる stable 等の環境の一覧は以下のコマンドで表示できます．

$ nvm list
        v14.15.4
->      v15.5.1
default -> stable (-> v15.5.1)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v15.5.1) (default)
stable -> 15.5 (-> v15.5.1) (default)
lts/* -> lts/fermium (-> v14.15.4)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.23.1 (-> N/A)
lts/erbium -> v12.20.1 (-> N/A)
lts/fermium -> v14.15.4

エイリアス設定

また，環境を呼び出す際のエイリアスはコマンドで設定できます．

（例：stable 環境を default にするとき）

$ nvm alias default stable

Yarnインストール

npm は入っていますが，最近 mac で yarn を使っているのでそれに合わせて入れます．

最初にリポジトリ設定を更新しておきます．

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

apt のパッケージリストを更新して yarn をインストールします．ただし，今回は nvm を使用しているので，Recommended packages (nodejs) が入らないようにオプションを付けます．

$ sudo apt update && sudo apt install --no-install-recommends yarn

Ubuntu 17.04 以降は yarn の代わりに cmdtest が入ってしまうようなので，その場合は apt remove し，設定を確認して再インストールしてください．

yarn -v でバージョンが確認できればひとまずインストール終了です．これで yarn create nuxt-app 等で Nuxt.js アプリケーションが開発できるようになっていると思います．

補足

インストール時エラーの解決

既存のプロジェクトを試しに動かすために，mac で作っているこのブログを clone してきて yarn install (or npm i) しても コード１で終了しました とエラーが表示されるだけで，お？となっていましたが階層を一つ上にしたらすんなりインストールできました．パスが長すぎるとエラーが出るとか．

一度失敗した状態で実行しようとするとエラーで進まないので，以下のコマンドでキャッシュを消してから再インストールです．

$ yarn cache clean

また，node-gyp エラーが出る場合は，以下のコマンドを実行することで必要なパッケージが入ります．

$ sudo apt install g++ build_essential

ちなみに，クローン等 GitHub の利用には SSH 認証を設定しておくと便利です．

localhostの有効化

このままだと Ubuntu (WSL) 上で localhost が起動したときに Windows から接続できないので，Windows のユーザディレクトリ直下 (C:/Users/<username>/) に設定ファイルを作成します．

localhostForwarding=True

参考：WSL2内で立ち上げたサーバにWindows側からlocalhostで接続する | Qiita

最後に

開発環境は macOS に依存している部分が多く，記事を書くときはわざわざ Live Share で共有していたのですが，これで Ubuntu (WSL) でも普通に使えそうです．

参考

• Ubuntu 20.04にNode.jsをインストールする方法 | DigitalOcean
• Installation | Yarn