Ubuntu 20.04にNuxt.js環境を構築する

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

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

nvmインストール

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

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

terminal

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

Node.jsインストール

terminal

$ nvm install stable --latest-npm

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

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

terminal

$ nvm list-remote

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

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

terminal

$ node -v

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

terminal

$ nvm use stable

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

terminal

$ 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 にするとき)

terminal

$ nvm alias default stable

Yarnインストール

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

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

terminal

$ 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) が入らないようにオプションを付けます.

terminal

$ 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) しても コード1で終了しました とエラーが表示されるだけで,お?となっていましたが階層を一つ上にしたらすんなりインストールできました.パスが長すぎるとエラーが出るとか.

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

terminal

$ yarn cache clean

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

terminal

$ sudo apt install g++ build_essential

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

https://blog.mktia.com/connect-to-github-with-ssh

localhostの有効化

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

.wslconfig

localhostForwarding=True

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

最後に

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

参考