Docker 및 Docker-compose 설치

프로젝트를 시작하기 전에 Docker 및 Docker-compose를 설치하십시오.
here에서 설치할 수 있습니다.

React 앱 만들기

이제 create-react-app을 사용하여 간단한 React 애플리케이션을 만들어 보겠습니다.

npm install -g create-react-app
create-react-app react-docker-demo-app

앱을 Docker화할 수 있습니다.

Dockerfile 추가

프로젝트 디렉터리의 루트에 Dockerfile이라는 파일을 만듭니다.

FROM node:10-alpine as builder

# install and cache app dependencies
COPY package.json package-lock.json ./
RUN npm install --only=prod&& mkdir /react-frontend && mv ./node_modules ./react-frontend

WORKDIR /react-frontend

COPY . .

RUN npm run build

첫 번째 단계는 Node를 사용하여 앱을 빌드하는 것입니다. 여기서는 알파인 버전을 가장 가벼운 버전으로 사용하고 있습니다.
빌드는 청크 파일을 포함하는 빌드 디렉토리를 생성합니다.

.dockerignore 추가

.dockerignore 파일을 만들고 여기에 node_modules 디렉터리를 추가합니다.

node_modules

이렇게 하면 로컬 종속성이 Docker 데몬으로 전송되지 않으므로 이미지 빌드 프로세스의 속도가 빨라집니다.

이제 Docker 이미지를 빌드할 시간입니다.

docker build -t react-frontend .

그런 다음 방금 만든 이미지를 사용하여 컨테이너를 실행합니다.

docker run -p 3000:3000 react-frontend

브라우저에서 http://localhost:3000을 열면 반응 앱의 홈페이지가 보일 것입니다.

프로덕션 빌드

NGINX 서버 추가

NGINX는 해당 프록시에 요청하는 클라이언트와 다른 서버에서 요청하고 결과를 검색하는 프록시 사이에서 중개자처럼 리버스 프록시 역할을 합니다.

앱에 nginx를 서버로 추가하려면 프로젝트 루트 폴더에 nginx.conf를 생성해야 합니다.

nginx.conf

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

그런 다음 Dockerfile에 아래 줄을 추가하십시오.

FROM nginx:1.16.0-alpine
COPY --from=builder /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

여기에서는 이전 단계의 빌드를 복사하고 nginx 폴더에 붙여넣고 포트 80을 노출합니다. 이 포트는 컨테이너가 연결을 수신하는 포트가 됩니다.

이렇게 하면 생산 준비 이미지가 생성됩니다.

마지막으로 전체 Dockerfile은 다음과 같아야 합니다.

FROM node:10-alpine as builder

# install and cache app dependencies
COPY package.json package-lock.json ./
RUN npm install && mkdir /react-frontend && mv ./node_modules ./react-frontend

WORKDIR /react-frontend

COPY . .

RUN npm run build



# ------------------------------------------------------
# Production Build
# ------------------------------------------------------
FROM nginx:1.16.0-alpine
COPY --from=builder /react-frontend/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml

Docker Compose는 기본적으로 단일 서비스에서 여러 컨테이너를 실행하는 도구입니다. 컨테이너를 실행하기 위한 구성이 포함된 yaml 파일을 사용합니다.

version: '3.7'

services:

  react-frontend:
    container_name: react-frontend
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/app'
      - '/app/node_modules'
    ports:
      - '3000:3000'
    environment:
      - NODE_ENV=development

컨테이너를 시작하려면

docker-compose up

컨테이너를 중지하려면

docker-compose down

다음 단계

이를 통해 개발 및 프로덕션 환경 모두를 위해 더 큰 Docker 기반 프로젝트에 React를 추가할 수 있어야 합니다.