想要成為前端Star 嗎？一首歌時間將React/Vue 應用Docker 化

前端勸退師發表於2020-09-02
前端ReactVueDocker

前言

以前一直有疑問困擾著我：人人都在吹的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 serve
CMD ["npm", "start"]

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

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

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

2. 為應用構建Docker映象

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

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

docker build -t react-docker .

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

Successfully built 137c69857dd0
Successfully tagged react-docker:latest

您的映象已經嗷嗷待發。

3. 執行Docker + React/Vue App

現在，使用以下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

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

docker-compose up -d --build

就能看到一樣構建了：

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 builder

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./

# 前端專案構建命令 — npm ci 或 npm install 
# http://www.gaoxiukun.com/wp/archives/509

RUN npm ci
# React 應用需要react-script
RUN npm install react-scripts@3.4.1 -g

COPY . ./
RUN npm run build

# 安裝nginx
FROM nginx:1.17-alpine
RUN apk --no-cache add curl
RUN 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/bin
COPY ./nginx.config /etc/nginx/nginx.template
CMD ["/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 在接下來的幾年裡，會逐漸成為開發的標配，希望大家能放下對運維領域的偏見，多多學習這些行業內的新標準與概念。

如果你覺得這篇內容對你挺有啟發，我想邀請你幫我三個小忙：

  1. 點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
  2. 關注公眾號「前端勸退師」，不定期分享原創知識。
  3. 也看看其它文章

也可以來我的GitHub部落格裡拿所有文章的原始檔：

前端勸退指南：https://github.com/roger-hiro...
一起玩耍呀。~

相關文章