Zenn
🍱

FEが最低限知っておきたいdocker-compose

2021/12/01に公開
Docker
docker-compose
tech

説明すること

  • Docker Compose環境で開発するFEが最低限持っておくと便利な知識
    • Dockerとは何か、なぜ使うのか
    • DockerとDocker Composeの違い
    • 最低限知っておきたいdocker-composeのコマンド
    • 知っておくと便利なDockerfileやdocker-composeの読み方

Docker概要

Dockerとは何か

  • ざっくり説明すると『PC上に仮想環境を展開する技術』
    • 展開された仮想環境をコンテナと呼ぶ

なぜDockerを使うのか

  • エンジニアごとの環境差分を減らすため・環境構築の手間を減らすため
    • 人によるnodeのバージョンやグローバルライブラリの有無などPC本体に依存する環境設定の差分がなくなる・構築が必要なくなる

Docker Compose概要

  • Dockerから発展し、いくつかのコンテナを同時に立ち上げ、繋ぐことができるようにしたのがDocker Compose
    • Dockerはコンテナ１つ、Docker Composeはコンテナ複数と覚えておけばOK
      • ただし、コンテナ1つでDocker Composeを利用することも可能

docker-compose環境で作業ときに覚えておきたいこと

  • 終わったら消すこと。結構圧迫するので、消すこと。
  • 仮想環境なので、仮想環境とリンクされているディレクトリ以外にファイルを置いても、コンテナ内に持ち込まれず、参照できない

Docker Desktopについて

  • Docker DesktopはGUIでなんとなくDockerを扱えるようにしてくれる便利なやつ。入れた方がいい。
  • GUI上からコンテナの中に入れるので、コンテナ内の出力を見たい時はこれを使う
  • GUI上から終了もできる。

これだけでなんとかなるDocker Composeコマンドリスト

# ビルド（最初にやっておく。doocker系ファイルが更新された時もやる）
docker-compose-build

# 起動（これ以降は、GUI上で扱うことができる）
docker-compose up -d

# 終了
docker-compose stop
  • ね、簡単でしょ！ 基本的にはビルドと起動と終了ができれば大丈夫です
    • いつもやってたnpm installやyarn installは起動に吸収されます

コマンドはscriptsに登録しておくと楽

sample
package.json
{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "docker:setup": "docker network create my_network",
    "docker:build": "docker-compose build",
    "docker:run": "docker-compose up -d",
    "docker:stop": "docker-compose stop",
    "docker:remove": "docker-compose rm -f"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {}
}

知っておくと便利なDockerfileとdocker-compose.ymlの読み方

  • 『困った時になんとなくアタリをつけられる』レベルを目指す

Dockerfileの読み方

  • コンテナ生成の時に実施するコマンドが記載されている
    • 環境構築用のShellScriptみたいな感じ
記載 説明
FROM ベースイメージ。Dockerのベースとなるもの。Node.jsとか書いてあれば、このサーバはNode.jsが入ってるんだなあくらいに思えばOK。ubuntuとかOS名の時もある
RUN このコマンドを実行。
CMD 起動コマンド。ない時は多分docker-composeに記載されている。

[おまけ]DockerfileにFROMが2回出てくるとき

  • マルチステージビルドを利用している
  • Vue.jsで例えると下記のような流れになっているため、コンテナを立ち上げた時には2ステージ目しか残っていない
    • 1ステージ目: Vueの環境を構築し、Vueのbuildが動くような環境
    • 2ステージ目: 1ステージ目からbuildした静的ファイルだけを受け継ぎ、静的ファイルをserveするだけの環境
  • 本番ビルド向け構成なので、この構成になっている場合はこのDockerfileは開発中の利用を想定してないと思って良い

docker-compose.ymlの読み方

  • コンテナとコンテナをつなぐ構成とかはここにかいてある
  • FEが必要そうな情報はportくらい？
  • 下のサンプルの場合はports: "3030:3030"で外の3030と中の3030がリンクしているので、localhost:3030につなげば仮想環境内のフロントに接続できるというしくみ。
サンプル
version: '3'
services:
  front:
    build:
      context: ./frontend
    tty: true
    ports:
      - "3030:3030"
    networks:
      - my_network
    command: sh -c "yarn install && yarn dev:mock"
  back:
    build:
      context: ./backend
    tty: true
    ports:
      - "4040:4040"
    networks:
      - my_network
    command: sh -c "python app.py"
networks:
  my_network:
    external: true
volumes:
  react-node-modules:
  mock-node-modules:

野望

  • dockerがgitくらいエンジニアなら当たり前に扱えるツールになったらいいなーと思います。レッツdocker。

Discussion