# 安裝 Docker
[toc]

## Windows
首先到[這裡](https://www.docker.com/)安裝對應你 OS 版本的 docker，這邊範例使用的版本是 v4.20，Windows 版本安裝好後需要重新開機。

可能會需要更新 WSL

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

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

> 如果想看有哪些 image 可以安裝可以到 [Docker Hub](https://hub.docker.com/search?q=&type=image) 上找。

安裝好會顯示這樣：

透過 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](https://hub.docker.com/search?q=&type=image) 上找適合你程式碼環境的 base image，然後再慢慢添加其他 image 成你想要的樣子。


例如我這個專案需要使用到 Node.js，所以我會需要一個有 Node.js 環境的 image，可以有兩個選擇：
* 直接使用 [node](https://hub.docker.com/_/node/) 做為你的 base image。
* 先使用 [ubuntu](https://hub.docker.com/_/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`