Docker 是現代網站開發不可或缺的技術之一

因為工作需要碰一些 React，所以就想說架設一個開發測試用的環境。但是又不想把原生作業系統裝一大堆有的沒的，立馬就想到了 Docker！剛好最近也在練習，小孩子才做選擇，我兩個都一起練習～

設定 Node.js 環境

$ docker pull node:current-alpine

因為我們只是練習 React 而已，所以安裝 alpine 版本就好了

也可以安裝最原始版本：docker pull node

$ docker images
REPOSITORY       TAG              IMAGE ID       CREATED          SIZE
node             latest           c71adfc6ec58   11 days ago      995MB
node             current-alpine   41b5b4b810c1   12 days ago      168MB

是不是！容量差超多的吧～

設定 Dockerfile

Dockerfile

FROM node:current-alpine

ADD ./app /app

WORKDIR /app

RUN npm install -g create-react-app

我們預設我們的程式碼放在 app 資料夾底下，所以記得在與 Dockerfile 同一個資料夾底下建立 app 資料夾。

最後是使用 create-react-app 打包與編譯 React，所以就一併設定安裝溜～

設定 docker-compose.yml

docker-compose.yml

version: '3.8'

services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./app:/app
    command: sh -c "cd my-react && npm start"
    ports:
      - "3000:3000"
    stdin_open: true

這邊設定專案名稱為 my-react，可以自行修改成自己要的專案名稱

建立 Docker Image

$ docker-compose build

$ docker images
REPOSITORY       TAG              IMAGE ID       CREATED             SIZE
my_docker_node   latest           d3692d539777   26 seconds ago      485MB
node             latest           c71adfc6ec58   11 days ago         995MB
node             current-alpine   41b5b4b810c1   12 days ago         168MB

可以看到多出一個剛剛建立的 image my_docker_node

使用 create-react-app 建立 React 專案

$ docker-compose run --rm node sh -c "create-react-app my-react"

會在 app 底下建立 my-react 資料夾，並新增專案所需的檔案們

app/
└── my-react
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── public
    ├── README.md
    └── src

4 directories, 3 files

一切就緒 Go !

$ docker-compose up

前往 http://localhost:3000，就能夠看到預設的歡迎頁面！ React App

參考資料