동기

React/Redux의 개발 환경을 Docker로 작성했을 때의 비망록.

환경

macOS Catalina 10.15.5
도커 버전 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"

품목
의미


버전
docker-compose 버전

서비스
구축 서비스

build
Dockerfile 디렉토리 및 파일 지정

tty
컨테이너를 계속 시작할지 결정

환경
환경 변수 설정

volumes
로컬 디렉토리가 연결 (마운트)되는 작업 디렉토리 지정

command
컨테이너 없이 실행하는 명령

포트
외부에 게시하는 포트

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에서 대상 리포지토리를 선택 → Builds → Link to GitHub


연동할 리포지토리 선택


Repository를 선택하면 아래의 선택 화면이 열립니다. AUTEST를 Off로 하면 자동 빌드되지 않으므로, 그 이외를 선택. REPOSITORY LINKS를 ​​좋아합니다. BUILD RULES는 자동 빌드의 상세 설정. 기본적으로 좋으면 이것으로.
작성 당초는 Save and Build가 좋다.


이것으로 GitHub에 push되면 DockerHub는 자동 빌드가 된다.