다단계 빌드를 사용하여 Nginx로 React 앱 도커화

Docker은 개발 및 배포 프로세스의 속도를 높이는 데 사용되는 컨테이너화 도구로, 컨테이너화에 가장 널리 사용되는 솔루션입니다.
컨테이너를 사용하면 사용 중인 머신에 관계없이 동일한 환경에서 애플리케이션을 실행하고 개발할 수 있습니다.
- -
Docker-compose는 다중 컨테이너 Docker 애플리케이션을 정의하고 실행하기 위한 도구입니다.
- -
Nginx은 정적 콘텐츠를 제공하는 데 사용할 웹 서버이며 리버스 프록시, 로드 밸런서로 사용할 수 있습니다.
- -
React은 사용자 인터페이스 또는 사용자 인터페이스 구성 요소를 구축하기 위한 오픈 소스 프런트 엔드 JavaScript 라이브러리입니다.
- -
이 튜토리얼은 다단계 빌드를 사용하여 Nginx로 React 앱을 Dockerize하는 방법을 보여줍니다. 특히 다단계 빌드를 사용하여 프로덕션 준비가 된 이미지를 구성하는 데 중점을 둘 것입니다.

코드를 읽기만 원하는 사용자는 아래 GitHub 링크를 찾을 수 있습니다.

bahachammakhi/docker-react-nginx-blog

반응 프로젝트 만들기:

Create react app을 사용하여 반응 프로젝트를 생성합니다.

특정 위치에서 터미널을 열고 이 명령을 실행합니다.

npx create-react-app react-docker

프로젝트 디렉토리에 입력하십시오.

cd react-docker

- -

도커 파일:

Dockerfile 및 docker-compose.yml 만들기

mkdir nginx
touch Dockerfile docker-compose.yml nginx/nginx.conf

Dockerfile 열기

# build environment
FROM node:13.12.0-alpine as build
WORKDIR /app
COPY . .
RUN yarn
RUN yarn build
# production environment
FROM nginx:stable-alpine
COPY - from=build /app/build /usr/share/nginx/html
COPY - from=build /app/nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

무슨 일이야?

우리는 Docker에게 Node의 복사본을 가져오고 Linux 배포판을 Alpine으로 지정하고 빌드할 이름을 지정하도록 지시합니다. 왜 알파인인가? Alpine Linux는 대부분의 배포 기본 이미지(~5MB)보다 훨씬 작기 때문에 일반적으로 이미지가 훨씬 더 얇아집니다.

작업 디렉토리를 앱으로 설정

프로젝트를 디렉토리에 복사하는 중

실을 실행하여 패키지 설치

빌드 스크립트를 실행하여 빌드 파일 생성

도커에게 nginx-alpine 이미지를 캡처하라고 지시함

빌드 파일 복사 중

기본 구성을 대체하기 위해 nginx 구성 파일 복사

이 행은 애플리케이션이 포트 80에서 작동한다는 문서용입니다

.

nginx 실행

- -

nginx.conf 열기

server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}

우리는 누군가가 포트 80에 요청을 보낼 때마다 Nginx가 이를 사용할 수 있도록 애플리케이션 정적 파일의 위치를 ​​언급하고 있습니다.

docker-compose.yml 열기

version: "2"
services:
nginx-react:
container_name: ngixreactapp
build:
context: .
dockerfile: Dockerfile
ports:
- 80:80
environment:
NODE_ENV: production

사용할 dockerfile을 언급하고 포트 80을 애플리케이션 포트 80에 매핑하고 몇 가지 환경 변수를 추가하여 앱에 이름을 지정합니다.

컨테이너 실행

docker-compose up

분리 모드에서 컨테이너 실행

docker-compose -d up

Linux를 사용하는 경우 사용하는 모든 docker 명령에 sudo를 사용해야 합니다!
이제 열리면http://localhost/ 다음과 같이 표시됩니다.

- -