case-kの備忘録

日々の備忘録です。データ分析とか基盤系に興味あります。

アプリをコンテナ化したのでローカルの開発環境をdocker-composeで整備した

Docker

アプリをコンテナ化したのでローカルの開発環境をdocker-composeで作りました。

構成

アプリの構成は次のようになっています。

  • React

　役割：フロントエンド(Express APIから取得データの描画)

  • Express

　役割：バックエンド(BigQueryからのデータ取得)

  • Nginx

　役割：プロキシサーバ(ReactとExpressのプロキシサーバとしてアクセスログなどを取得)

Dockerfileを作る

コンポーネントごとにDockerfileを作ります。
www.case-k.jp

  • Dockerfile-nginx
FROM nginx:latest

RUN apt-get update
RUN apt-get install -y wget
RUN wget https://github.com/progrium/entrykit/releases/download/v0.4.0/entrykit_0.4.0_linux_x86_64.tgz
RUN tar -xvzf entrykit_0.4.0_linux_x86_64.tgz
RUN rm entrykit_0.4.0_linux_x86_64.tgz
RUN mv entrykit /usr/local/bin/
RUN entrykit --symlink

RUN rm /etc/nginx/conf.d/*
COPY nginx-app/etc/nginx/nginx.conf.tmpl /etc/nginx/
COPY nginx-app/etc/nginx/conf.d/ /etc/nginx/conf.d/

ENTRYPOINT [ \
  "render", \
      "/etc/nginx/nginx.conf", \
      "--", \
  "render", \
      "/etc/nginx/conf.d/upstream.conf", \
      "--", \
  "render", \
      "/etc/nginx/conf.d/public.conf", \
      "--" \
]

CMD ["nginx", "-g", "daemon off;"]
  • Dockerfile-react
FROM node:latest

RUN yarn add redux \
    yarn add react-redux \
    yarn add axios \
    yarn add redux-thunk \
    yarn add loader \
    yarn add highcharts \
    yarn add highcharts-react-official \
    yarn add @material-ui/core \
    yarn add @google-cloud/bigquery

WORKDIR /app/react-backend/client

EXPOSE 3000

CMD yarn run start
  • Dockerfile-Express
FROM node:latest

RUN yarn global add express-generator \
    yarn add http-errors \
    yarn add cookie-parser \
    yarn add express \
    yarn add morgan

WORKDIR /app/react-backend

EXPOSE 3001

CMD yarn run start

マニフェストファイル作成ーdocker-compose

docker-composeのマニフェストファイルを次のように定義します。

version: '3'
services:
  nginx-react:
    build:
      context: .
      dockerfile: Dockerfile-nginx
    image: nginx-react   
    container_name: nginx-react
    ports:
      - 8888:80
    environment:
      WORKER_PROCESSES: 2
      WORKER_CONNECTIONS: 1024
      KEEPALIVE_TIMEOUT: 65
      GZIP: "on"
      BACKEND_HOST: react:3000
      BACKEND_MAX_FAILS: 3
      BACKEND_FAIL_TIMEOUT: 10s
      SERVER_PORT: 80
      SERVER_NAME: localhost
      LOG_STDOUT: "true"
  nginx-express:
    build:
      context: .
      dockerfile: Dockerfile-nginx
    image: nginx-express   
    container_name: nginx-express 
    ports:
      - 8889:80
    environment:
      WORKER_PROCESSES: 2
      WORKER_CONNECTIONS: 1024
      KEEPALIVE_TIMEOUT: 65
      GZIP: "on"
      BACKEND_HOST: express:3001
      BACKEND_MAX_FAILS: 3
      BACKEND_FAIL_TIMEOUT: 10s
      SERVER_PORT: 80
      SERVER_NAME: localhost
      LOG_STDOUT: "true"
  react:
    build:
      context: .
      dockerfile: Dockerfile-react
    image: react-app
    container_name: react-app
    volumes:
      - ./react-backend:/app/react-backend
    ports:
      - 9998:3000
  express:
    build:
      context: .
      dockerfile: Dockerfile-express
    image: express-app
    container_name: express-app
    volumes:
      - ./react-backend:/app/react-backend
    ports:
      - 9999:3001

ソース変更後のビルド

ローカルPCの開発環境として、ソースを変更した場合はコンテナを停止して、イメージからビルドし直す。

$ docker ps -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
5b2c23a312ea        nginx-react         "render /etc/nginx/n…"   33 seconds ago      Up 31 seconds       0.0.0.0:8888->80/tcp     nginx-react
fe4785513b57        react-app           "docker-entrypoint.s…"   33 seconds ago      Up 31 seconds       0.0.0.0:9998->3000/tcp   react-app
06a6ab5aa619        express-app         "docker-entrypoint.s…"   33 seconds ago      Up 31 seconds       0.0.0.0:9999->3001/tcp   express-app
cbbc888122fd        nginx-express       "render /etc/nginx/n…"   33 seconds ago      Up 31 seconds       0.0.0.0:8889->80/tcp     nginx-express

初回のイメージを再利用しないように、--buildをつけることでイメージの再利用を防げるため開発時に役立つ。また、コンテナは起動中だとキャッシュを再利用してしまうため一度差分があるコンテナは停止させた上でビルド・起動させる。

$ docker-compose down
$ docker-compose up -d --build

以上となります。次はGKE上にアプリをデプロイさせてみたいと思います。