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