前言

以前一直有疑問困擾著我：人人都在吹的Docker容器化，與前端有何關係？

然而在近兩年的程式設計生涯，在每一次產品迭代中，漸漸體會到了容器化其魅力所在。

應用部署從刀耕火種，到DevOps崛起，原來不止前端在迅捷發展。接下來，我將用一首歌的時間，帶大家真實的體驗一番Docker容器化。

1. 樸素的Dockerfile

首先準備一個有標準執行指令的Web應用，用腳手架creat-react-app或Vue CLI等生成的即可。

以下的Dockerfile不參雜其它依賴，爭取做到都能看懂：

# 指定Node版本FROM node:12.18.3# 容器中應用程式的路徑。將Web目錄作為工作目錄WORKDIR /web# 將package.json 複製到 Docker 環境COPY ./package.json /web/package.json# 安裝依賴RUN yarn# 將程式碼複製到Docker容器中的Web目錄COPY . /web/# 暴露容器內部訪問埠，根據專案變動EXPOSE 8080## 如果是Vue CLi，則換成 yarn serveCMD ["npm", "start"]

是的，開發環境在Docker 部署，關鍵配置就那麼幾行。

此外，還需要新增一個.dockerignore檔案，加快構建過程的速度

node_modules/**/*build/**/*.DS_Store

2. 為應用構建Docker映象

首先確認你的Dcoker 正在執行。

執行以下命令來構建Docker映像。react-docker 可以替換為你要為映象命名的任何值。

docker build -t react-docker .

其中-t 為打標籤的意思，執行完後將會看到：

Successfully built 137c69857dd0Successfully tagged react-docker:latest

您的映象已經嗷嗷待發。

3. 執行Docker + React/Vue

現在，使用以下docker run命令, 通過Docker在埠3000上執行React應用。

docker run -p 3000:3000 react-docker

其中：前一個 3000 對應本機http://localhost:3000/，第二個 3000 則是Docker容器埠。

可以通過Dcoker ps檢視容器資訊

在Docker的Dashboard中也可以看到：

此時開啟http://localhost:3000/就會看到熟悉又親切的畫面

到這裡，你的一首歌的時間之Docker之旅就結束了。接下來的將是更標準化的流程，勸退勸退！

4. Docker Compose 標準化流程

將docker-compose.yml檔案新增到專案根目錄：

version: '3.7'services: sample: container_name: sample build: context: . dockerfile: Dockerfile volumes: - '.:/app' - '/app/node_modules' ports: - 3000:3000 environment: - CHOKIDAR_USEPOLLING=true

有了該檔案，就不需要分步執行了，直接：

就能看到一樣構建了：

5. 生產環境下的Dockerfile

生產環境下需要nginx配置，在根目錄先建立nginx.config

server { listen ${PORT:-80}; server_name _; root /usr/share/nginx/html; index index.html; location / { try_files $$uri /index.html; }}

讓我們建立一個單獨的Dockerfile，用於生產環境，稱為Dockerfile.prod：

FROM node:12.18.3 AS builderWORKDIR /appENV PATH /app/node_modules/.bin:$PATHCOPY package.json ./COPY package-lock.json ./# 前端專案構建命令 — npm ci 或 npm install# http://www.gaoxiukun.com/wp/archives/509RUN npm ci# React 應用需要react-scriptRUN npm install react-scripts@3.4.1 -gCOPY . ./RUN npm run build# 安裝nginxFROM nginx:1.17-alpineRUN apk --no-cache add curlRUN curl -L https://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`uname -s`-`uname -m` -o envsubst && \\ chmod +x envsubst && \\ mv envsubst /usr/local/binCOPY ./nginx.config /etc/nginx/nginx.templateCMD ["/bin/sh", "-c", "envsubst < /etc/nginx/nginx.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]COPY --from=builder /app/build /usr/share/nginx/html

因為Dockerfile.prod不是預設的執行檔案，所以需要構建並標記：

接下來執行docker run

docker run -it --rm -p 3000:80 sample:prod

-i: 以互動模式執行容器。-t: 為容器重新分配一個偽輸入終端，通常與 -i 同時使用。--rm:在容器退出時自動清理容器內部的檔案系統，不懂可忽略-p: 指定埠。

成功執行：

在瀏覽器中導航到http://localhost:3000 以檢視該應用程式。

接下來使用新的Docker Compose檔案以及docker-compose.prod.yml進行測試：

version: '3.7'services: sample-prod: container_name: sample-prod build: context: . dockerfile: Dockerfile.prod ports: - '3000:80'

啟動容器：

docker-compose -f docker-compose.prod.yml up -d --build

在瀏覽器中再次進行校驗。

❤️ 結語

在以往，我對Docker容器化的概念，僅停留在了解。而真正實操中，也是被一群指令，配置給嚇到勸退。

Docker 在接下來的幾年裡，會逐漸成為開發的標配，希望大家能放下對運維領域的偏見，多多學習這些行業內的新標準與概念。