KAEDE Hack blog

kaede0902 技術ブログ お仕事募集中。

Windows に WSL で Ubutnu 20 をいれて Node.js や CRA を動かす

why

dual boot よりも、マシン開けて SSD 追加するのも手軽だったためこれから始めた

result

WSL で Vim, Node.js, CRA が簡単に入った

手順

f:id:kei_s_lifehack:20201031041533p:plain

ubuntu.com

  • 公式にコマンドを打てと書いてあるのを読む

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 のアプリを落としてもう一度きどうしたらできた

f:id:kei_s_lifehack:20201031041839p:plain

  • いちおう 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

reactjs.org

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 くらいかかった。

ファイルシステムイベントでエラーが出ている

f:id:kei_s_lifehack:20201102080615p:plain

ブラウザが開くと、とりあえず例の画面になった。

今後

tech-lab.sios.jp

フォントが見づらいので、WSL Terminal などを検討したい