Reactプロジェクト用のDocker環境のサンプル。
- 当リポジトリをクローンする。あるいはzipでダウンロードする。
- Visual Studio Codeを起動し、クローンした先のフォルダを開く。
- vscodeのメニューから「Reopen in container」を選択する。コンテナのビルドが始まるため、しばらく放置する。
- コンテナのビルドが終わったら、シェルを開き
npx create-react-app app_name
を実行する。app_name
の部分は任意。- TypeScriptで作りたい場合は
--template typescript
のオプションをつける。
- TypeScriptで作りたい場合は
cd app_name
を実行してフォルダを移動する。yarn start
を実行して、ブラウザで「localhost:3000
」にアクセスする。Reactの画面が表示されれば成功。
当リポジトリをWindowsで利用しようとしたとき、ファイルdevcontainer.json
におけるフォルダ指定を書き換える必要があった。
"dockerComposeFile": [
"..\\docker-compose.yml", # ここの行
"docker-compose.yml"
],
「1つ上のフォルダにあるdocker-compose.yml
」を指している部分について、本来スラッシュ1つ/
だった部分をバックスラッシュ2つ\\
に変更してエスケープしている。macOSなど他のプラットフォームだと問題ないのだが、Windowsに関してのみこの部分がスラッシュ1つだとうまく解釈できずエラーになった。今はどうかわからないが・・・。