Docker - 部署 Ant Design Pro 的項目

解讀 Ant Design Pro 的 Docker 配置

package.json 的 scripts

-f: 使用什麼配置文件
-t: 標籤
up: 啓動服務（的容器）
build: 構建或從新構建服務（的容器）

"docker:dev": "docker-compose -f ./docker/docker-compose.dev.yml up",
"docker:build": "docker-compose -f ./docker/docker-compose.dev.yml build",
"docker-prod:dev": "docker-compose -f ./docker/docker-compose.yml up",
"docker-prod:build": "docker-compose -f ./docker/docker-compose.yml build",
"docker-hub:build": "docker build  -f Dockerfile.hub -t  ant-design-pro ./",
"docker:tag": "docker tag ant-design-pro chenshuai2144/ant-design-pro",
"docker:push": "npm run docker-hub:build && npm run docker:tag && docker push chenshuai2144/ant-design-pro"

docker-compose 配置

volumes：包含多個 volume，每一個 volume 有 3 個用冒號分割的域：名稱（或相對該配置文件的路徑）: 容器中的路徑: 是否只讀

build：指定構建容器的上下文（根路徑）和使用的配置文件（不指定默認爲 Dockerfile）

• docker-compose.dev.yml

version: "3.5"

services:
  ant-design-pro_build:
    build: ../
    container_name: "ant-design-pro_build"
    volumes:
      - dist:/usr/src/app/dist

  ant-design-pro_web:
    image: nginx
    ports:
      - 80:80
    container_name: "ant-design-pro_web"
    restart: unless-stopped
    volumes:
      - dist:/usr/share/nginx/html:ro
      - ./nginx.conf:/etc/nginx/conf.d/default.conf

volumes:
  dist:

• docker-compose.yml

version: "3.5"

services:
  ant-design-pro_dev:
    ports:
      - 8000:8000
    build:
      context: ../
      dockerfile: Dockerfile.dev
    container_name: "ant-design-pro_dev"
    volumes:
      - ../src:/usr/src/app/src
      - ../config:/usr/src/app/config
      - ../mock:/usr/src/app/mock

.dockerignore 配置

在配置 Dockerfile 的ADD和COPY是會根據這個配置進行忽略，如node_modules跟項目環境有關，不該該直接將當前的node_modules文件夾直接複製到 Docker 鏡像中，應該配置忽略node_modules使用RUN yarn或者RUN npm install安裝到 Docker 鏡像中

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
**/node_modules
/src/utils/request-temp.js

# production
/.vscode

# misc
.DS_Store
npm-debug.log*
yarn-error.log

/coverage
.idea
yarn.lock
package-lock.json
*bak
.vscode

# visual studio code
.history
*.log

functions/mock
.temp/**

# umi
.umi
.umi-production

# screenshot
screenshot
.firebase

Dockerfile 配置

• Dockerfile

FROM circleci/node:latest-browsers

WORKDIR /usr/src/app/
USER root
COPY package.json ./
RUN yarn

COPY ./ ./

RUN npm run test:all

CMD ["npm", "run", "build"]

• Dockerfile.dev

FROM node:latest

WORKDIR /usr/src/app/

COPY package.json ./
RUN npm install --silent --no-cache

COPY ./ ./


CMD ["npm", "run", "start"]

• Dockerfile.hub

FROM nginx

WORKDIR /usr/src/app/

COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf

COPY ./dist  /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

部署本身的 Docker 項目