DIL: 모던 리액트 딥 다이브, 5주차-6

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week5-6_2024-04-06

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ---- | -------------------------------------------------- | ----------- | | 5주차 | 9장 | 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 | 617~654p |

오늘 읽은 내용을 markdown으로 간단히 메모

도커라이즈

• 왜 도커?
  • 본격적으로 사용자에게 서비스하기 위한 웹 어플리케이션을 서비스하려면? 커스터마이징이 필요하다 ex) NGINX
  • 유연하지 못한 비용 체계
• 직접 장비를 구축하는 것이 아닌, 컨테이너로 만들어서 빠르게 배포하는 추세 ⇒ 컨테이너를 만드는 데 사용되는 것이 도커
  • 종속적이지 않은 유연한 관리
• GCP, Google Cloud Platform

리액트 앱 도커라이즈

• 도커란?

  https://www.docker.com/ Docker is a platform designed to help developers build, share, and run container applications. We handle the tedious setup, so you can focus on the code.

  • 컨테이너 단위 패키징
  • 리소스 확보, 운영체제 설치, Node.js 설치, 빌드 etc
• 용어

| 용어 | 내용 | 방법 | | ---------- | --------------------------------------- | ------------------------------------------------------------------------------------------ | | image | 컨테이너를 만드는 데 사용되는 템플릿 | Dockerfile을 빌드하여 이미지를 만듦 | | container | 도커의 이미지를 실행한 상태 | image가 목표하는 OS, FS, 각종 자원, 네트워크가 할당되어 실행될 수 있는 독립된 공간 | | Dockerfile | 어떤 image 파일을 만들지 정의하는 파일 | dockerize(도커 이미지화)에서 가장 먼저 하는 것이 Dockerfile 만들기 | | tag | image를 식별할 수 있는 레이블 값 | “이름:태그명” ex) ubuntu:latest | | repository | image를 모아두는 저장소 | 다양한 태그로 지정된 이미지가 모여있는 저장소 | | registry | repository에 접근할 수 있게 하는 서비스 | registry에는 다양한 repository가 있음. 자신이 원하는 이미지를 내려받아 사용 ex) Docker Hub |

• comman line interface
  • https://docs.docker.com/reference/cli/docker/

| 명령어 | 내용 | 예시 | 예시 동작 | docs | | ---------------- | ---------------------------------------------------- | ------------------------------------------------------- | --------------------------------------------------------------------------- | ----------------------------------------------------------- | | docker bulid | Dockerfile을 기준으로 image를 빌드 | docker build -t foo:bar ./ | ./에 있는 Dockerfile 기준으로 image를 빌드하고, foo:bar라는 태그를 붙인다 | https://docs.docker.com/reference/cli/docker/image/build/ | | docker push | image나 repository를 도커 registry에 업로드하는 과정 | docker push dusunax/foo:bar | dusunax 사용자 계정에 foo:bar 이미지를 push한다 | https://docs.docker.com/reference/cli/docker/image/push/ | | docker image tag | image에 tag를 생성 | docker image tag 원본이미지:태그 변경할이미지:태그 | 기존 image에 새로운 tag를 붙인다. 하나의 이미지에 여러개의 태그 | https://docs.docker.com/reference/cli/docker/image/tag/ | | docker inspect | image나 container의 세부 정보 출력 | docker inspect {이미지명컨테이너명} | 세부정보를 원하는 이미지명 컨테이너 | https://docs.docker.com/reference/cli/docker/inspect/ | | docker run | image를 기반으로 새로운 container 생성 | docker container run [OPTIONS] IMAGE [COMMAND] [ARG...] | | https://docs.docker.com/reference/cli/docker/container/run/ | | docker ps | 가동 중인 container 목록 확인 | docker stack ps [OPTIONS] STACK | | https://docs.docker.com/reference/cli/docker/container/ls/ | | docker rm | 컨테이너 삭제 | docker container rm [OPTIONS] CONTAINER [CONTAINER...] | 실행 중인 컨테이너를 삭제하려면 stop 후 삭제해야함 | https://docs.docker.com/reference/cli/docker/container/rm/ |

Dockerfile

• 도커파일 알아보기

// Dockerfile
FROM node:18-alpine as build
# FROM 어떤 베이스 image에서 실행될 것인가
# - base image: 이 이미지를 실행하는 데 필요한 이미지, docker는 image위에 image를 생성할 수 있다.
# - node:18-alpine: Node.js 18버전이 설치되어 있는 이미지가 alpine 운영체제 위에서 실행된다.

# 알파인 리눅스
# - 리눅스보다 가볍고 빠름
# (하단 표 참고)

WORKDIR /app # 작업 디렉토리

COPY package.json ./package.json
COPY package-lock.json ./package-lock.json
# 복사하는 위치는 WORKDIR, ./app

RUN npm ci
# 컨테이너에서 명령어 실행

COPY . ./
# 빌드를 위한 리소스를 COPY like src, node_modules

RUN npm run build # 애플리케이션 빌드

alpine linux를 사용하는 이유

| 이유 | 설명 | | --------------- | -------------------------------------------------------------------------------------------------------------------------------- | | 최소한의 패키지 | 알파인 리눅스는 최소한의 패키지만 포함하고 있어 시스템 자원을 적게 사용함. 이로써 부팅 시간이 짧고 시스템 리소스 사용량이 적어짐 | | 선택적 설치 | 사용자가 필요한 패키지만 설치하여 불필요한 패키지를 배제하고 시스템을 가볍게 유지할 수 있게 해줌 | | 도커에 최적화 | 도커 컨테이너에 최적화되어 있어 도커 이미지의 크기가 작고, 부팅 시간이 빠름. 컨테이너 기반 환경에서 많이 사용 | | musl libc | 알파인 리눅스는 glibc 대신 musl libc를 사용. musl libc는 가볍고 최적화되어 있어서 일반적인 응용 프로그램 실행 속도를 향상시킴 |

glibc와 musl libc는? 리눅스 시스템에서 사용되는 C 라이브러리

| 특징 | glibc (GNU C 라이브러리) | musl libc | | --------- | -------------------------------------------- | ---------------------------------------------------- | | 크기 | 크고 다양한 기능을 포함함 | 작고 최적화되어 있음 | | 포괄성 | 기능이 매우 풍부하고 포괄적임 | 단순하면서도 표준을 엄격히 준수함 | | 사용 사례 | 일반적인 리눅스 시스템 및 서버 환경에 적합함 | 경량화된 시스템, 임베디드 장치, 컨테이너 등에 적합함 |

이미지 빌드해보기

• Node.js만 실행되는 이유 ⇒ FROM node:18-alpine의 CMD [ "node" ]

도커에서 dangling 이미지는?

• Docker dangling images는 Docker에서 사용되는 용어 중 하나입니다. "Dangling"은 Docker 이미지의 상태를 설명하는 용어로 사용됩니다.
• Docker 이미지는 파일 시스템 레이어의 집합으로 구성됩니다. 레이어는 변경되지 않는 캐시된 이미지, 삭제된 이미지 등 다양한 상태를 가질 수 있습니다. Dangling 이미지는 다른 이미지의 부모가 없는 이미지를 가리킵니다. 즉, 다른 이미지에서 파생되지 않고 남겨진 이미지를 의미합니다.
• 이러한 dangling 이미지들은 보통 Docker 빌드 프로세스나 이미지 업데이트 작업 등에서 발생할 수 있습니다. 예를 들어, Dockerfile을 수정하고 이미지를 재빌드하면 이전 이미지의 dangling 버전이 생성될 수 있습니다.
• 일반적으로 dangling 이미지는 더 이상 사용되지 않으므로 시스템 공간을 차지하고 있는데, 이를 정리하지 않으면 디스크 공간을 낭비할 수 있습니다. 따라서 정기적으로 이러한 dangling 이미지를 정리하는 것이 좋습니다. docker image prune 명령을 사용하여 dangling 이미지를 삭제할 수 있습니다.

nginx 이미지

FROM nginx:1.23.2-alpine as start
# 빌드된 정적 파일을 서비스하기 위한 알파인 리눅스 설치

COPY ./nginx/nginx.conf /etc/nginx/nginx.conf # 빌드한 파일을 서비스할 수 있도록 nginx 설정파일 복사
COPY --from=build /app/build /usr/share/nginx/html
# --from=build는 앞서 as build로 선언한 단계에서 복사해 온다는 뜻

EXPOSE 3000
# 열어준 포트는 도커 image를 실행할 때, 호스트 운영체제에서 오픈된다.
# - 도커가 읽는 정보는 아니고, 어떤 포트가 열려 있는지 작성자가 알려주는 용도로 사용

ENTRYPOINT ["nginx", "-g", "daemon off;"]
# 컨테이너가 시작됐을 때 단 한 번 실행할 수 있는 명령 결정

Next.js는? 서버 실행이 필요하다.

• 만약 next export로 정적 리소스만 내보내는 경우, 서버 사이드 랜더링이 없으므로 서버 도커라이즈 과정 필요x
• next.config.js { output: "standalone" }
  • 프로덕션에 필요한 파일만 모아서 바로 실행할 수 있는 준비

# Step 1: deps
FROM node:18-alpine as deps

WORKDIR /app

COPY package.json ./package.json
COPY pnpm-lock.yaml ./pnpm-lock.yaml

RUN npm install -g pnpm && \
    pnpm install

# Step 2: build
FROM node:18-alpine as build

WORKDIR /app

COPY --from=deps /app/node_modules ./node_modules
COPY . ./

RUN npm install -g pnpm && \
    pnpm build

# Step 3: runner
FROM node:18-alpine as runner

COPY --from=build /app/public ./public
COPY --from=build /app/.next/standalone ./public # CDN으로 별도로 제공하거나, standalone 내부에 놓거나
COPY --from=build /app/.next/static ./.next/static

EXPOSE 3000

ENTRYPOINT ["node", "server.js"]

이미지 업로드하기

• 업로드 할 수 있는 장소
  • AWS의 ECR, GCP의 Container Registry, Docker hub
  • credential을 얻고, 원격 이미지 저장소 이름에 맞게 태그를 변경하고, 푸시한다

Google Cloud Platform 가입하기

• 배포 완료 👍: https://next-nmysy2cnia-uc.a.run.app/