簡(jiǎn)介
今年夏天又開(kāi)始新的創(chuàng)業(yè)項(xiàng)目，忙得沒(méi)日沒(méi)夜，好久沒(méi)寫(xiě)博客了。
但是也許 Docker 越來(lái)越火，知乎的專欄每天都有新的人關(guān)注，不抽空寫(xiě)點(diǎn)太對(duì)不起大家。
之前寫(xiě)過(guò) API 鏡像，今天來(lái)說(shuō)說(shuō)前端鏡像。
本文適用于任何一個(gè)需要編譯的前端框架，我們利用 Docker 的兩段構(gòu)建，用一個(gè) Dockerfile 一氣呵成的產(chǎn)出不含源碼的生產(chǎn)鏡像。
鏡像內(nèi)用了 Caddy 當(dāng)作服務(wù)器，又經(jīng)過(guò)了半年的發(fā)展，雖然版本還沒(méi)到1，但 Caddy 已經(jīng)足夠強(qiáng)大和健壯了。
Caddyfile
為了能讓項(xiàng)目在 Caddy 鏡像中被訪問(wèn)，我們?cè)陧?xiàng)目根目錄建一個(gè)叫 Caddyfile 的文件，供后續(xù)鏡像內(nèi)啟動(dòng)服務(wù)時(shí)使用。
0.0.0.0:80
root /www
gzip
log stdout
errors stdout
解釋一下，我們未來(lái)會(huì)把編譯好的項(xiàng)目放在容器的 /www 目錄。
服務(wù)器在容器的80端口。啟用gzip，并且將日志輸出在stdout--這是 Docker 的推薦做法。
Dockerfile
然后就開(kāi)始我們的二段構(gòu)建了:
# build
FROM node:8 as builder
ADD . /src
WORKDIR /src
RUN npm i && npm run build
# product
FROM abiosoft/caddy
COPY --from=builder /src/dist /www
COPY Caddyfile /etc/Caddyfile
我們首先使用 node 的官方鏡像對(duì)項(xiàng)目進(jìn)行編譯，工作目錄為 /src ，編譯結(jié)果為 /src/dist 。
然后我們?cè)賹?dist 文件夾復(fù)制為 caddy 鏡像的 /www 目錄。
最后我們將我們的 Caddyfile 覆蓋鏡像原版的。
值得一提的是，我們使用的 abiosoft/caddy 這個(gè)鏡像并非官方版本，但是比較活躍，感興趣也可以去看源碼。
使用鏡像
如果一臺(tái)物理機(jī)只準(zhǔn)備使用這一個(gè)鏡像，那么我們之前的 Caddyfile 不應(yīng)該限定80端口，并且應(yīng)該指定域名，以此來(lái)使用 Caddy 的自動(dòng) HTTPS 特性。
做了如此修改后將鏡像啟動(dòng)時(shí)綁定80和443端口就好。
但是大部分時(shí)候，我們只是讓鏡像的80端口映射在主機(jī)的某個(gè)端口，主機(jī)上還有一層 Web 服務(wù)器。就不再羅嗦這里應(yīng)該怎么配置了。
