怎樣用Docker部署前端應用

現在微服務盛行，docker作為容器化工具派上了很大的用場，用docker部署應用已經成為大多數devops的首選項。當然docker的用處也不僅僅限於部署，在dev的開發過程中，也能成為很好的工具。例如在開發過程中我們需要用到數據庫，並不需要在開發主機上手動安裝數據庫，你只需要拉取相應的鏡像就能使用，省去了繁瑣的配置。但本文並不打算介紹這方面的東西。以前在項目上，手動部署過前端，但是並沒有使用docker，我們就討論一下怎么用docker來部署前端應用。

傳統前端的部署方式

無論你使用Angular，還是React來開發你的前端應用，最終到部署的時候都需要你打包生成一系列的靜態文件，然后將這些文件放到部署機的靜態文件夾中。當然還需要你在將nginx配置導向你的靜態目錄中，才能保證訪問部署機能訪問到相應的文件。

build

首先我們需要使用node鏡像來當作基礎鏡像，然后將源碼拷貝到鏡像中，然后使用build命令打包。

FROM node:latest as builder
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

注意在以上的代碼里面執行了兩次copy，第一次只是拷貝了package.json文件，第二次拷貝了全部的文件。當你的應用需要持續化部署的時候，會很有意義。

比如你的每次提交，都能通過CD部署到dev環境，這時候你可能就需要考慮，是不是我每次提交都需要重新安裝依賴。可能在你沒有更改package.json文件的時候，你並不希望它執行很耗時的npm install，而且在我們的開發中更改package.json文件的頻率並不高。

docker的cache機制，能幫你避免不必要的依賴安裝的耗時。當你在你的部署機上第一次構建這個鏡像的之后，鏡像保存在你的本地，第二次構建的時候，他會根據你COPY指令中對應的內容是否與上一次構建的內容一致來決定是否要啟用上一次執行的cache，如果檢查到 COPY package.json .這一層中，package.json文件和上次沒有任何改變，那么接下來的 RUN npm install這一層就會使用上一次執行的cache。

所有的指令執行完，就完成了在鏡像中打包，所有的靜態文件都會在 /app/build目錄下。

 

部署

當build的步驟執行完，剩下的就是部署了，與傳統部署一樣我們依舊需要將靜態文件通過nginx來部署。

如果我們使用部署機上的nginx，那需要我們將build鏡像中的打包好的文件拷貝到部署機的nginx靜態目錄中，還需要配置nginx的配置文件，然后再將nginx啟動。然而我們並不需要這樣，我們依舊可以使用docker來完成這些事情。雖然執行的步驟相似，但是比手動操作方便很多。

我們在之前build之后，所有打包好的文件依舊在build鏡像中，但是現在我們需要使用nginx鏡像來部署，那么要做的第一件事就是將build鏡像中的靜態文件拷貝到新的nginx鏡像中。在dockfile中指定以下的指令就可以完成這件事。

COPY --from=builder /app/build /usr/share/nginx/html

--from=builder的參數表明，copy動作是要從該指令之前build完成的stage中拷貝，等號右邊的參數是我們之前的build鏡像中指定的名字。 /usr/share/nginx/html目錄是鏡像中nginx使用的靜態目錄。這樣就完成了拷貝。

接下來就是需要配置nginx了，這些配置同樣可以放在我們的代碼庫中，然后拷貝到nginx鏡像中替換掉其默認的配置。

 

 server {
        listen       80;
        server_name  localhost;

        location /metadata {
            proxy_pass  http://backend:80;
        }

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

示例中僅僅給出了http部分一個server簡單的配置，其余部分的用默認就好。我們在這里不涉及關於如何配置host讓你的ningx鏡像通過host名字找到你的后端，我們假設這些配置已經完成，然后簡單的配置了代理，將關於/metadata的請求轉發到你的后端機器上。接下來就是將你的配置文件拷貝到nginx鏡像中了。

COPY nginx.conf /etc/nginx

到這里，所有關於dockerfile的配置都完成了，下面是配置完的完整的dockerfile

FROM node:latest as builder
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM nginx:latest
COPY nginx.conf /etc/nginx
COPY --from=builder /app/build /usr/share/nginx/html

接下來就是運行了，先build鏡像

docker build -t frontend .

在build之后就可以將其運行起來了

docker run --name frontend -p 80:80 frontend:latest

總結

docker部署前端，讓我們省去了繁瑣的手動操作，這在日常開發的過程中極為總要，我們可以在代碼庫中就計划好如何部署應用，將部署的操作都命令話，集中成一個腳本就可以幫你完成繁瑣的事情，讓持續化部署更加簡單。docker的配置非常簡單，但是在簡單之余我們也應該考慮性能，使用多大的鏡像，每個stage執行的先后順序等，這些可能都會影響到部署耗時。然而這些都是需要對docker深入的了解，以及長期的實踐經驗積累才能做到。

 

原文地址：https://www.jianshu.com/p/08e6f00bb689