okinawa

IT勉強メモ

DockerでReact環境構築(Dev Containerでホットリロード)

自分用メモ。

Dev Containerの詳しいことは下記に書いたのでこちらはメモ程度。
この記事は下記の続き。
dodosu.hatenablog.jp

前提

下記は準備済み。

  • VsCode
  • Docker DeskTop
  • WSL2
  • Reactプロジェクト

docker-compose.yml作成

version: "3"

services:
  react-app: 
    image: node
    volumes: #ローカルのソースコードのパス:コンテナのソースコードのパス
      - C:\VsCode_Workspace\weather_app\frontend:/react-app
    command: npm start # これ効いてないかも
    ports:
      - "3000:3000"

Dev Containerでコンテナ起動

  1. VsCodeでdocker-compose.ymlを配置したフォルダを開く
  2. Ctrl + Shift + P
  3. Dev Containers: Add Dev Container Configration file
  4. Add Configration to workspace
  5. From docker-compose.yml
  6. OK
  7. Reopen in Container

これでコンテナ起動&コンテナ内VsCodeが開く。

terminalでnpm startして動作確認