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 認証を設定しておくと便利です.
localhostの有効化
このままだと Ubuntu (WSL) 上で localhost が起動したときに Windows から接続できないので,Windows のユーザディレクトリ直下 (C:/Users/<username>/
) に設定ファイルを作成します.
.wslconfig
localhostForwarding=True
参考:WSL2内で立ち上げたサーバにWindows側からlocalhostで接続する | Qiita
最後に
開発環境は macOS に依存している部分が多く,記事を書くときはわざわざ Live Share で共有していたのですが,これで Ubuntu (WSL) でも普通に使えそうです.