Windows に WSL で Ubutnu 20 をいれて Node.js や CRA を動かす
why
dual boot よりも、マシン開けて SSD 追加するのも手軽だったためこれから始めた
result
WSL で Vim, Node.js, CRA が簡単に入った
手順
- 公式にコマンドを打てと書いてあるのを読む
To enable WSL 2 on Windows 10 May 2020 update and newer run the following in PowerShell as Administrator:
- 2020/05 以降ならパワーシェルで admin でこれを打て
powershell を 右クリックで管理者として実行して これをうつ
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
あとは再起動って書いてあるけど、Ubnuntu のアプリを落としてもう一度きどうしたらできた
- いちおう ipv4 adress は隠す
root@DESKTOP-8G3A2F8:/# cd mnt/
root@DESKTOP-8G3A2F8:/mnt# ls
c d
root@DESKTOP-8G3A2F8:/mnt# cd c/
root@DESKTOP-8G3A2F8:/mnt/c# ls
ls: cannot access 'DumpStack.log.tmp': Permission denied
ls: cannot access 'hiberfil.sys': Permission denied
ls: cannot access 'pagefile.sys': Permission denied
ls: cannot access 'swapfile.sys': Permission denied
'$Recycle.Bin' 'Documents and Settings' OneDriveTemp 'Program Files' ProgramData 'System Volume Information' Users hiberfil.sys pagefile.sys
'$WinREAgent' DumpStack.log.tmp PerfLogs 'Program Files (x86)' Recovery System.sav Windows hp swapfile.sys
root@DESKTOP-8G3A2F8:/mnt/c# cd Users/
root@DESKTOP-8G3A2F8:/mnt/c/Users# ls
'All Users' Default 'Default User' Public curio desktop.ini
root@DESKTOP-8G3A2F8:/mnt/c/Users# cd curio/
root@DESKTOP-8G3A2F8:/mnt/c/Users/curio# ls
'3D Objects' Documents 'My Documents' OneDrive SendTo ntuser.ini
AppData Downloads NTUSER.DAT Pictures Templates 'スタート メニュー'
'Application Data' Favorites NTUSER.DAT{53b39e88-18c4-11ea-a811-000d3aa4692b}.TM.blf PrintHood Videos
Contacts Links NTUSER.DAT{53b39e88-18c4-11ea-a811-000d3aa4692b}.TMContainer00000000000000000001.regtrans-ms Recent ansel
Cookies 'Local Settings' NTUSER.DAT{53b39e88-18c4-11ea-a811-000d3aa4692b}.TMContainer00000000000000000002.regtrans-ms 'Saved Games' ntuser.dat.LOG1
Desktop Music NetHood Searches ntuser.dat.LOG2
root@DESKTOP-8G3A2F8:/mnt/c/Users/curio# cd Downloads/
root@DESKTOP-8G3A2F8:/mnt/c/Users/curio/Downloads# ls
ChromeSetup.exe 'Docker Desktop Installer.exe' EpicInstaller-10.18.10-c1cb651e69eb4ff2a28818a8058a584f.msi FontChanger FontChanger.zip SteamSetup.exe desktop.ini
root@DESKTOP-8G3A2F8:/mnt/c/Users/curio/Downloads#
- あとは cd .. でひとつ階層を上がるとおなじみのいろいろなファイルが並んでいる
- そこから mnt/ を選択して選んでいけば、ふつうに windows で使うファイルに簡単にアクセスできる
感想
- 2年前に なんかいろいろ苦戦しながら win のファイルにアクセスできるように苦労したのに、今回めちゃくちゃ簡単だったな～
- ctrl c 問題も解決してる
既に入っているものとこれから入れる必要があるもの
- フォントがクソ見ずらいので変更する必要がある
- vim 8.1 は入ってるからとりあえず md は書ける
- git 2.25 が入ってるから clone すぐできる
- docker は apt-get では入らない
- ruby, node, php7.4 はまだ入ってない
node, npm をいれる
- npm node さえあれば Next/React で作業できる？ いれてみる
apt get install nodejs After this operation, 30.7 MB of additional disk space will be used. Do you want to continue? [Y/n] y Get:1 http://archive.ubuntu.com/ubuntu focal/main amd64 libc-ares2 amd64 1.15.0-1build1 [37.8 kB] Get:2 http://archive.ubuntu.com/ubuntu focal/universe amd64 libnode64 amd64 10.19.0~dfsg-3ubuntu1 [5765 kB] Get:3 http://archive.ubuntu.com/ubuntu focal/universe amd64 nodejs-doc all 10.19.0~dfsg-3ubuntu1 [942 kB] Get:4 http://archive.ubuntu.com/ubuntu focal/universe amd64 nodejs amd64 10.19.0~dfsg-3ubuntu1 [61.1 kB] Fetched 6807 kB in 35s (195 kB/s)
- 30MB 使用して nodejs が入った
~# node -v v10.19.0
v10
apt-get install npm Need to get 55.6 MB of archives. After this operation, 237 MB of additional disk space will be used. Get:382 http://archive.ubuntu.com/ubuntu focal/universe amd64 node-slide all 1.1.6-2 [6328 B] Get:383 http://archive.ubuntu.com/ubuntu focal/universe amd64 npm all 6.14.4+ds-1ubuntu2 [583 kB] Fetched 55.6 MB in 6min 4s (153 kB/s) Preparing to unpack .../372-npm_6.14.4+ds-1ubuntu2_all.deb ... Unpacking npm (6.14.4+ds-1ubuntu2) ... Setting up libnet-dbus-perl (1.2.0-1) ... Processing triggers for man-db (2.9.1-1) ... Processing triggers for mime-support (3.64ubuntu1) ... Processing triggers for libc-bin (2.31-0ubuntu9) ...
npm -v 6.14.4
npm 6.14.4 も入った。こちらはなかなか大きい。237MB
CRA install
開発といえば React なので Create React App の npm ライブラリをいれるn
npm install -g create-react-app /usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js + create-react-app@4.0.0 added 92 packages from 46 contributors in 9.411s
これは 9sec で入った一瞬！
npx create-react-app win-react
Creating a new React app in /root/win-react.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
+ react-dom@17.0.1
+ cra-template@1.1.0
+ react@17.0.1
+ react-scripts@4.0.0
added 1935 packages from 739 contributors and audited 1938 packages in 138.49s
+ @testing-library/jest-dom@5.11.5
+ web-vitals@0.2.4
+ @testing-library/react@11.1.0
+ @testing-library/user-event@12.1.10
added 29 packages from 77 contributors and audited 1967 packages in 11.246s
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
removed 1 package and audited 1966 packages in 6.227s
CRA を使って実際に一つ作ってみた。160s くらいかかった。
ファイルシステムイベントでエラーが出ている
ブラウザが開くと、とりあえず例の画面になった。
今後
フォントが見づらいので、WSL Terminal などを検討したい
