TL; DR

클라우드 컴퓨팅 세계에서 컨테이너화된 애플리케이션은 논리적 패키징 메커니즘을 제공하는 분리 원칙을 촉진합니다. 컨테이너 기반 애플리케이션을 쉽게 배포하고 일관성을 보장할 수 있습니다. React 애호가로서 React 애플리케이션을 패키징하는 또 다른 방법을 여러분과 공유할 것입니다.

준비

다음 단계에서는 Docker, React, Linux 기반 폴더 구조에 대한 기본 지식이 있다고 가정합니다...

시작하자

React 애플리케이션 초기화

편의상 create-react-app을 사용하여 빈 React 애플리케이션을 초기화합니다.

phuong@Arch ~/kitchen/js$ npx create-react-app fooapp

node:alpine 이미지를 사용하여 애플리케이션 빌드

완전한 격리를 보장하기 위해 애플리케이션을 구축하기 위해 NodeJS 이미지를 사용할 것입니다. 애플리케이션 폴더에 애플리케이션을 적용한 후(이 경우 cd fooapp). 아래와 같이 Dockerfile이라는 파일을 만듭니다.

FROM node:alpine as builder
WORKDIR /app
COPY . ./
RUN npm install
RUN npm run build

1행: React 앱을 빌드하는 데 사용하는 이미지를 선언하고 빌더 레이블을 첨부합니다.
2행: WORKDIR 지시문을 사용하여 현재 컨테이너의/app에 있음을 나타냅니다.
3행: 애플리케이션을 Docker 컨테이너에 복사
4행: 컨테이너에 React 애플리케이션에 대한 종속성 설치
5행: 애플리케이션을 빌드하는 명령을 실행하면 애플리케이션이 청크로 빌드되고 build라는 디렉토리에 저장됩니다.

Nginx를 사용하여 애플리케이션 제공

그러나 잠시만요, 우리가 구축한 응용 프로그램이 자체적으로 서비스를 제공할 수 없다는 것은 사실입니다. 응용 프로그램을 정적 리소스로 제공할 서버가 필요합니다. 낮은 리소스 소비, 간단한 구성 및 높은 성능으로 인기가 높기 때문에 nginx 이미지를 서버로 추천합니다.
nginx 서버에 대한 구성 파일이 필요합니다. 응용 프로그램 폴더의 루트에 nginx.conf를 생성하겠습니다.

server {
    listen       80;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html;                 
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

node_modules 및 원치 않는 폴더를 컨테이너에 복사하지 않기 위해. .dockerignore 파일에 간단히 나열합니다.

.git
node_modules
build

따라서 완전한 Dockerfile은 다음과 같습니다.

FROM node:alpine as builder
WORKDIR /app
COPY . ./
RUN npm install
RUN npm run build

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

7행: FROM 지시문은 nginx:alpine 이미지를 사용함을 나타냅니다(node:alpine 이미지와 함께).
8행: nginx 구성 파일을 컨테이너에 복사합니다.
9행: --from=builder는 위에서 레이블을 지정한 대로 1단계에서 빌드된 폴더를 복사하도록 docker에 지시합니다.
10행: 포트 80을 컨테이너 외부에 노출
11행: nginx가 포그라운드에 있어야 한다는 지시문입니다. 컨테이너의 경우 모범 사례는 하나의 프로세스 = 하나의 컨테이너이므로 유용합니다.

모든 것을 마무리

디렉토리를 확인해봅시다. 아래와 같은 정확한 애플리케이션 디렉토리가 있어야 합니다.



다음 명령을 사용하여 컨테이너 구축을 시작하겠습니다.

docker build -t fooapp:v1 .

빌드 프로세스



모든 것이 정상인지 확인하기 위해 다음 명령을 사용하여 새로 빌드된 컨테이너를 실행합니다.

docker run --rm -d 8080:80 fooapp:v1

--rm 플래그는 docker에게 애플리케이션 컨테이너를 실행한 후 컨테이너를 제거하도록 지시하고 -d는 호스트 시스템의 포트 80을 애플리케이션 컨테이너의 포트 8080에 바인드하도록 docker에 지시합니다.

짜잔

이제 브라우저에서 애플리케이션에 액세스할 수 있어야 합니다.



결론적으로, 시간을 내어 제 첫 번째 게시물을 읽어주셔서 감사합니다. 위의 단계와 주장은 제 개인적인 생각일 뿐이며 잘못된 점이 있으면 알려주세요. 아래에 의견을 남겨주세요. 감사. :)

P.s: 나는 또한 이 게시물에 대한 내 git repo를 다음 위치에 게시했습니다.

풍하우98 / dockerized-react-app

내 dev.to 참조 문서:

View on GitHub

참조

Docker multi-stage build

Nginx Docker image