作者 | 前端勸退師

責編 | 鄭麗媛

來源 | 前端勸退師（ID：quantuishi）

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

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

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

樸素的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

為應用構建Docker鏡像

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

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

docker build -t react-docker .

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

Successfully built 137c69857dd0Successfully tagged react-docker:latest

您的鏡像已經嗷嗷待發。

運行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之旅就結束了。接下來的將是更標準化的流程，勸退勸退！

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

有了該文件，就不需要分步執行了，直接：

docker-compose up -d --build

就能看到一樣構建了：

生產環境下的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 builder
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATHCOPY package.json ./COPY package-lock.json ./
# 前端項目構建命令 — npm ci 或 npm install# http://www.gaoxiukun.com/wp/archives/509
RUN npm ci# React 應用需要react-scriptRUN npm install react-scripts@3.4.1 -g
COPY . ./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 build -f Dockerfile.prod -t sample: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，然後再去學習k8s相關。

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