1/19

第九章：多容器应用：与 Docker 结合

经过上一章后，我们项目目前文件结构如下：

代码项目结构

client 是 React 项目，server 是 Express 服务器，worker 是计算斐波那契数列的程序。

 

课程先从 client 开始，在 client 目录中创建 Dockerfile.dev：

FROM node:14-alpine
​
WORKDIR '/app'
​
# 不要忘了创建 .npmrc 来节省安装依赖时间
COPY ./.npmrc .
COPY ./package.json .
RUN npm install
COPY . .
​
CMD ["npm", "run", "start"]

server 与 worker 都是 NodeJS 项目，所以创建的 Dockerfile.dev 一样：

# 这里用Node12版本
# 原因是连接 postgres 数据库的 pg@7.4.3（视频中的版本）不支持Node14
# 否则会有BUG
FROM node:12-alpine
​
WORKDIR '/app'
​
COPY ./.npmrc .
COPY ./package.json .
RUN npm install
COPY . .
​
# 与 client 唯一的不同
CMD ["npm", "run", "dev"]

然后在整个项目根目录增加 docker-compose.yaml：

version: '3'
services:
  # postgres数据库
  postgres:
    image: 'postgres:10.5'
  # redis数据库
  redis:
    image: 'redis:4-alpine'
  # Express 服务器
  api:
    build:
      dockerfile: Dockerfile.dev
      context: ./server
    volumes:
      - /app/node_modules
      - ./server:/app
    # 通过 environment 设置容器的**运行时**环境变量
    environment:
      - REDIS_HOST=redis
      - REDIS_PORT=6379
      - PGUSER=postgres
      - PGHOST=postgres
      - PGDATABASE=postgres
      - PGPASSWORD=postgres_password
      - PGPORT=5432
  # React
  client:
    build:
      dockerfile: Dockerfile.dev
      context: ./client
    volumes:
      - /app/node_modules
      - ./client:/app
  # 计算斐波那契数列程序
  worker:
    build:
      dockerfile: Dockerfile.dev
      context: ./worker
    volumes:
      - /app/node_modules
      - ./worker:/app
    environment:
      - REDIS_HOST=redis
      - REDIS_PORT=6379

相比之前的配置，这里新增了 environment，可以配置容器运行时的环境变量。

• Nginx

根据一开始的架构设计，最终暴露出来的服务是 Nginx，请求经过 Nginx 处理后，转发至 React 侧或 Express 侧。

根目录新增 nginx 文件夹来存放 Nginx 项目配置，并在目录内增加两个文件：

default.conf

upstream client {
    server client:3000;
}
​
upstream api {
    server api:5000;
}
​
server {
    listen 80;
​
    location / {
        proxy_pass http://client;
    }
​
        location /sockjs-node {
        proxy_pass http://client;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
​
    location /api {
        rewrite /api/(.*) /$1 break;
        proxy_pass http://api;
    }
}

Dockerfile.dev

FROM nginx:1.15.2-alpine
​
COPY ./default.conf /etc/nginx/conf.d/default.conf

同时在根目录的 docker-compose.yaml 中新增 Nginx 的配置，完整配置如下：

version: '3'
services:
  # postgres数据库
  postgres:
    image: 'postgres:10.5'
  # redis数据库
  redis:
    image: 'redis:4-alpine'
  # nginx
  ngxin:
    restart: always
    build:
      dockerfile: Dockerfile.dev
      context: ./nginx
    ports:
      - '3030:80'
  # Express 服务器
  api:
    build:
      dockerfile: Dockerfile.dev
      context: ./server
    volumes:
      - /app/node_modules
      - ./server:/app
    # 通过 environment 设置容器的**运行时**环境变量
    environment:
      - REDIS_HOST=redis
      - REDIS_PORT=6379
      - PGUSER=postgres
      - PGHOST=postgres
      - PGDATABASE=postgres
      - PGPASSWORD=postgres_password
      - PGPORT=5432
  # React
  client:
    build:
      dockerfile: Dockerfile.dev
      context: ./client
    volumes:
      - /app/node_modules
      - ./client:/app
  # 计算斐波那契数列程序
  worker:
    build:
      dockerfile: Dockerfile.dev
      context: ./worker
    volumes:
      - /app/node_modules
      - ./worker:/app
    environment:
      - REDIS_HOST=redis
      - REDIS_PORT=6379

命令行输入 docker-compose up —build 来启动项目，在浏览器输入 http://localhost:3030/ 访问特面，跳出：

启动项目成功