大綱
ㄧ、先初始化一個簡易的 Node.js 專案
二、撰寫 Dockefile，了解優化前體積有多大
三、使用 Node.js 的 Alpine 版本
四、正式環境下，不需要安裝 devDependencies 的套件
五、如果我們只使用最基礎的 Alpine，然後 Node.js 自己安裝呢？
六、採用多階段構建，取用上個階段產生的結果
七、使用 Distroless 讓正式環境更加安全

ㄧ、先初始化一個簡易的 Node.js 專案

# 建立資料夾
mkdir docker-test
cd docker-test

# 初始化應用
npm init

# 安裝 express
npm install express --save

初始化後的 package.json 大概會長這樣（scripts 的 start 筆者有微調）：

{
  "name": "docker-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.1"
  }
}

接著我們新增一個「index.js」的檔案，並貼上如下程式：

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

為了實測不同情境打包的影響，我們安裝一個儲存在「devDependencies」的套件：

npm install eslint -save-dev

二、撰寫 Dockefile，了解優化前體積有多大

這邊我們就先用最簡易的方式寫 Dockerfile：

FROM node
# 運行的資料夾
WORKDIR /usr/src/app
# 移動所需檔案
COPY package.json index.js ./
# 安裝套件
RUN npm install
# 提供服務的接口
EXPOSE 3000
CMD ["npm", "start"]

接下來輸入 docker build -t docker-test . 就可以建立 Docker Image（docker-test 是名稱）。

然後輸入 docker images ，確認剛剛建立的 Docker Image 是否存在；從下圖我們可以看到優化前的 Image 大小高達 1.01GB。

三、使用 Node.js 的 Alpine 版本

Node.js Alpine 版本的 Image 體積會遠小於完整的 Node.js Image，現在我們修改一下 Dockerfile：

# 使用 Alpine 版本 
FROM node:alpine
WORKDIR /usr/src/app
COPY package.json index.js ./
RUN npm install
EXPOSE 3000
CMD ["npm", "start"]

輸入 docker build -t docker-test-alpine . 來建立 Image，完成後輸入 docker images 看看 build 出來的 Image 體積是否改變。

從上圖我們可以看到，Alpine 的版本讓它的體積從 1.01GB 下降到了 189MB，整整少了 812MB！

四、正式環境下，不需要安裝 devDependencies 的套件

通常一個專案會安裝一些 devDependencies 的套件，但這些套件只需要在開發環境中輔助使用，在正式環境下並沒有安裝的必要。

我們調整一下 Dockerfile 安裝套件的指令：

FROM node:alpine

WORKDIR /usr/src/app

COPY package.json index.js ./

# 只安裝 dependencies 的套件
RUN npm install --production

EXPOSE 3000

CMD ["npm", "start"]

在上圖我們可以看到體積又變小了，果然還有優化的空間（少了 12MB）。

五、如果我們只使用最基礎的 Alpine，然後 Node.js 自己安裝呢？

剛剛我們使用的是 Node.js 的 Alpine 版本，如果更極端一點，只使用最基礎的 Alpine，然後自己額外安裝 Node.js 會有什麼樣的結果呢？

# 使用最基礎的 Alpine
FROM alpine:latest

# 自己安裝 Node.js & npm
RUN apk add --no-cache --update nodejs npm

WORKDIR /usr/src/app

COPY package.json index.js ./

RUN npm install --production

EXPOSE 3000

CMD ["npm", "start"]

沒想到這個操作把整包 Image 的體積壓的更低了（從 177MB 降到 64.7MB）。

六、採用多階段構建，取用上個階段產生的結果

Docker Image 你可以先想想成疊疊樂，在這之中多執行一次「RUN」就會多疊一層；而在 Docker 的世界中可以允許有多個「FROM」，但只會取用最後一個「FROM」所建立的 Image。

在了解上面的概念後，我們就可以把「安裝」的步驟放在第一個「FROM」裡面執行，然後第二個 FROM 就只是單純地把第一層安裝好的結果搬過去即可，用 Dockerfile 實現會長這樣：

FROM alpine:latest AS builder
RUN apk add --no-cache --update nodejs npm
WORKDIR /usr/src/app
COPY package.json index.js ./
# 先完成安裝
RUN npm install --production
FROM alpine:latest
RUN apk add --no-cache --update nodejs npm
WORKDIR /usr/src/app
# 把安裝好的全部移過去
COPY --from=builder /usr/src/app .
EXPOSE 3000
CMD ["npm", "start"]

經過這麼多的努力後，我們的 Docker Image 也順利從 1.01GB 下降到 58.9MB，減少了超過 94% 的體積，並且可以明顯感受到 build Image 的速度上升不少。

七、使用 Distroless 讓正式環境更加安全

儘管上面我們已經使用 Alpine 讓 Docker Image 變得這麼小，但在文章的最後我想再提供讀者另一個選擇， 那就是「Distroless」！

先讓我們用它來 Build 一個 Docker Image。

FROM node AS builder
WORKDIR /usr/src/app
COPY package.json index.js ./
RUN npm install --production
# 改成用 Distroless
FROM gcr.io/distroless/nodejs
WORKDIR /usr/src/app
COPY --from=builder /usr/src/app .
EXPOSE 3000
CMD ["index.js"]

如果單純從結果來看，它在體積上(162MB)並沒有什麼優勢，但如果你嘗試用 Shell 打開它，會發現 Shell 根本不存在！換而言之，它的安全性相對更高，可以考慮使用它來做正式環境的部署。

以上就是筆者優化 Docker Image 體積的步驟啦！如果文中有表達不清晰、錯誤的部分再煩請告知，感謝您的閱讀。

參考資源：Node.js docker 鏡像體積優化實踐、三個技巧，將Docker鏡像體積減小90%

一、事先準備
 ➤ 創建 Nuxt.js 專案
 ➤ 下載 & 安裝 Docker
二、在 local 把 Nuxt.js 專案 Build 成 Docker Image
 ➤ 撰寫 dockerfile & .dockerignore
 ➤ 把 Nuxt.js 專案 build 成 Docker Image
三、將 Docker Image 發佈到 dockerhub 上面

一、事先準備

創建 Nuxt.js 專案

如果你已經有 Nuxt.js 的專案可以跳過下面的操作流程

STEP 1：創建一個 Nuxt.js 專案

$ yarn create nuxt-app nuxtjs-tutorial

在創建過程中會問你一些問題，你可以參考筆者的選擇：

STEP 2：讓 Nuxt.js 專案跑起來

$ cd nuxtjs-tutorial 
$ yarn dev

下載 & 安裝 Docker

STEP 1：下載 Docker

前往官網下載 Docker 安裝檔

安裝過程就是狂按下一步，就不在多做介紹，下載後要把 App 打開依照步驟執行才算是完成安裝喔！

STEP 2：註冊 Docker

在官網註冊 docker 帳號

STEP 3：在 local 端登入 docker

$ docker login

輸入剛剛註冊的帳號密碼

二、在 local 把 Nuxt.js 專案 Build 成 docker image

撰寫 dockerfile & .dockerignore

STEP 1：先用指令建立這兩個檔案

$ touch dockerfile
$ touch .dockerignore

STEP 2：撰寫 dockerfile

# node 運行環境
FROM node:12.19.0

# 存放image的目錄
RUN mkdir -p /app
COPY . /app
WORKDIR /app

# 如果需要相關的環境變數請自行調整路徑
#COPY ./env/.prod-env /app/env/.prod-env

# 對外的port
ENV HOST 0.0.0.0 
EXPOSE 3000

# 安裝套件並build專案
RUN yarn
RUN yarn build

# 執行專案
CMD [ "yarn", "start" ]

原始碼：dockerfile（GitHub Gist）

STEP 2：撰寫 .dockerignore

npm-debug.log
node_modules

原始碼：.dockerignore（GitHub Gist）

把 Nuxt.js 專案 build 成 Docker Image

STEP 1：Build Docker Image

在專案目錄下輸入指令後耐心等待打包，docker_example 是這個 image 的名字

docker build -t docker_example .

STEP 2：Run Docker Image

輸入指令確認 image 是否成功

docker run -it — rm -p 80:3000 docker_example

特別注意『80 是對外 port，3000 是 container 的 port』，docker_example 就是剛剛建立的 image 名稱

上圖 172.xx.xx.x:3000 的網址點開來是沒有畫面的，因為我們已經透過指令改變對外 port 到 80 了，在網址列上輸入 http://localhost/ 就能成功看到供果嚕～

三、將 Docker Image 發佈到 dockerhub 上面

STEP 1：給剛剛建立的 Image 一個 tag，username 是你 Doacker 的帳戶，xxximage是你希望這個 Image 在 dockerhub 上呈現的名字

docker tag docker_example username/xxximage

STEP 2：列出目前存在的 Images

docker images

STEP 3：把這個 Image 丟到 dockerhub 的 repositories

這個 push 的過程會根據你產生 Image 的大小決定，通常要等一段時間

docker push username/xxximage

STEP 4：在自己的 Docker 帳戶上看到剛剛上傳的 Docker Image

之後要部署這個 Docker Image 到其他 Server 就只需要輸入下面指令就能獲得嚕～

docker pull username/xxximage

希望這篇文章有幫助到使用 Mac 開發 Nuxt.js 專案的朋友們～