catbeer-docker.md

Docker 極速入門 -前端工程篇 | CatBeer 貓啤 Web 小聚 #01

• Accupass
• 2024/7/9
• 小賴
• ashleylai58@gmail.com
• blog: https://azole.medium.com/

Prerequisites

• 常用 linux 指令: ls, rm, pwd
• git 指令: pull, push, commit

Docker 安裝

https://github.com/azole/docker-ironman-2022/blob/main/A-how-to-install-docker.md

Docker 介紹

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

Build once, Run anywhere

(接近啦,自從有了 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 指令基本格式

對象:

• 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
  • 這步可以省略
• 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}

• 請合作方提供 image 名稱
• 請合作方提供參數
  • port number
  • 其他需要的參數

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

以 vite + react 為例

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

建立專案

# 先用 id 找到自己的 user id 跟 group id
$ id
uid=501(ashley) gid=20(staff)...

$ docker container run -it \
  -v $(pwd)/app:/workdir/app \
  -v $(pwd)/.npm:/workdir/.npm \
  -w /workdir/app \
  -e NPM_CONFIG_CACHE=/workdir/.npm  \
  -u 501:20 \
  -p 3002:5173 \
  --rm \
  node:22 bash

# 真的是 node 22
> node -v 
v22.4.0
> npm create vite@latest vite-react-app -- --template react
> cd vite-react-app
> npm i
> npm run dev -- --host

注意:

• 啟動 react 專案時，要加上 --host
• 啟動 container 時加上 --rm，當 container 停止(stop)時，會自動移除，不需要再去 rm

TODO: 測試 hot reload

平常開發時

$ docker container run -it \
  -v $(pwd)/app/vite-react-app:/workdir/app/vite-react-app \
  -w /workdir/app/vite-react-app \
  -u 501:20 \
  -p 3002:5173 \
  --rm \
  node:22 npm run dev -- --host

遺珠之憾

• 指令、參數詳解
• Docker Nework
• Docker 底層詳解
• 透過 Dockerfile 開發自己 Image，並且發佈在 dockerhub 上
• 最佳化 Docker Image
• Docker Compose 的運用
• ...

我應該要用 Docker or Container 嗎？

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

參考資料

• [WebConf2023] Docker 入門 101
• Docker Container 基礎入門篇 1
• Docker Container 基礎入門篇 2
• 《Docker 實戰 6 堂課:56 個實驗動手做,掌握 Linux 容器核心技術》

歡迎聯繫，專班與企業內訓，客製化 Docker 與 AWS 課程。