Docker 極速入門 -前端工程篇

For CatBeer 貓啤 Web 小聚 #01

Azole (小賴)

9 min readJul 11, 2024

本篇是紀錄 2024/7/9 在 CatBeer 社群分享的內容，活動介紹可以參考 Accupass 的活動連結。

在分享時間有限的情況下，我鎖定兩個實用場景來介紹 Docker，雖然分享時還是大超時了，但…Docker 對我來說，實在太多東西可以討論了，如果想知道更多內容，歡迎報名完整的 Docker 課程。

分享前的準備

只需要大概知道以下指令即可

Linux 的基本指令，例如 cd, ls, rm, pwd
git 指令: pull, push, commit

另外，可以先安裝好 Docker Desktop 的話，就可以邊聽邊跟著試試看，Docker 官網的安裝步驟算寫得蠻清楚了:

Docker 介紹

Docker 是一種把你的專案、軟體及其所有相依的套件、函式庫等「打包」在一起的工具，讓你可以很輕易地在任何地方執行它。

印象中 Docker 曾宣稱「Build once, Run anywhere」，一開始的確也是這樣，直到 Mac M1 出現後就破功了，但這也是有方法可以解決的。

Docker 底層技術

利用 Linux 上的 namespace 跟 cgroup 技術建立 container
。namespace: 隔離
。cgroups: 限制資源
Docker != Container
。Docker 是一個工具，用來建立、管理 container
。Container 是一個執行環境，裡面有你的專案、軟體等
Mac & Windows 上的 Docker 是透過 VM 來達成的
。如果想要觀察 container 一些稍微比較底層的情況，建議在 Linux 上實驗

Docker 組成

Image: 用來啟動 container 的「範本」
Image Registry: 類似 github，有一堆 repo，裡面存放別人已經做好的 image
。dockerhub: Docker 官方的 image registry，https://hub.docker.com/
。其他:
- Red Hat: quay.io
- google: gcr.io
- AWS: ECR
- github: ghcr.io
Dockerfile: 用來建立 docker image 的「程式」
Container

Docker 指令基本格式

Docker 的指令有新舊兩版，我個人鼓勵初學時，使用新版指令，雖然新版指令比較冗長，但比較明確跟一致。（如果你現在是裝最新版的 Docker Desktop，舊版的指令一樣能用的。）

這邊的對象是指:

image
container
network
volume

例如:

# 列出 container
$ docker container ls
# 列出 image
$ docker image ls

# 刪除 container
$ docker container rm {container id}
# 刪除 image
$ docker image rm {image id}

實際案例

使用別人開發好的 image

Step 1: 讓自己的電腦裡有 image
這步可以省略，在下一步、啟動 container 時，如果發現你的電腦裡沒有這個 Docker image，Docker 會自動去拉取
Step 2: 用 image 來建立 container
Step 3: 關閉 container
Step 4: 移除 container

# Step 1:
$ docker image pull ashleylai/lab:api

# Step 2:
$ docker container run -d -p 3001:3000 ashleylai/lab:api


# Step 3:
## 找出 contaienr id
$ docker container ls
## 停止 container
$ docker container stop {container id}

# Step 4:
$ docker container rm {container id}

說明:

-p 3001:3000 是指將 container 裡的應用程式在 listen 的 port number 映射到你電腦的 port Number，其格式為 {你電腦的 port number}:{container 裡的 port number}
。可以想像，{container 裡的 port number} 是開發 Image 的人決定的，也許他允許用環境變數注入，但大體來說，就是由開發 Image 的人決定。 -> 既然這是由開發 Image 的人決定的，那記得要跟 Image 提供方確認應該要設定多少。
。{你電腦的 port number} 這個就是你可以自行決定的，建議使用 1024 ~ 65535 之間的數字，而且是要你電腦沒有在用的。
ashleylai/lab:api 這就是 image 名稱，我們將以這個 image 作為「樣板」來啟動一個 container。一樣需要 Image 的提供方來提供給你。
docker container run 還有其他的參數，一樣都可以向 Image 的提供方確認。

利用 container 來建立自己的開發環境

這次我們以 vite + react 為例，試試看能不能在我的 Mac 筆電裡，不安裝任何 nodejs 環境下，但卻可以開發 react 專案。

Step 1: 決定環境，例如 nodejs 22
。去 dockerhub 上面找 https://hub.docker.com/_/node
Step 2: 從 Host (執行 container 的電腦) 掛載檔案夾進去 container 裡
…直接 demo 吧

建立專案

# 先用 cd 切換到想要放專案的檔案夾
$ docker container run -it \
 -v $(pwd)/myapp:/app \
 -w /app \
 -p 3002:5173 \
 --rm \
 node:22 bash

# 以下是在 container 裡執行的步驟
# 證明真的是 node 22
> node -v
v22.4.0
# 開始建立 react 專案
> npm create vite@latest vite-react-app -- --template react
> cd vite-react-app
> npm i
> npm run dev -- --host

這次的 docker container run 參數眾多，無法在時間內解釋完畢，如果要拿來用的話，可以注意幾個重點:

執行這行指令的時候，先確定你正在你要建立專案的檔案夾，可以先開一個空的檔案夾，在 Terminal cd 到這個空的檔案夾後，執行這個指令及建立 react 專案的指令後，觀察看看你電腦裡（也就是 container 「外面」）這個檔案夾的變化，會更有感覺。
注意，啟動 react 專案時，要加上 --host。分享時有學員提醒，可以設定進去 vite 的 config 裡，是的，可以，這個看個人喜好嚕，我選擇在下指令時加上，是因為我想要保持「啟動時才決定」的彈性。
啟動 container 時加上 --rm，當 container 停止(stop)時，會自動移除，不需要再去 r

完成之後，可以測試看看 hot reload 是否仍有效，我測試起來是有作用的，這樣就可以達成用 container 來建立開發環境的目的了！

遺珠之憾

受限於時間，只能簡單介紹兩個應用，目的是希望聽眾可以直接拿去用，不過不過，我個人蠻老派的，總覺得能知道每個指令、每個有用到的參數在做什麼，能讓自己把這個工具用得更好，而且也能進一步自己組合、發展其他應用方式出來，知其然也要知其所以然。

以下列出還可以分享的內容:

指令、參數詳解
Docker Nework
Docker 底層詳解
透過 Dockerfile 開發自己 Image，並且發佈在 dockerhub 上
最佳化 Docker Image
Docker Compose 的運用
Docker 的資源限制
容器安全注意事項
…等

都是這樣的，不碰則已，一碰就會發現水很深，但有門檻，才有競爭力嘛，Docker 已經不算是很難學的東西，可以從這邊入手，學習到更多關於 Linux 及網路的知識，我覺得是蠻划算的 🤭

關於 Docker 的完整內容，可以參考 8 月即將在五倍紅寶石開設的實體課程，https://5xcampus.com/courses/docker，有雙人跟三人報名優惠，歡迎有興趣的朋友參考一下。

另外也歡迎聯繫，可以專班（自己湊人開班之類的）或企業內訓，另外也提供 AWS 等相關課程，歡迎洽詢。

我或我們團隊應該要用 Docker or Container 嗎？

我自己是受 Docker （或者說 Container）幫助很多，解決了很多我在實務上的問題，當然，可能也製造了一些新問題，軟體領域都是這樣的，就看你覺得值不值得交換。我個人建議，先不要排斥，先用用看，也不要一開始就全面導入什麼的，先小範圍用用看，感受一下你們自己需不需要在來決定。

以下是你在思考或感受的過程中，可以放在心裡的問題：

Q. 當你有一台新電腦或是新的 server，你需要花多少時間把開發、執行環境安裝回來?
Q. 「在我的電腦不能動」or 「在我的電腦可以動」?
Q. 上版、退版容易嗎?
Q. 入門門檻高? -> 歡迎來找我討論喔