LearningSky.io

【 Tool 】透過 Docker 建立 React 開發環境

Archer -

內容

  • 學習目標
  • 前置準備作業
  • 建置開發環境
  • 測試與驗證

學習目標

  • 如何透過 Docker 建立 React 開發環境

前置準備作業

  • 本地端電腦已安裝 Docker 與 Docker Compose

建置開發環境

Step 1. 下載 Node.js 版的 Docker Image

  • 請在終端機輸入下方指令
docker pull node:14.18-alpine3.15

  • 請在終端機輸入下方指令以確認所下載的 Docker Image
docker images

Step 2. 建立 Dockerfile 與 app 資料夾

  • 請在專案目錄建立名為 Dockerfile 的檔案並輸入下方資訊
  • 在 Dockerfile 所有位置建立名為 app 的資料夾

Step 3. 建立 docker-compose.yml

  • 請在專案目錄建立名為 docker-compose.yml 的檔案並輸入下方資訊

Step 4. 建立 Docker Image

  • 請在終端機切換目錄到 Dockerfile 與 docker-compose.yml 所在位置並輸入下方指令
docker-compose build

  • 請在終端機輸入下方指令以確認 Docker Image
docker images

Step 5. 建立 React 專案

  • 請在終端機輸入下方指令
docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app react-sample"

Step 6. 啟動 Docker Image

  • 請在終端機輸入下方指令
docker-compose up

測試與驗證

Step 1. 透過瀏覽器查看 React 畫面

Step 2. 開啟 建置開發環境 段落 Step 2 所建立的 app 資料夾

  • 所初始化完成的程式碼皆位於 app 資料夾

GitHub

List of blogs