이 블로그 게시물에서는 Docker를 살펴보고 간단한 Nginx 애플리케이션을 사용하여 다단계 Docker 빌드를 만드는 방법을 살펴보겠습니다. Docker를 처음 시작하는 경우 걱정하지 마세요. 따라하실 수 있도록 모든 것을 단계별로 설명하겠습니다!

도커파일

우리가 작업할 Dockerfile은 다음과 같습니다.

FROM node:18-alpine AS installer

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:latest AS deployer

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

Dockerfile 압축 풀기

이제 이 Dockerfile에서 무슨 일이 일어나고 있는지 단계별로 살펴보겠습니다.

1. FROM node:18-alpine AS 설치 프로그램

이 줄은 Docker Hub에서 공식 Node.js 이미지(Alpine Linux의 버전 18)를 가져옵니다. Docker Hub를 이미지 라이브러리로 생각하세요. 이 줄을 사용하여 Node.js를 빌드의 첫 번째 단계에 대한 기본 이미지로 사용하겠다고 지정합니다.

2. WORKDIR /앱

이 명령은 컨테이너 내부의 작업 디렉터리를 /app으로 설정합니다. 데스크탑에서 파일을 구성하는 방법과 유사하게 컨테이너 내에 애플리케이션 전용 폴더를 생성하는 것으로 생각할 수 있습니다.

3. COPY 패키지*.json ./

여기에서는 package.json 및 package-lock.json 파일을 로컬 디렉터리에서 컨테이너의 작업 디렉터리로 복사합니다. 이 파일에는 애플리케이션에 필요한 종속성에 대한 정보가 포함되어 있습니다.

4. npm 설치 실행

이 명령은 package.json에 지정된 모든 종속성을 설치하는 npm install을 실행합니다.

5. 복사 . .

이 줄은 나머지 애플리케이션 파일을 컨테이너에 복사합니다. 로컬 디렉터리의 모든 항목을 컨테이너 내부의 /app 디렉터리로 가져옵니다.

6. npm 실행 빌드 실행

이제 npm run build 명령을 사용하여 애플리케이션을 컴파일합니다. 이 단계에서는 일반적으로 코드(이 경우 React)를 사용자에게 제공할 준비가 된 정적 번들로 변환합니다. 이 명령의 출력은 /app.

7. nginx:최신 AS 배포자로부터

이 줄에서는 새로운 기본 이미지인 Nginx로 전환합니다. Nginx는 방금 구축한 것과 같은 정적 파일을 제공할 수 있는 강력한 웹 서버입니다. 이는 다단계 빌드 프로세스의 두 번째 단계의 시작입니다.

8. COPY --from=installer /app/build /usr/share/nginx/html

여기에서는 이전 단계(설치 프로그램)에서 빌드된 애플리케이션 파일을 Nginx 제공 디렉터리에 복사합니다. --from=installer 플래그는 Docker에게 방금 정의한 설치 프로그램 단계에서 파일을 가져오도록 지시합니다.

Docker 컨테이너 실행

Dockerfile이 설정되면 다음 명령을 사용하여 Docker 컨테이너를 빌드하고 실행할 수 있습니다.

docker build -t your-app-name .
docker run -dp 3000:80 your-app-name

your-app-name을 원하는 이름으로 바꾸세요. -dp 플래그는 컨테이너를 분리하고 호스트 시스템의 포트 3000을 컨테이너의 포트 80에 매핑하여 http://localhost:3000에서 앱에 액세스할 수 있도록 합니다.

결론

그리고 거기에 있어요! Nginx를 사용하여 애플리케이션 개발부터 프로덕션까지 진행하는 다단계 Docker 빌드를 만들었습니다. 진행 과정에 대해 질문이나 의견이 있으시면 아래에 댓글을 남겨주세요!

문제: 주의해야 할 사항

이 설정으로 작업할 때 흔히 발생하는 문제 중 하나는 올바른 포트 번호를 매핑하는 것을 잊어버리는 것입니다. Nginx는 일반적으로 컨테이너 내부의 포트 80에서 수신 대기하지만 로컬 컴퓨터에서 앱에 액세스하려는 경우 컨테이너에서 컴퓨터로 올바른 포트를 전달해야 합니다. 예를 들어, localhost:3000에서 앱에 액세스하려면 -p 3000:80 플래그를 사용하여 컨테이너를 실행하여 머신의 포트 3000을 컨테이너의 포트 80에 매핑해야 합니다.

이 단계를 놓치면 왜 모든 것이 완벽하게 구축되었으나 브라우저에서 앱에 접근할 수 없는지 궁금할 것입니다!

태그 및 언급

@piyushsachdeva
3일차 동영상