# Learning Docker, Part3
###### tags: `Docker`

## 產品級的開發流程

## Docker Volumes
Docker Volumes 是 Docker 提供的一種數據持久化解決方案。當運行一個 Docker 容器時，它有一個自己的檔案系統，但當容器停止或被刪除時，任何寫入到該檔案系統的數據也會被刪除。然而，有時候我們需要在容器之間，或者在容器與主機之間共享和持久化數據，這就是 Docker Volumes 的用途。

Docker Volumes 提供以下特性：

1. **數據持久性(Persistent)和共享(Sharing)**：Volume 允許你在容器之間共享數據，並且即使容器被刪除，volume 中的數據也會被保留。你可以將 volume 掛載到一個或多個容器的指定路徑上。

2. **數據的一致性(Consistent)**：無論 Docker 容器在哪裡運行，它都可以訪問到 Volume 中的數據，並使用相同的檔案系統。

3. **主機和容器之間的數據隔離(Separation)**：Volume 存在於 Docker 主機上，但是管理在 Docker 中進行，這提供了一種在主機和容器之間共享數據的方式，同時避免直接操作主機檔案系統的風險。

使用 Docker Volumes 的基本命令包括：

- **docker volume create**：創建一個新的 volume。
- **docker volume ls**：列出所有的 volume。
- **docker volume rm**：刪除一個 volume。
- 在 **docker run**命令中使用 **-v** 或 **--mount** 來將 volume 掛載到容器的檔案系統上。

以下命令將創建一個新的容器，並將一個 volume 掛載到容器的 ***/app/data*** 路徑上：

`docker run -d -v myvolume:/app/data my_image`

這裡 myvolume 是 volume 的名稱，***/app/data*** 是容器內的路徑，**my_image** 是 Docker 映像的名稱。

### 實際應用
**註:node_modules在本機端不需要，可直接刪除，故需要在docker指令前面加上-v /app/node_modules 來建立一個匿名的volume**


以此方式運行後，如果在本地端內的資料有做更改，便不需要再重新Build一次才能及時收到改變後的結果。

### Windows上使用WSL來執行
在Windows上的設置會有所不同

1. **package.json的檔案內更改start的script**

  "scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",

2. **Dockerfile.dev內的設置**

FROM node:20-alpine
 
USER node
 
RUN mkdir -p /home/node/app
WORKDIR /home/node/app
 
COPY --chown=node:node ./package.json ./
RUN npm install
COPY --chown=node:node ./ ./
 
CMD ["npm", "start"]

3. **docker-compose.yml內的設置**

version: '3'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - /home/node/app/node_modules
      - .:/home/node/app
  test:
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - /home/node/app/node_modules
      - .:/home/node/app
    command: ["npm", "test"]

4. WSL的操作
- 在WSL內使用`explorer.exe .`來開啟資料夾並複製路徑
- 在VSCode內選擇Open Folder並貼上複製的網址，即可在VSCode中開始編輯
- 輸入`docker-compose up --build`來啟動便可開始測試
- 在瀏覽器輸入[http://localhost:3000](http://localhost:3000) 來打開APP
- 測試一
在src/App.js更改內文，在APP上應該可以看到即時的改變
- 測試二
在src/App.test.js內新增一個測試，應可在WSL上看到即時的重跑測試結果