#動機
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は自動ビルドになる。