프로덕션 React.js 도커화

클라우드 컴퓨팅의 인기와 함께 컨테이너화는 격리되고 확장 가능하며 애플리케이션을 배포하는 쉬운 방법을 제공하기 때문에 중대형 프로젝트에 사용되는 일반적인 기술입니다.

오늘 우리는 React.js 애플리케이션을 위한 프로덕션 준비 도커 이미지를 배우고 생성할 것입니다. 나는 이것으로 정말 종료 했으므로 시작합시다 😼.

요구 사항

Docker

Node.js

먼저 머신에 Docker가 설치되어 있는지 확인합니다. 아직 설치하지 않은 경우 설치하고 다시 여기로 오십시오.

docker -v

그런 다음 컴퓨터에 Node.js도 설치되어 있는지 확인합니다. React.js 애플리케이션을 부트스트랩하려면 이것이 필요합니다.

node -v

프로젝트 초기화

React.js 애플리케이션을 초기화하는 방법에는 여러 가지가 있습니다. 수동으로 사전 제작된 템플릿 또는 프런트 엔드 도구입니다.

이 문서에서는 빠르고 구성 가능한 프런트 엔드 도구Vite를 사용할 것입니다.

HINT

You may use Create React App (CRA) to intialize your application. It's also good and developed by Facebook Open Source too.

터미널을 열고 다음 명령을 입력합니다.

npm create vite@latest docker-production-react

프롬프트가 나타납니다. React와 JavaScript를 선택하기만 하면 됩니다.

이제 폴더docker-production-react로 이동하고 다음 명령을 실행합니다.

npm i


HINT

npm i is just aliased command for npm install.

초기화 프로세스가 제대로 작동하는지 확인하기 위해 로컬 서버를 시작하겠습니다.

npm run dev

브라우저http://localhost:5173로 열면 다음과 같이 표시됩니다.

커스텀 도커 이미지 생성

이 기사에서는 다단계 빌드라는 기술을 사용합니다. 우리의 목표는 React.js 애플리케이션 자체의 빌드 프로세스와 웹 서버(웹 사이트 제공)를 분리하는 것입니다.

빌드 프로세스 설정

먼저 docker-production-react 내부에서 Dockerfile 파일을 만들고 아래 스니펫을 따릅니다.

여기에서는 16.17.1-alpine3.16 를 사용하고 있습니다. 나는 Alpine Linux가 작기 때문에 빌드 프로세스를 더 빠르게 만들기 때문에 Alpine Linux를 선택합니다.

FROM node:16.17.1-alpine3.16 as build
WORKDIR /usr/app
COPY . /usr/app
RUN npm ci
RUN npm run build

위의 스니펫은 Docker에게 빌드 단계의 기본 이미지로 node:16.17.1-alpine3.16를 사용하고 현재 디렉토리를 /usr/app로 설정하고 npm ci를 실행하고 마지막으로 빌드하기 위해 Docker 허브에서 가져온 이미지를 가져오거나(풀지 않은 경우) 사용하도록 지시합니다. npm run build 명령을 사용하는 응용 프로그램.

웹 서버 설정

React.js 애플리케이션은 정적 파일이기 때문에 사용자가 애플리케이션에 액세스할 수 있으려면 간단하면서도 성능이 뛰어난 웹 서버가 필요합니다. 따라서 이 작업을 처리하기 위해 Nginx를 선택합니다.

이전Dockerfile에서 이 스니펫을 따르십시오.

FROM nginx:1.23.1-alpine
EXPOSE 80
COPY ./docker/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build /usr/app/dist /usr/share/nginx/html

여기에서 Docker에게 기본 이미지로 nginx:1.23.1-alpine를 사용하고 포트 80(기본 포트 Nginx)을 노출하도록 지시하고 구성 파일을 복사하고 번들 애플리케이션을 복사합니다.

HINT

Because Nginx act as a common web server and only serve our application, it's OK to not bind the configuration file at runtime.

Nginx 구성 파일의 경우 default.conf 안에 docker/nginx/conf.d 파일을 만듭니다.

mkdir -p docker/nginx/conf.d; touch docker/nginx/conf.d/default.conf

...아래 스니펫을 따르십시오.

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

구성은 우리의 응용 프로그램을 제공하지만 필요에 따라 사용자 지정할 수 있습니다.

여기 최종 Dockerfile ...

FROM node:16.17.1-alpine3.16 as build
WORKDIR /usr/app
COPY . /usr/app
RUN npm ci
RUN npm run build

FROM nginx:1.23.1-alpine
EXPOSE 80
COPY ./docker/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build /usr/app/dist /usr/share/nginx/html

.dockerignore

.gitignore 와 비슷하지만 Docker 이미지를 빌드할 때 사용됩니다.

touch .dockerignore

안에 넣어 .dockerignore

.git
.DS_Store
.env
node_modules

IMPORTANT

Never put sensitive information inside your Docker image. Exclude it using .dockerignore.

구축 단계

이 명령을 실행하여 이미지를 빌드합니다.

docker build -t web:0.1.0 .

이미지를 사용할 수 있는지 확인하십시오.

docker image ls

테스트

우리의 작업을 확인합시다.

docker run --rm --name web-1 -p 80:80 -d web:0.1.0

이제 브라우저에서 http://localhost를 열면 다음과 같은 내용이 표시되어야 합니다.



그래! 작동하고 있습니다...

보너스: 소스 코드

찾기 here .

또한 나의 최근 실험을 따르십시오.

thexdev / 데블랩

🧙‍♂️ 여기에서 나의 최신 실험을 찾아보세요! 🪄