WindowsでReactの開発環境構築は一癖あった話
タイトル通りです.
具体的にはtsxを上書き保存した際にホットリロードされないのが不便だったのでいろいろ工夫したという話です.
WSLを使った方法で解決しました.
環境
Windowsの環境
WebStorm(IDE) WebStorm 2020.1.1
Build #WS-201.7223.93, built on April 30, 2020
Runtime version: 11.0.6+8-b765.40 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 10 10.0
1. WSL
WSL上にyarnをインストール
https://ubunlog.com/ja/yarn-instalador-paquetes-javascript-ubuntu-20-04/
ただし, node_modules/.cache/.eslintcache をオープンできないと怒られたので, 一度ファイルを削除して空の.eslintcacheを生成することでパーミッションエラーを回避
無事にホットリロードに成功.
2.Docker
結論: 重たすぎて使い物にならない
ホットリロードしているつもりが2分以上はタイムラグがある
Dockerfileに
FROM node:16-alpine
WORKDIR /usr/src/app
docker-compose-build.ymlに
version: '3'
services:
node:
build:
context: .
dockerfile: Dockerfile
volumes:
- ./:/usr/src/app
command: sh -c "yarn install"
docker-compose-start.ymlに
version: '3'
services:
node:
build:
context: .
dockerfile: Dockerfile
volumes:
- ./:/usr/src/app
command: sh -c "yarn install && yarn start"
ports:
- "3000:3000"
最初の一回のみdocker-compose-build.ymlを使ってからdocker-compose-start.ymlを立ち上げた.
正常に立ち上がるものの, あらゆるレスポンスが遅いので使用断念.
コメント入力