🐧

WSL環境構築でのインシデントレポート

2024/11/15に公開

導入

今回は僕が環境構築でミスったことをまとめようと思います。以下の技術スタックの環境構築を行いました。

今までは環境構築が苦手すぎて、Replitなどのブラウザのコンパイラを使っていました。ただ、優秀な後輩たちがメキメキと開発を進めているのを見て危機感が募りました。

定期テスト終了後にさっそく取りかかりました。WSLの初期設定は済んでいましたが、ファイルの管理ができていませんでした。エクスプローラーを隅々まで見てもどこにもない…。しかし、WSL接続中にファイルの場所を見たところ解決しました。

ちなみに、WSLのファイルシステムはWindows側から下記のコマンドを打てばアクセスできます。

$\Ubuntu\home\ユーザー名

ただ、僕はネットワークの設定を表示オフにしていたので、そもそも見つけられませんでした…。環境構築で躓く場合、PC側の設定ミスも大きな原因になるので注意です。

続いて、Node.jsをインストールしてReactを勉強しようとしました。最初のインストールまでは順調でした。

Ubuntu上で以下のコマンドを実行

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

これでNode.jsとnpmが入るはず…だったのですが、ターミナルでnpmコマンドを打ったらエラーが出ました。

npm --version

上記のコマンドを試したところ、「コマンドが見つからない」とのエラーメッセージが。原因はNode.jsは入ったけどnpmがうまく入っていなかったパターンでした。なので個別にnpmをインストールしました。

sudo apt install npm

また、Reactのプロジェクトを作ろうとしたときにも問題が発生。エラーメッセージを読んでみると「Node.jsのバージョンが古い」とのこと。最新版を使うためにnというバージョン管理ツールをインストールしました。

sudo npm install -g n
sudo n stable

これで無事、最新のNode.jsに切り替えられました。

まずは、プロジェクト作成コマンドを実行しました。

npx create-react-app my-app

実行後、ターミナルに謎の長文エラーが…。VScodeのWSL連携がうまくいっていないことが分かりました。
VScode側で再度WSL接続を試みても、動かない…。諦めてエラーメッセージをChatGPTに入れると「再起動しろ」とのことだったので従いました。

wsl --shutdown

その後、PCごと再起動。
結果、ちゃんとReactプロジェクトも作れるようになりました。Windowsで困ったらまず再起動。これはてっそくですね（ただし作業中のデータは必ず保存しておきましょう）。

今回の環境構築はかなり試行錯誤の連続でした。でも、苦労した分いろいろな知識が身につきました。やはりコードを眺めてるだけじゃなくて、実際に手を動かすことが大事だなと痛感しました。これからは「ミスして学ぶ」スタンスを大事にしていきたいです。

ここまで読んでいただきありがとうございました！