踩坑了許多、在查閱眾多文件後；以下為目前最終作法(非最佳)、希望之後可以再讓其更好。
- 在項目的根目錄下新增 Dockerfile 。
- 原本寫法會使 image 暴增成近 1G 的檔案；經修改為以下的設定後目前僅有 27MB 左右。
# node 版本號(依開發時所使用的環境選擇為 18 、並加上 alpine 為穩定版)
FROM node:18-alpine as builder
# 建立工作目錄(小寫)
WORKDIR /webbyerp
# 添加所有檔案到工作目錄中
ADD . /webbyerp
# RUN npm install && npm run build && npm install -g http-server(用 ci 替代 npm install)
RUN npm ci && npm run build
# PORT(這裡只是給發布的人知道自己原本的 PORT 接口)
EXPOSE 3000
# CMD http-server ./build -p 3000容器啟動後、執行http-server(用 nginx 取代)
FROM nginx:alpine
COPY --from=builder /webbyerp/build /usr/share/nginx/html
- 建立完成後就來產出 image 檔(先上全圖)。
- testimage 可替換成自己要的名字。特別注意此指令後面有一個「 . 」、沒加上會出錯。
docker build -t testimage .
- 「 -d -p 」或「 -dp 」是為了在後台運行新容器。另外在主機創立 3000 到 容器 3000 的端口映射。後來因為修改成使用 nginx 而非 http-server 、所以我直接改為 80:80 ；當然可以也可以 3000:80 避開主機的 port 80 。
docker run -dp 3000:3000 testimage
結論：
1. 使用 alpine 減少容量。
2. 鎖定 node 版本號：ex: node:18-alpine。
3. npm ci 取代 npm Install 、避免版本問題及提高依賴安裝速度。
4. package.json 單獨添加、充分利用鏡像緩存。
5. 只提取自己撰寫的文作、減小容量。