使用 Caddy 製做前端 Docker 鏡像

簡介

今年夏天又開始新的創業項目，忙得沒日沒夜，很久沒寫博客了。
可是也許 Docker 愈來愈火，知乎的專欄天天都有新的人關注，不抽空寫點太對不起你們。
以前寫過 API 鏡像，今天來講說前端鏡像。
本文適用於任何一個須要編譯的前端框架，咱們利用 Docker 的兩段構建，用一個 Dockerfile 一鼓作氣的產出不含源碼的生產鏡像。
鏡像內用了 Caddy 看成服務器，又通過了半年的發展，雖然版本還沒到1，但 Caddy 已經足夠強大和健壯了。

Caddyfile

爲了能讓項目在 Caddy 鏡像中被訪問，咱們在項目根目錄建一個叫 Caddyfile 的文件，供後續鏡像內啓動服務時使用。

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 服務器。就再也不羅嗦這裏應該怎麼配置了。