安裝 Docker

• 安裝 Docker
  • Windows
• Dockerize
  • Step 1 - Create Dockerfile
  • Step 2 - Select your base image
  • Step 3 - Copy your source code
  • Step 4 - Installing dependencies
  • Step 5 - Run your code
  • Step 6 - Build your own image
  • Step 7 - Run your image

Windows

首先到這裡安裝對應你 OS 版本的 docker，這邊範例使用的版本是 v4.20，Windows 版本安裝好後需要重新開機。

可能會需要更新 WSL

首先我們可以先輸入以下指令：

$ docker                  # 測試 docker 有沒有安裝成功
$ docker image ls         # 可以看目前你有安裝 image 的列表
$ docker pull ubuntu      # 下載最新的 ubuntu

如果想看有哪些 image 可以安裝可以到 Docker Hub 上找。

安裝好會顯示這樣：

透過 GUI 也可以看到：

透過我們剛剛安裝的 ubuntu image 讓它跑起來執行變成 container，輸入以下指令：

$ docker run -it ubuntu bash

這個指令的用意：
docker run: Create and run a new container from an image
-i, --interactive: Keep STDIN open even if not attached
-t, --tty: Allocate a pseudo-TTY
ubuntu: image name
bash: command, 這邊代表

這意味著我們可以在任何作業系統透過 docker 來執行 ubuntu 了。

Dockerize

簡單來說就是把你專案的程式碼跟環境一起打包起來變成一個 image，之後不管在哪一台機器上，只要有安裝 Docker，我們就可以透過 Docker 來開啟這個 image 並建立出 container（就是讓你程式跑起來）。

這邊舉例一個簡單的範例：打包 vite 的範例網站

Step 1 - Create Dockerfile

首先在你的專案跟目錄內建立 Dockerfile，接著我們要來選擇合適的 base image。

Step 2 - Select your base image

Docker 的 image 有點類似疊積木的方式來建構的，我們可以去 Docker Hub 上找適合你程式碼環境的 base image，然後再慢慢添加其他 image 成你想要的樣子。

例如我這個專案需要使用到 Node.js，所以我會需要一個有 Node.js 環境的 image，可以有兩個選擇：

• 直接使用 node 做為你的 base image。
• 先使用 ubuntu 做為你的 base image，之後靠 install 的方式來安裝 Node.js。

當然選能做越少事的那一個囉，我們採用第一個方案。

所以我們在 Dockerfile 第一行輸入：

FROM node:lts-alpine

node 代表的是 image name，而冒號後面的是 tag，這邊我選擇的 lts 意思就是 Long-term support 穩定版本；alpine 代表我使用的是基於 Alpine Linux OS，好處是它檔案很小只有 7 MB 左右而已。

如果你只有寫 FROM node:lts，那此 base image 會是基於 ubuntu，此時檔案大小大概會是 77 MB 左右，差蠻多的。

Step 3 - Copy your source code

有了 Node.js 環境接下來就要把我們專案的 code 包進去，首先我們使用 WORKDIR 指令來切換工作目錄。

WORKDIR /app

接著我們把目前專案內的所有檔案都複製到當前工作目錄：

COPY . .

Step 4 - Installing dependencies

有了環境以及程式碼，現在我們就要來安裝相關的依賴套件，我們可以使用 RUN 來執行指令透過 npm 來安裝 http-server 和專案所需套件，最後再清除 cache ，清除快取的目的是為了讓我們最後 build 出來的 image 不要包含這些 cache，減少 image 檔案大小。

RUN npm install -g http-server
RUN npm install && npm cache clean --force

Step 5 - Run your code

現在我們要把我們專案給跑起來，這邊我用 vite 來當範例，首先我們先跑 npm run build 透過 vite 幫我們建構出生產環境中靜態網站所需的檔案：

RUN npm run build

透過 vite 建置好後，理論上在專案根目錄下會有一個 ./dist 資料夾，我們需要透過 http-server dist 指令來建立執行靜態伺服器。但這邊特別注意因為該指令是常駐程式，所以不能使用 RUN，我們需要透過 CMD 這個來執行該指令：

CMD [ "http-server", "dist" ]    

同時我們也需要使用 EXPOSE 來建立監聽 port，這邊將使用 8080（http-server 這個套件預設的 Port）：

EXPOSE 8080

Step 6 - Build your own image

根據上述所敘，完整版 Dockerfile 如下：

# base image
FROM node:lts-alpine

# make the 'app' folder the current working directory
WORKDIR /app

# copy project files and folders to the current working directory
COPY . .

# install project dependencies
RUN npm install -g http-server
RUN npm install && npm cache clean --force

# build app for production with minification
RUN npm run build

CMD [ "http-server", "dist" ]      
EXPOSE 8080   

接著我們在終端機輸入以下指令（記得要在專案根目錄），就可以編譯出我們自己的 image 囉：

$ docker build -t vue-project-server .

• vue-project-server 這邊是你 image 名稱
• . 是你 Dockerfile 檔案路徑

Step 7 - Run your image

現在我們有 image 了，要執行的話也很簡單，只需要輸入：

$ docker run -it -p 1234:8080 --rm --name vue-testing vue-project-server

• -p: 指定 Port，這邊我用了一個範例 1234:8080，意思是你連線的 Port 是 :1234 然後對應到的是你這個 image 內部 Port 8080。
• -rm: 單純防呆說當有重覆的 container 是打開的就自動刪除
• --name: 單純替你的 container 命名
• vue-project-server: 你要執行的 image 名稱

當你執行後理論上就成功把你的 image 跑起來了，而且會自動建立出靜態伺服器，然後你只需要在瀏覽器上輸入 localhost:1234 就可以瀏覽了！

tags: Docker