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