WSLでreactの開発環境作った話

Transcript

1. WSLで reactの開発環境作った話 テクノロジーアーキテクト本部 松島一樹
2. Windowsでのreact開発環境について
3. React開発方法 • 仮想マシンを立てる(virtualbox) • Vagrant+ansibleで簡単に作成できる • シンボリックリンクがあるため共有フォルダが使えない (ホストのエディタから編集できない) • NodeをWindowsに入れる • 無難そう • Windows Subsystem for Linuxを使う
4. WSLを使った理由 • Linuxのほうが使い慣れていた • Nodeのバージョン管理ツール(nvm)が使える • Windowsと相互運用しやすそう
5. Windows Subsystem for Linux ざっくり入門
6. WSLとは • Windows Subsystem for Linux(通称WSL) • Linux ELF64バイナリの実行環境
7. 仕組み ユーザモード カーネルモード Linux syscall 変換を行う NT syscall [1]画像出典 WSL System Calls (https://blogs.msdn.microsoft.com/wsl/2016/06/08/wsl-system-calls/)
8. WSL機能概要 • バックグラウンドプロセスの実行(一部) • 仮想的なLinuxのファイルシステム • ネットワーク通信 • シリアル通信のサポート
9. ファイルシステム • VolFs • VFSのほとんどの機能をサポート • “/”以下が格納 • Windowsのアプリケーションから触れない(ほうがいい) • DrvFS • Windowsのファイルと相互運用 • Linuxのアクセス権限は利用できない ver1803からできるようになった • I/Oが遅いといわれている[1] [1] Microsoft、WSLのI/Oパフォーマンス改善に取り組み https://news.mynavi.jp/article/20180815-676572/
10. 対応するディストリビューション など
11. つかいかた
12. bash起動方法 • アプリストアのアイコンをクリックする • “ファイル名を指定して実行”で”wsl”
13. 特定のコマンドを実行する • コマンドプロンプトで • Powershellで • Explorerで コマンド 引数
14. React開発環境
15. 環境構成 React project /mnt/c/Users/user/project/ C:¥Users¥user¥project Visual Studio code 編集 WSL Ubuntu 18.04 Node 8.11.4 実行 node起動 Debugスクリプトでwslのフラグを立 てるとwslでnodeを起動してくれる ブラウザ localhost:3000 • nodeの実行はwsl上で • プロジェクトのファイルはDrvfsに置く
16. よかった点 • Linuxでの構築方法を流用できる • エディタ(vscode)から制御できる • ネットワークの設定が不要
17. 悪かった点 • 仮想マシンと比べてビルドが遅い 参考: WSL vs VM for 開発作業(https://qiita.com/satoru_takeuchi/items/a54812806bba0eb48f02) • コマンドを誤るとwindowsの動作にも影響が出てしまう • 通称fork爆弾．windowsがフリーズする • userのフォルダも削除される？ 参考:Windows 10 WSLで『rm -rf /』を実行(https://news.mynavi.jp/article/dont_run_on_linux-3/) $ :(){ :|:& };: $ sudo rm –rf / --no-preserve-root
18. まとめ Linuxのバイナリを実行できる 動作は遅い 動作確認にはよさそう