WSL を利用して Ubuntu の環境のセットアップ

前提条件

今回の環境の設定では、以下のマシンの環境で検証をしました。

• Intel Core i7-1260
• メモリ 32GB
• Windows 11 Pro 24H2

基本的には WSL が動く環境であれば、下記の手順で環境を整備していくことが可能です。

WSL の環境を整える

まず WSL を実行するためにはいくつかのコンポーネントをインストールする必要があります。この手順は、以下のコマンドを実行することで進めていくことができます。

• ターミナルを管理者モードで起動する
• 以下のコマンドを実行してください

• コマンドを実行すると、自動的にサブシステムのダウンロード、インストール、そしてWindows コンポーネントを有効化していきます

• インストール完了後、マシンを再起動します

再起動が完了すると、WSL を利用することが可能となります。

Ubuntu のインストール

Microsoft Store から Linux のインストールイメージを選択します。今回は、Ubuntu のアプリをインストールします。

初回起動をした際には、ユーザー名とパスワードを設定する必要があります。画面に表示される手順に従って、設定を進めてください。

インストールをした Ubuntu のシステムのパッケージインデックスを更新します。

これで様々なパッケージをインストールする準備が整いました。

Node.js のインストール

Next.js や Astro などのアプリを開発する環境を整えていくために、まずは Node.js をインストールしていきます。なお、node のバージョンを簡単に切り替えることができるようにするために n をインストールしていきます。

node と npm のインストール

まず Ubuntu のパッケージとして提供されている node および npm をインストールします。

インストールが完了したあと、それぞれのバージョンを確認すると以下のように表示されます。

まずは node および npm が動くようになりました。

n のインストール

続いて簡単に node のバージョンを切り替えることができるコマンド n をインストールします。

インストールが完了したところで、以下のコマンドを実行してバージョンを確認します。

これで n のコマンドのインストールが完了しました。このコマンドを利用して、node の lts バージョンをインストールします。

実行したタイミングでは 22.15.0 のバージョンをインストールしています。

合わせて apt でインストールをした node と n でインストールをした node のパスの違いが表示されています。n でインストールをした node のパスを参照するように、シェルの内部ハッシュテーブルをリセットするために、以下のコマンドを実行します。

実行後、各コマンドのバージョンを確認します。

新しいバージョンを認識していることを確認しました。

node のアンインストール

n でインストールをした node のインストールが出来たため、最初にインストールをした apt コマンドでインストールをした node、npm のパッケージを削除します。

これで node および npm を利用する環境が整いました。

Visual Studio Code のインストール

WSL で稼働する Ubuntu の環境で node が動くようになりました。続いて、Visual Studio Code をインストールします。Visual Studio Code は Windows の環境にインストールをします。今回は Microsoft Store からインストールをしています。

インストールをした Visual Studio Code を起動して、機能拡張のインストールの画面を開いて WSL の3文字を入力、検索結果として出てくる Microsoft の機能拡張の WSL をインストールしてください。

これで Visual Studio Code が WSL と連携して動作するようになります。早速、Ubuntu のコマンドラインの画面を開いて、以下のコマンドを実行します。

初回は、必要なコンポーネントを Ubuntu の環境にインストールを実行します。

Visual Studio Code が起動すると、Ubuntu の環境とつながっていることを確認することができます。以下の画面の左下に WSL:Ubuntu と表示されており、またファイルはすべて Ubuntu のホームのファイルが表示されていることがわかります。

上記の状況になったところで、Visual Studio Code を利用して Ubuntu の環境での開発が可能になりました。