Reactの開発環境をDockerで作る。イメージの作成→コンテナ起動→DockerHubにpush
動機
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"
macOS Catalina 10.15.5
Docker version 19.03.13
docker-compose version 1.27.4
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: '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 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 up -d
バックグラウンドで起動。
コンテナの停止
docker-compose down
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名>:タグ名
docker-compose ps
docker rm <コンテナID>
docker rmi <イメージID>
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を選択すると下の選択画面が開く。AUTESTをOffにすると自動ビルドされないので、それ以外を選択。REPOSITORY LINKSはお好きに。BUILD RULESは自動ビルドの詳細設定。デフォルトでよければこれで。
作成当初はSave and Buildがいいっぽい。
これでGitHubにpushされると、DockerHubは自動ビルドになる。
Author And Source
この問題について(Reactの開発環境をDockerで作る。イメージの作成→コンテナ起動→DockerHubにpush), 我々は、より多くの情報をここで見つけました https://qiita.com/sakuryu/items/a454c71bff3787ef05f6著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .