動機

React/Reduxの開発環境をDockerで作成した際の備忘録。

環境

macOS Catalina 10.15.5
Docker version 19.03.13
docker-compose version 1.27.4

Dockerfile

From node:latest
WORKDIR /usr/src/app
RUN npm install -g create-react-app

docker-compose

docker-compose.yml

version: '3'
services:
 node:
  build:
   context: .
   dockerfile: Dockerfile
  tty: true
  environment:
   - NODE_ENV=production
  volumes:
   - ./:/usr/src/app
  command: sh -c "cd project_name && yarn start"
  ports:
   - "3000:3000"

項目	意味
version	docker-composeのversion
services	構築サービス
build	Dockerfileのディレクトリとファイルを指定
tty	コンテナを起動し続けるかを決定
environment	環境変数を設定
volumes	ローカルのディレクトリが接続(マウント）する作業ディレクトリを指定
command	コンテナないで実行するコマンド
ports	外部に対して公開するポート

NODE_ENV

動作環境を設定する
本番環境:production
開発環境:development

command

イメージのbuild

docker-compose build

アプリケーションの作成

docker-compose run --rm node sh -c "create-react-app project_name"

docker-compose runで先ほど作成したイメージを起動し、sample-projectでアプリケーションを作っていきます。runはコンテナを一度だけ起動する。

Redux、Expressライブラリのインストールします。

npm install redux --save
npm install react-redux --save
npm install express --save

インストール確認

npm list --depth=0

コンテナの起動

docker-compose up -d

バックグラウンドで起動。

コンテナの停止

docker-compose down

オプションに-vをつけると、Compose ファイルの volumes セクションの名前付きボリュームを削除する。

Command

動いているコンテナの確認

docker-compose ps

コンテナの削除

docker rm <コンテナID>

イメージの削除

docker rmi <イメージID>

Docker hubへpush

docker imageにタグづけする

docker tag <baseのimage名> <DockerhubID>/<image名>:タグ名

Dockerhubへのログイン

docker login

docker hubにpush

docker push <DockerhubID>/<image名>:タグ名

これでDockerhubのレポジトリに/が追加される。

自動ビルド設定

GitHubと連携する手順を示す。事前にGitHubにレポジトリを用意する必要がある。

Dockerhubから対象のrepositoryを選択 → 「Builds」 → 「Link to GitHub」

連携するRepositoryを選択

Repositoryを選択すると下の選択画面が開く。AUTESTをOffにすると自動ビルドされないので、それ以外を選択。REPOSITORY LINKSはお好きに。BUILD　RULESは自動ビルドの詳細設定。デフォルトでよければこれで。
作成当初はSave and Buildがいいっぽい。

これでGitHubにpushされると、DockerHubは自動ビルドになる。