簡(jiǎn)介

今年夏天又開始新的創(chuàng)業(yè)項(xiàng)目，忙得沒日沒夜，好久沒寫博客了。
但是也許 Docker 越來越火，知乎的專欄每天都有新的人關(guān)注，不抽空寫點(diǎn)太對(duì)不起大家。
之前寫過 API 鏡像，今天來說說前端鏡像。
本文適用于任何一個(gè)需要編譯的前端框架，我們利用 Docker 的兩段構(gòu)建，用一個(gè) Dockerfile 一氣呵成的產(chǎn)出不含源碼的生產(chǎn)鏡像。
鏡像內(nèi)用了 Caddy 當(dāng)作服務(wù)器，又經(jīng)過了半年的發(fā)展，雖然版本還沒到1，但 Caddy 已經(jīng)足夠強(qiáng)大和健壯了。

Caddyfile

為了能讓項(xiàng)目在 Caddy 鏡像中被訪問，我們?cè)陧?xiàng)目根目錄建一個(gè)叫 Caddyfile 的文件，供后續(xù)鏡像內(nèi)啟動(dòng)服務(wù)時(shí)使用。

0.0.0.0:80
root /www
gzip
log stdout
errors stdout

解釋一下，我們未來會(huì)把編譯好的項(xiàng)目放在容器的 /www 目錄。
服務(wù)器在容器的80端口。啟用gzip，并且將日志輸出在stdout--這是 Docker 的推薦做法。

Dockerfile

然后就開始我們的二段構(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)該指定域名，以此來使用 Caddy 的自動(dòng) HTTPS 特性。
做了如此修改后將鏡像啟動(dòng)時(shí)綁定80和443端口就好。

但是大部分時(shí)候，我們只是讓鏡像的80端口映射在主機(jī)的某個(gè)端口，主機(jī)上還有一層 Web 服務(wù)器。就不再羅嗦這里應(yīng)該怎么配置了。