이 블로그에서, 나는 Docker를 사용하여ReactJS 응용 프로그램을 용기화하는 절차를 소개할 것이다.
다른 유형의 응용 프로그램을 컨테이너화하는 방법에 관심이 있으면 컨테이너화NodeJS 응용 프로그램에 대한 정보를 보십시오.

아빠가 앞에서 장난치고 있어요.

내 예시에서, 우리는 NodeJS 응용 프로그램을 용기화할 것이다. 이 응용 프로그램은 지정한 단점 icanhazdadjoke API 에서 우리에게 고품질의 서비스를 제공할 것이다.
이제 이 단점을 사용해서 ReactJS에 내장된 전단 페이지에 통합할 것입니다.이 페이지에는 한 아빠의 농담과 그에 상응하는 반응만 표시된다gif(아빠의 농담이 얼마나 웃겼는지 확인).
제 절차를 따르려면 my github starter Dad 우스갯소리 전단ReactJS 프로그램을 다운로드하십시오.

1단계: Dockerfile 만들기

로컬 컴퓨터에서 터미널을 열고 디렉토리(cd)를 UI 디렉토리로 변경합니다.

cd <location-path>/docker-jokes-ui

디렉토리에 들어가면 터치 명령을 사용하여 Dockerfile을 만듭니다.

touch Dockerfile

이제 Dockerfile이 생겼습니다. 다음 줄을 입력하여 응용 프로그램을 컨테이너화합니다.모든 줄의 실행은 용기 이미지를 설정하고 ReactJS 프로그램을 환경에서 실행할 수 있도록 하기 위해서입니다.이것은 여러 단계의 구축 과정으로 두 단계로 나눌 것이다.구축 절차와 운행 절차.다음은 이에 대해 상세하게 설명할 것이다.비록 나는 이전의 블로그에서 이미 이 코드의 일부 기능을 소개했지만, 나는 여전히 아래에서 각 줄을 세분화할 것이다.

#Build Steps
FROM node:alpine3.10 as build-step

RUN mkdir /app
WORKDIR /app

COPY package.json /app
RUN npm install
COPY . /app

RUN npm run build

#Run Steps
FROM nginx:1.19.8-alpine  
COPY --from=build-step /app/build /usr/share/nginx/html

먼저 컨테이너에 NodeJS 이미지를 캡처합니다.이것은 React 응용 프로그램을 구축하기 위해 노드를 사용하는 환경을 설정합니다.

FROM node:alpine3.10 as build-step

위 줄의 끝에 있는 설명자 asbuild step을 보았을 수도 있습니다.이것은 우리 응용 프로그램이'다단계'의 구축 과정을 거쳐야만 정상적으로 작동할 수 있기 때문이다.하나는 React 소스 코드에서 실제 응용 프로그램을 구축하는 것이고, 다른 하나는 Docker 컨테이너에서 응용 프로그램을 시작하거나 실행하는 것이다.이것은 Dockers documentation 다중 단계 구축에 대한 발췌문입니다.
"다단계 생성에 대해 Dockerfile에서 여러 개의 FROM 문장을 사용할 수 있습니다. FROM 명령마다 서로 다른 기초를 사용할 수 있고, FROM 명령마다 새로운 단계를 만들 수 있습니다. 작업을 한 단계에서 다른 단계로 복사할 수 있으며, 최종 이미지에 원하는 모든 것을 남길 수 있습니다."
Dockerfile 빌드 프로세스의 두 번째 단계에서 빌드 단계 가공소재를 사용합니다.잠시 후, 나는 이런 상황이 발생한 곳을 상세하게 설명할 것이다.
그런 다음 응용 프로그램이 사용할 디렉토리를 컨테이너에 만듭니다.

#Make app directory in container
RUN mkdir /app

카탈로그를 만든 후 이 카탈로그가 작업 카탈로그이거나 응용 프로그램 파일이 실행/생성될 위치를 컨테이너에 식별합니다.

#Identify working directory
WORKDIR /app

그 후에 우리는 우리의 소포를 복제할 것이다.json 파일을 프로그램 폴더로 가져옵니다.여기에는 프로젝트에 대한 모든 ReactJS 프레임워크 종속성이 포함됩니다.

#Copy package
COPY package.json /app

그런 다음 컨테이너에서 npm install 명령을 실행하여 모든 노드 모듈 패키지를 설치합니다.

#Install rpm packages from package.json
RUN npm install

주의: docker 실행 단계에서 이 설치 과정은 약간의 시간이 걸릴 것입니다.
모든 의존항을 설치한 후, 우리는copy 명령을 사용하여 나머지 프로젝트 파일을 프로그램 디렉터리에 복사할 것입니다.참고: "."현재 디렉터리에서 모든 파일을 복사하는 코드만 알려 줍니다.

#Copy over app to app folder
COPY . /app 

구축 단계를 끝내기 위해서, 컨테이너에 배치할 수 있도록 npm run build 명령을 사용하여ReactJS 응용 프로그램 코드를 구축할 것입니다.ReactJS 구축 프로세스에 익숙해진 경우 이 행 코드가 매우 익숙해 보일 수 있습니다.

#Command to build ReactJS application for deploy
RUN npm run build

현재 우리의 React 응용 프로그램이 구축되어 있으며, Docker 환경에 배치해야 합니다.이것은 우리의 달리기 단계를 시작할 것이다.
이 단계에서 우리가 해야 할 첫 번째 일은 프로그램을 실행하거나 임시 저장하는nginx 이미지를 가져오는 것입니다.nginx 이미지는 nginx 서버를 만들고 ReactJS 프로그램을 배치할 수 있습니다.

FROM nginx:1.19.8-alpine 

마지막으로build step ReactJS build 폴더를nginx serverhtml 폴더로 복사합니다.이렇게 하면 컨테이너에서 ReactJS 빌드에 액세스할 수 있습니다.

COPY --from=build-step /app/build /usr/share/nginx/html

2단계: 를 생성합니다.dockerignore

다음에 우리는 하나를 만들 것이다.dockerignore 파일입니다.이 파일은 docker 이미지를 구축할 때 특정 파일을 무시할 수 있도록 해 줍니다. 이것은 구축 시간을 절약하고 이미지에 설치된 파일을 의외로 덮어쓰지 않도록 합니다.

node_modules
build
.dockerignore
Dockerfile
Dockerfile.prod

3단계: Docker 이미지 만들기

다음 단계는 용기에서 실행하고 싶은 Docker 이미지를 만드는 것입니다.다음은 터미널에서 Docker 이미지를 만드는 데 사용할 명령 형식입니다.

docker build -t <image-name>:<tag> .

그래서 이곳에 무슨 일이 일어났는지:

docker build docker 이미지 구축 프로세스 시작

- 이름: 태그 형식을 생성하는 t 태그

이미지 이름은 원하는 이미지 이름입니다

.

탭은 우리가 원하는 이 버전의 그림 탭입니다.다른 버전의 이미지 배포용

. 우리가 그 속에서 건설할 길을 나타낸다.주의:build 명령의 실행에 절대적으로 필요합니다

dockerbuild 명령과 로고에 대한 더 많은 정보를 알고 싶으시면 Docker Build Documentation 을 보십시오.
그래서 내 예에서 이것이 바로 나의build 명령의 모습이다. (이 명령을 마음대로 사용할 수도 있다.)

docker build -t dad-joke-ui:version1 .

build 명령을 입력한 후return 키를 누르면 docker가 구축을 시작해야 합니다.터미널 창에는 다음과 같은 내용이 표시되어야 합니다.

주의해야 할 점은,build 명령에 태그를 추가하지 않으면, 자동으로 이 생성을 최신 버전으로 표시합니다.

4단계: Docker 실행

이제 Docker를 실행하고 Docker의 실행 상태를 확인합니다.
터미널에서 실행할 다음 명령은 다음과 같습니다.

docker run -p 8080:80/tcp -d <image-name>:<tag>

그래서 이곳에 무슨 일이 일어났는지:

docker run은 용기에서 docker 이미지를 실행합니다

-p 컨테이너 외부에서 호스트에 노출할 포트 설정

8000:80/tcp에서 저희 프로그램이 공개되었습니다. 이 프로그램은 저희 용기 중 포트 80의nginx 서버와 8000포트

의 로컬 컴퓨터에 위탁 관리됩니다.

-d는 우리의 용기가 백엔드에서 실행될 수 있도록 하고 터미널을 계속 사용할 수 있도록 합니다.

내 예에서 명령은 다음과 같습니다.

docker run -p 8000:80/tcp -d dad-joke-ui:version1

런 명령을 입력한 후,return을 누르면,docker는 로컬 기기에서 docker 이미지를 실행하기 시작해야 합니다.터미널 창에는 다음과 같은 내용이 표시되어야 합니다.

이것은 새로 실행 중인 docker 이미지의 컨테이너 ID입니다.
docker 실행 명령과 로고에 대한 더 많은 정보를 알고 싶으시면 Docker Run Documentation

5단계: Docker가 및 노출된 포트를 실행 중인지 확인

일단 우리의 전방 이미지가 Docker 용기에서 실행된다면, 실행 중일 뿐만 아니라, 이미지가 로컬 기기의 어느 포트에 노출되었는지 확인해야 한다.확인을 위해 터미널에서 다음 명령을 실행해야 합니다.

docker ps

이 명령을 실행하면 다음과 같은 내용이 표시됩니다.

기본적으로, docker ps 명령은 docker 환경에서 사용할 수 있는 모든 실행 용기를 보여 줍니다.사용 가능한 용기 목록에 있는 docker 그림을 보지 못하면, 이전 단계에서 오류가 발생했습니다. 이 오류를 수정해야 합니다.내 특수한 상황에서, 당신은 Docker 포트 80이 현재 내 로컬 기계에 노출된 포트 8080곳 (컨테이너화 환경 이외) 을 볼 수 있을 것입니다.

6단계: Docker에서 Dad 농담 앞면 사용

현재 우리는 우리의 응용 프로그램 이미지가 실행 중임을 검증했고, 마침내 그것을 사용할 때가 되었다.
이제 선택한 브라우저를 열고 주소 표시줄에 다음 주소를 입력합니다.

http://localhost:8080/

만일 모든 것이 정상이라면, 우리는 ReactJS 프런트엔드 프로그램을 보아야 한다.너는 반드시 이런 물건을 보아야 한다.

참고 API 애플리케이션을 포트 8000에서 실행하여 애플리케이션이 정상적으로 작동하도록 해야 합니다.my github에서 전체 API를 다운로드하여 구축 및 실행합니다.실행 및 구축 절차 설명이 필요하면 my를 사용하십시오
실행 중인 응용 프로그램을 보려면 Get Dad 농담 버튼을 클릭합니다.
해냈어!첫 번째 ReactJS 애플리케이션을 성공적으로 컨테이너화했습니다.뿐만 아니라 컨테이너화된 NodeJS API를 Docker로 사용하는 방법도 볼 수 있습니다.
클라우드에react 프로그램을 배치하는 것에 관심이 있습니다.내 블로그를 보면서 한 걸음 한 걸음 어떻게 진행되는지 알아보기

클라우드에 첫 번째 ReactJS 어플리케이션 배포

IBM 개발자 Bradston Henry・ 4월 16~21일・ 14분 읽기

#react #cloud #beginners

==상금 학습 ===
컨테이너화:Docker부터 시작
https://developer.ibm.com/technologies/containers/tutorials/building-docker-images-locally-and-in-cloud/
컨테이너에 대한 자세한 내용: https://developer.ibm.com/technologies/containers/

==소셜미디어에서 나를 주목====
트위터:
개발자:
Youtube: