初心者が「りあくと」を読んで、Reactの開発環境をwindows11でつくってみる。
「りあくと」が手元でみれる前提で書いているので、「りあくと」をサンプルでもいいので手に入れて読んでください。そこで詰まったことを中心に書いてあります。（途中読んでないとわからない部分があります）
りあくとはこちらからどうぞ
「りあくと」に出会う前の私
エンジニアとして初心者の私は本当に用語も常識もわからないので、全てが手探りです。
初めてWeb アプリケーション開発に関わらせていただけることになったのですが、Web アプリケーション開発は UNIX 環境でやるのが当たり前ということも知らず、そもそもwslってなんですかという状態です。(windowsでもubuntuなどをダウンロードしてUNIX環境で開発できるようにする仕組みです)
その開発に関わっているエンジニアさんは優しく教えてくださったのですが、環境構築でつまずいてしまっていました。その時教えていただいた方法は、自分の使ってるLenovoでHyper-Vを追加してからインストールする方法を教えていただいのですが、windows11ではそれはproしかできない方法で、諦めかけました(windows11はこのやり方を想定していなかったらこそできなかったのかもしれません)。これは一応やり方を書いておくと、lenovoでは、biosでintel virtual technologyをonにして、hyper-vとかをオンにしてwslをインストールする方法だった。
しかし、window11 wsl2で調べたらめっちゃ簡単な方法が出てきました。(自分で自分の環境に一番あった方法を探すのは意外と大切かも知れません)
なんと管理者権限でコマンドプロンプトを開いて
wsl --install
とコマンド一つ打つだけで、wsl2がインストールされるのです。
ここまで読んだ上で、この記事を読むとまとめられていてwindows10と11のwslのインストールの仕方の違いがわかるでしょう。
wslがなにかを詳しくつっこむと、僕はいくら時間が会っても足りなそうなのでとりあえずこのくらいで放置します。
「りあくと」に出会う
このようにwsl2のインストールにも苦労していたわたしがであったのが「りあくと」でした。
りあくとでは親切にも、windowsでもフロンエンドの開発環境を構築する方法を教えてくれます。
先程の工程で、wsl2のインストールとubuntuのダウンロードまではすんでいるので、『そのままでは WSL 環境で作られたファイルにすべて実行権限が付与されてしまうため、設定を変更する。以下の内容のファイルを /etc/wsl.conf として作成する。』のところからはじめます。
ここからは先程の「りあくと」の公式から出ている開発環境の構築方法を見ていることを前提にわからなかった部分だけを書きます
viコマンドの使い方はこちら、Linux上でのテキスト編集の方法としてviコマンドは有効です
etc/wsl.confでやろうとしていることはパーミッション問題の解決だと思います
aptはlinuxのパッケージ管理システムとこのこと。
bashはunbutuなどでデフォルトで使用されているシェルです。シェルも色々種類あってまだわかってないことが多いですね。
windows terminalで開いたときにデフォルトでubuntuが表示されるようにする方法も、そもそもどこからjson fileが開けるのかもわかりにくいと思うのでこの記事を参考にどうぞ
pathが通ってないと、コマンドもうけつけてくれない
「りあくと」のやり方だと、pathを通していないので、nodenvをインストールしようとしてもエラーが出る人もいるかも知れません。自分もpathが何なのかはわかっていませんが、pathをいれるとできるようになりました。pathの通し方は、この記事をどうぞ
pathとはなにかを読むと解像度上がりました。
この後にも、ts-nodeをnpm installしました。しかし、installされているはずなのに、
ts-node -vと打ってもts-nodeというコマンドはないよと言われてしまいました。これもpathが通っていなかったからでした。この記事で理解度が上がった感があります。
ここからは「りあくと」の本編に乗ってるやり方なので、コードも載せます
$ mkdir -p $(anyenv root)/plugins
$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
$ mkdir -p "$(nodenv root)"/plugins
$ git clone https://github.com/nodenv/nodenv-default-packages.git "$(nodenv root)/plugins/nodenv-default-packages"
$ touch $(nodenv root)/default-package
おそらくdefault-packagesのファイルの中身をいじるのに苦労すると思います。この記事を読んで、環境変数って何かわからないですが、それをいれてからcdで移動していけば、default-packagesを見つけました。あとは、sudo viで編集すればオッケーです。
vscodeの設定で、setting syncの設定はこれを見ればわかると思います。
適当なプロジェクトをローカルに用意するときに、リアクトが用意してくれたプロジェクトをgithubからcloneすると思います。
fatal: could not create work tree dir 'Riakuto-StartingReact-ja3.1': Permission denied
まずは、パーミッションについて勉強しましょう。
ルートディレクトリのパーミッションは555みたいです、だからcdもしない最初のrootディレクトリではmkdir rm もsudoなしには動かなかったわけですね。
僕の場合は、cdコマンドでhomeディレクトリの下の自分の名前のついたディレクトリまでいくとmkdirできたのでそこで作業しました。
それでもまだ、git cloneはできません
つぎはこんなエラーメッセージが出てきました
Warning: Permanently added 'github.com,13.114.40.48' (ECDSA) to the list of known hosts.
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
これは、Githubにsshキーを登録していないから出るエラーらしいです。
こちらの記事で非常にわかりやすく解説されています
ただ、ubuntuには、コマンドラインでクリップボードにコピーする(Windows の場合は clip.exe、MacOS の場合は pbcopy )ことがデフォルトだとなさそうそうなので、そこは工夫してみてください。僕はもうcatですましました。
sshについてもっと知りたい方はこの記事なんかいいと思います。
これだけわかれば、もう詰まることはないと思います。お疲れさまでした！
Discussion