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

內容

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

學習目標

• 如何透過 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 畫面

• 網址 http://localhost:3000

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

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

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/
• https://github.com/ArcherHuang/Blog-LearningSky.io