Docker 컨테이너 React 응용 프로그램 사용

왜 Docker야?
어떤 종류의 소프트웨어를 개발할 때, 응용 프로그램은 개발 기기에서 일하지만, 다른 사람의 기기나 배치 환경에서 시작할 수 없습니다.이 가능하다, ~할 수 있다,...

필요한 소프트웨어 버전과 기계에서 사용할 수 있는 소프트웨어 버전 간의 차이.

배치 설정은 개발 기계와 다르다.

분실된 파일입니다.

Docker는 소프트웨어를 컨테이너화하여 이러한 문제를 해결합니다.
Docker의 공식 사이트에 따르면

Containers are a standardized unit of software that allows developers to isolate their app from its environment, solving the “it works on my machine” headache.

docker에 대한 자세한 내용은 Dockerofficial website.를 참조하십시오.

Docker 설치 및 실행
Docker를 설치하려면 this link (for windows)로 이동합니다.

React 애플리케이션 작성
React 응용 프로그램을 만들려면 Nodejs가 필수입니다.Nodejs 설치from here.
다음 명령을 실행하여 새로운react 프로젝트를 만듭니다.

npx create-react-app react-app

이것은 react app라는 새 react 프로젝트를 만들 것입니다.
이제 모든 IDE에서 항목을 열어 폴더 구조를 볼 수 있습니다.

react 프로그램을 실행하려면 터미널에서 다음 명령을 사용하십시오.

cd react-app
npm start

프로그램이 시작되고 실행되면 터미널에 다음과 같은 메시지가 표시됩니다.
react 프로그램을 시작하는 터미널 메시지
현재 React 응용 프로그램이 서버에서 실행 중입니다.이 주소의 모든 브라우저에서 응용 프로그램을 볼 수 있습니다.

http://localhost:3000

개발 서버에서react 프로그램을 실행합니다.

Dockerizing React 애플리케이션
React 응용 프로그램을 격리하기 위한 Docker 컨테이너를 만들기 위한 기본 설정이 준비되어 있습니다.
react 응용 프로그램의 루트 폴더에 Dockerfile이라는 파일을 만듭니다.Docker는 Docker 파일의 설명을 읽고 이미지를 자동으로 생성할 수 있습니다.

다음 코드를 Dockerfile에 복사하여 저장합니다.

# Pull the latest base image
FROM node:alpine
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# Copy package.json to /app
COPY package.json ./
# Copy package-lock.json to /app
COPY package-lock.json ./
# Install dependencies
RUN npm i
# add app
COPY . ./
# start app
CMD ["npm", "start"]   

Dockerfile을 살펴보겠습니다.

FROM node: alpine - 이 코드는 DockerHub에서 NodeJ의 최신 기본 이미지를 가져오는 Docker를 알려줍니다.

WORKDIR/app - 지정된 시간에 Docker 컨테이너의 작업 디렉토리를 정의합니다.이곳의 디렉터리 이름은 app입니다. 당신은 자신의 취향에 따라 어떤 이름을 줄 수 있습니다.

환경 경로/app/node modules/.bin: $PATH - ENV 업데이트 컨테이너에 설치된 소프트웨어의 PATH 환경 변수를 사용합니다.여기 npm 명령을 위한 환경 경로를 설정합니다.

소포를 복사하다.json./-우리는 소포를 받았다.json에서 작업 디렉터리로 이동합니다.

npm i-를 실행하면 모든 의존 항목을 설치하기 위해 명령npm i을 실행합니다.

CMD["npm", "start"] - 프로그램을 시작하기 위해 npm start 명령을 실행합니다.

Docker 데스크톱 응용 프로그램을 시작합니다.

터미널에서 react 프로그램의 루트 디렉터리로 이동하고 다음 명령을 실행하여 Docker 이미지를 만듭니다.

docker build -t react-app .

위의 명령은 react app라는 Docker 이미지를 만듭니다. Docker Desktop app에서 이 이미지를 볼 수도 있고 다음 명령을 사용하여 기계의 모든 Docker 이미지를 볼 수도 있습니다.

docker images

Docker 데스크톱 응용 프로그램의 이미지 섹션으로 이동
그림을 만든 후 다음 명령을 통해 용기를 실행할 수 있습니다.

  docker run -d --rm  -p 3000:3000 -e CHOKIDAR_USEPOLLING=true react-app

저희가 이 명령을 분해해 보도록 하겠습니다.

-d, 백그라운드에서 컨테이너를 실행하고 컨테이너 ID를 인쇄합니다

.

-- rm은 용기 종료 시 용기를 자동으로 제거

-p 3000: 3000, 컨테이너의 3000 포트를 호스트의 3000 포트에 게시

-e CHOKIDAR USEPOLING=true, -e 환경 변수 CHOKIDAR USEPOLING을true

로 설정

react app는 우리가 실행하고자 하는 그림의 이름입니다

현재, localhost: 3000에서 용기에 접근할 수 있습니다.
Docker Desktop에서 실행 중인 컨테이너를 볼 수도 있습니다.

용기를 멈추려면 터미널을 종료하거나 docker stop 명령을 사용하십시오.추가 docker 명령go to the official website.