Docker 앱 배포를 위한 궁극의 가이드

Docker는 소프트웨어 개발, 테스트 및 배포 방식에 혁신을 가져왔습니다. 호환성 문제, 개발 환경과 프로덕션 환경 간의 환경 차이 등 소프트웨어 배포의 일반적인 문제 중 많은 부분을 해결했습니다.

이 문서에서는 프로덕션 환경에 Docker 컨테이너를 배포하는 프로세스를 살펴봅니다. 컨테이너, Docker, Docker 사용의 이점 및 배포 옵션에 대해 설명합니다. 마지막으로 Next.js 앱을 빌드, 도커화 및 Back4app 컨테이너에 배포하는 방법을 완전히 무료로 시연해 보겠습니다!

컨테이너란 무엇인가요?

컨테이너는 애플리케이션을 실행하는 데 필요한 모든 것을 포함하는 독립 실행형 실행 패키지입니다. 코드, 런타임, 라이브러리, 환경 변수, 구성 파일 등이 여기에 해당합니다. 컨테이너의 가장 큰 장점은 어디에나 배포할 수 있고 크기가 작고 빠르고 효율적이라는 점입니다.

컨테이너 사용의 이점

컨테이너를 사용하면 비즈니스에 큰 도움이 될 수 있습니다. 개발자는 물론 IT 운영팀에도 도움이 될 수 있습니다. Docker 사용의 몇 가지 이점은 다음과 같습니다:

• 이동성: 컨테이너는 어디든 배포할 수 있습니다!
• 애플리케이션 격리: 컨테이너는 앱과 앱의 종속성을 호스트 시스템으로부터 격리합니다.
• 책임의 분리: 개발자와 IT 운영팀이 업무를 분담합니다.
• 더 빠른 애플리케이션 개발: 로컬 개발 환경, CI/CD를 조작할 필요가 없습니다.
• 간편한 확장: 컨테이너는 오케스트레이션 소프트웨어와 함께 쉽게 확장할 수 있습니다.

컨테이너에 대한 자세한 내용은 클라우드 컴퓨팅에서 컨테이너란 무엇인가요?

컨테이너와 가상 머신 비교

가상 머신(VM)은 물리적 하드웨어를 추상화한 반면, 컨테이너는 운영 체제 수준에서 가상화됩니다. VM은 격리 및 보안을 강화하는 반면, 컨테이너는 공간을 많이 차지하지 않으며 효율성과 확장성이 더 뛰어납니다.

컨테이너와 VM을 결합하여 두 가지의 장점을 모두 활용할 수 있습니다.

도커란 무엇인가요?

Docker는 개발자가 경량 컨테이너에서 애플리케이션을 생성, 배포 및 실행할 수 있는 Linux 기반 오픈 소스 도구입니다. 컨테이너화 기술의 모든 훌륭한 이점을 제공하며 그 어느 때보다 빠르게 소프트웨어를 코딩, 출시 및 배포할 수 있습니다!

2013년에 출시된 안정적이고 실전에서 검증된 기술입니다. 그 이후로 Google, AWS, Microsoft를 비롯한 많은 대기업에서 채택하고 있습니다. 거대한 개발자 커뮤니티의 지원을 받고 있어 문제가 발생하면 쉽게 도움을 받을 수 있습니다.

시중에 나와 있는 컨테이너화 도구 중 Docker가 유일한 것은 아니지만 가장 인기 있는 도구입니다. 훌륭한 대안으로는 Podman, LXD, containerd, Buildah 등이 있습니다.

Docker 사용의 이점

컨테이너화 기술의 모든 이점 외에도 Docker에는 몇 가지 다른 이점이 있습니다. 이를 살펴보겠습니다.

경량

가볍고 빠른 특성을 가진 Docker는 가상 머신을 실용적이고 예산 친화적으로 대체할 수 있는 솔루션입니다. Docker는 고밀도 환경과 적은 리소스로 더 많은 작업을 수행해야 하는 중소규모 배포에 적합합니다.

버전 관리

Docker를 사용하면 애플리케이션의 버전 관리가 가능하므로 필요한 경우 이전 버전으로 쉽게 롤백할 수 있습니다. 이를 통해 다운타임을 줄이고 애플리케이션의 업데이트 또는 변경과 관련된 문제의 영향을 최소화할 수 있습니다.

향상된 공동 작업

Docker Hub는 Docker 이미지를 저장, 공유 및 관리하기 위한 클라우드 기반 리포지토리로, Docker 이미지를 처음부터 새로 만들 필요가 없습니다. Docker 커뮤니티에서 만든 이미지와 소프트웨어 공급업체의 공식 이미지를 포함하여 인기 있는 Docker 이미지를 검색하고 공유할 수 있는 중앙 위치를 제공합니다. Docker CLI 및 Docker Desktop과 긴밀하게 통합되어 있습니다.

확장성

Docker는 클러스터나 클라우드 플랫폼과 같은 대규모 분산 시스템에 애플리케이션을 배포하는 데 사용할 수 있는 확장 가능한 아키텍처를 제공합니다. 많은 수의 컨테이너를 처리하고 Docker Swarm 또는 Kubernetes와 같은 도구를 통해 컨테이너를 오케스트레이션하는 Docker의 기능 덕분에 수요에 따라 쉽게 확장 또는 축소할 수 있습니다.

Docker와 지역 개발

로컬 머신에서 Docker를 시작하고 실행하는 가장 쉬운 방법은 Docker Desktop을 설치하는 것입니다. Docker Desktop은 로컬 머신에서 컨테이너화된 애플리케이션을 빌드, 테스트 및 배포하는 데 필요한 사용하기 쉬운 GUI와 도구를 제공하는 애플리케이션입니다. 이를 통해 컨테이너, 이미지, 볼륨을 관리할 수 있습니다. 여기에는 Docker 엔진, Docker CLI, Docker Compose가 내장되어 있습니다.

또한 워크플로와 작업을 자동화하는 데 도움이 되는 Docker 익스텐션을 사용할 수 있습니다. Docker Desktop을 사용하면 다른 개발자와 쉽게 협업할 수 있으며, 내장된 Docker Hub 지원 기능도 훌륭합니다.

Docker Desktop은 Windows, Mac은 물론 Linux에서도 사용할 수 있습니다.

Docker 배포 옵션

Docker로 애플리케이션을 개발하는 것은 쉬우며 컨테이너를 다양한 플랫폼에 배포할 수 있습니다. 일반적으로 다음과 같은 그룹으로 나눌 수 있습니다:

1. 기존 호스팅
2. 서비스형 인프라(IaaS)
3. 서비스형 플랫폼(PaaS)
4. 서비스형 컨테이너(CaaS)

추상화를 기반으로 다음과 같이 피라미드형 차트로 시각화할 수 있습니다:

각각을 분석해 보겠습니다.

Docker 및 기존 호스팅

이미 짐작하셨겠지만 Docker 컨테이너는 자체 서버에 쉽게 배포할 수 있습니다. 서버에서 Docker를 시작하고 실행하려면 다음과 같이 해야 합니다:

1. Docker 엔진을 설치합니다.
2. Docker 이미지를 로컬에서 빌드하거나 컨테이너 레지스트리에서 가져옵니다.
3. 이미지를 사용하여 컨테이너를 스핀업합니다.
4. 네트워킹, 볼륨, 방화벽 등을 설정하세요.

배포 프로세스를 더욱 간소화하려면 Docker Compose를 사용할 수 있습니다. Docker Compose를 사용하면 서비스, 네트워크, 볼륨을 단일 파일로 선언할 수 있습니다. 또한 멀티 컨테이너 Docker 애플리케이션에 적합합니다.

IaaS의 Docker

서비스형 인프라(IaaS)는 가상화된 환경에서 서버, 네트워킹, 운영 체제, 스토리지와 같은 컴퓨팅 리소스를 제공하는 클라우드 컴퓨팅 서비스 모델입니다. 이러한 클라우드 서버는 일반적으로 높은 수준의 API 또는 고급 대시보드를 통해 조직에 제공되어 클라이언트가 전체 인프라를 완벽하게 제어할 수 있습니다.

IaaS의 Docker는 자체 서버를 사용하는 것과 크게 다르지 않습니다. 이 방식을 선택하는 경우 기존 호스팅과 비슷한 단계를 따라야 합니다.

일부 IaaS 제공업체에는 AWS, GCP, Azure가 있습니다.

PaaS의 Docker

서비스형 플랫폼(PaaS)은 사용자에게 애플리케이션을 개발, 관리 및 제공할 수 있는 클라우드 환경을 제공하는 클라우드 컴퓨팅 서비스 모델입니다. PaaS는 컴퓨터 리소스를 제공할 뿐만 아니라 애플리케이션 개발, 사용자 지정 및 테스트를 위한 다양한 사전 구축 도구가 함께 제공됩니다. 대부분의 PaaS 공급업체는 클릭 몇 번으로 앱을 실행할 수 있도록 지원합니다!

Docker를 지원하는 PaaS 플랫폼은 배포 프로세스를 훨씬 더 간소화합니다. PaaS 공급업체는 일반적으로 번거로움 없이 Docker 애플리케이션을 배포할 수 있는 훌륭한 도구를 제공합니다.

PaaS에 대해 자세히 알아보려면 PaaS란 무엇인가요 – 서비스형 플랫폼?

CaaS의 Docker

서비스형 컨테이너(CaaS)는 컨테이너화된 애플리케이션을 실행하고 관리하기 위한 플랫폼을 특별히 제공하는 서비스형 플랫폼(PaaS)의 한 유형입니다. 클라우드에서 Docker 컨테이너 및 마이크로서비스를 쉽게 실행, 관리 및 확장할 수 있도록 설계되었습니다.

CaaS는 컨테이너에 특화되어 있고 기본 인프라를 추상화하여 개발자가 기본 서버와 네트워크를 관리할 필요가 없으므로 가장 사용하기 쉬운 옵션입니다. 대부분의 CaaS 제공업체는 확장, 로드 밸런싱, 자동 장애 조치, 제로 타임 배포 등의 추가 기능을 제공합니다!

CaaS의 예로는 Back4app 컨테이너, AWS ECS, Azure ACI 및 Google GKE가 있습니다.

CaaS에 대해 자세히 알아보려면 CaaS란 무엇인가요 – 서비스형 컨테이너?

Back4app 컨테이너에 Docker 컨테이너 배포하기

이 문서 섹션에서는 간단한 Next.js 애플리케이션을 코딩하고, 도커화하여 Back4app 컨테이너에 배포합니다.

Back4app 컨테이너란 무엇인가요?

Back4app 컨테이너는 전 세계에 분산된 컨테이너에 앱을 배포하고 확장하기 위한 무료 오픈 소스 플랫폼입니다. 이 플랫폼을 사용하면 DevOps에 대해 걱정할 필요 없이 소프트웨어에만 집중하고 더 빠르게 출시할 수 있습니다. 이 플랫폼은 GitHub와 긴밀하게 통합되어 있고 CI/CD 시스템이 내장되어 있으며 몇 분 안에 앱을 실행할 수 있습니다!

Back4app 컨테이너를 사용하는 이유는 무엇인가요?

• GitHub와 잘 통합
• 다운타임 없는 배포
• 사용하기 쉽고 무료 티어가 있습니다.
• 탁월한 고객 지원

프로젝트 소개

영구 저장소가 있는 간단한 TODO 웹 애플리케이션을 구축하겠습니다. 이 앱을 통해 사용자는 작업을 추가, 제거, 완료로 표시할 수 있습니다. 상태 관리 및 상태 지속성을 위해 Next.js, React 및 Zustand로 빌드하겠습니다. 마지막으로 앱을 도커화하여 Back4app 컨테이너에 배포합니다.

최종 결과물은 다음과 같이 표시됩니다:

전제 조건:

• JavaScript ES6 사용 경험
• React와 Next.js에 대한 기본 이해
• Git 및 GitHub 사용 기능

코드 앱

프로젝트 초기화

먼저 새 Next.js 프로젝트를 만들어 보겠습니다.

Next.js 프로젝트를 부트스트랩하는 가장 쉬운 방법은 create-next-app 유틸리티를 사용하는 것입니다. 터미널을 열고 다음 명령을 실행합니다:

$ npx create-next-app@latest

√ What is your project named? ... nextjs-todo
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use `src/` directory with this project? ... No
√ Would you like to use experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*

Success! Created a new Next.js app in C:\Users\Nik\WebstormProjects\nextjs-todo.

그런 다음 서버를 실행합니다:

$ npm run dev

http://localhost:3000 으로 이동하면 기본 Next.js 랜딩 페이지가 표시됩니다.

Material UI

Google의 머티리얼 디자인을 따르는 React 컴포넌트 라이브러리인 Material UI를 사용하면 UI 구축 프로세스를 더 쉽게 만들 수 있습니다. 이 라이브러리는 바로 사용할 수 있는 다양한 컴포넌트를 제공하므로 사용자 인터페이스를 간단하고 효율적으로 만들 수 있습니다.

Material UI를 React Bootstrap Ant Design 같은 다른 UI 프레임워크로 자유롭게 교체할 수 있습니다.

프로젝트 실행에 Material UI를 추가하려면

$ npm install @mui/material @emotion/react @emotion/styled

Material UI는 기본적으로 Roboto 글꼴을 사용합니다. 함께 설치해 보겠습니다:

$ npm install @fontsource/roboto

다음으로 _app.js로 이동하여 파일 상단에 다음 임포트를 추가합니다:

사용자 인터페이스

웹 애플리케이션은 다음 두 페이지로 구성됩니다:

1. / 를 누르면 작업 목록이 표시됩니다.
2. /add를 사용하면 사용자가 새 작업을 추가할 수 있습니다.

색인 페이지부터 시작하겠습니다.

코드를 보다 체계적으로 정리하려면 프로젝트 루트에 구성 요소라는 이름의 새 디렉터리를 만듭니다. 이 디렉터리 내에 다음과 같은 내용으로 Task.js라는 새 파일을 만듭니다:

그런 다음 index.js에서 새로 만든 컴포넌트를 활용하여 작업을 표시합니다:

1. React useState() 훅을 사용하여 작업의 상태를 생성했습니다.
2. 작업 배열을 몇 가지 더미 데이터로 채웠습니다.
3. 작업(또는 아직 작업이 없는 경우 메시지)을 표시하기 위해 MUI 구성 요소와 작업 구성 요소를 사용했습니다.

개발 서버를 실행합니다:

$ npm run dev

http://localhost:3000 으로 이동하면 작업 목록이 표시됩니다:

이제 작업을 추가할 수 있는 페이지를 만들어 보겠습니다.

페이지 디렉터리 내에 add.js라는 새 파일을 만듭니다:

이 코드는 사용자가 새 작업을 추가할 수 있는 간단한 양식을 표시합니다.

서버를 다시 시작하고 /추가로 이동하거나 화면 오른쪽 상단의 ‘작업 추가’ 버튼을 클릭합니다. 다음과 같은 화면이 표시됩니다:

이제 UI가 완성되었습니다. 다음 단계에서는 실제 로직과 상태를 구현해 보겠습니다.

상태 관리

글로벌 상태를 처리하기 위해 작고 빠르며 확장 가능한 React 애플리케이션용 상태 관리 라이브러리인 Zustand를 사용할 것입니다.

먼저 npm을 통해 설치하세요:

$ npm install zustand

다음으로 스토어를 만들어야 합니다.

코드를 보다 체계적으로 정리하기 위해 전역 상태에 대해 store라는 전용 폴더를 만들어 보겠습니다. 이 폴더 안에 다음과 같은 내용으로 storage.js라는 파일을 만듭니다:

1. Zustand create()는 스토어를 생성합니다.
2. localStorage에 상태를 저장하기 위해 persist() 미들웨어를 사용했습니다.
3. 작업은 사용자의 작업을 포함하는 배열입니다.
4. 추가 작업, 삭제 작업, 완료 표시 작업은 작업 배열을 조작하는 메서드입니다.

마지막으로 해야 할 일은 전역 상태가 필요한 모든 페이지와 컴포넌트를 살펴보고 바인딩하는 것입니다.

index.js로 이동하여 다음과 같이 변경합니다:

파일 상단에 가져오기를 추가하는 것을 잊지 마세요:

import useGlobalStore from "@/store/storage";

그런 다음 components/Task.js로 이동하여 다음과 같이 변경합니다:

마지막으로 pages/add.js로 이동하여 handleSubmit()이 작업을 제출하도록 합니다:

다시 한 번 강조하지만, 가져오기를 잊지 마세요:

import useGlobalStore from "@/store/storage";

이제 웹 앱에서 Zustand를 사용해 글로벌 스토리지를 처리하고 로컬 스토리지를 통해 이를 유지합니다. 앱을 다시 실행하여 모든 것이 제대로 작동하는지 확인해 보세요.

도커라이즈 앱

다음 단계를 수행하려면 Docker가 설치되어 있어야 합니다. Docker를 설치하는 가장 쉬운 방법은 Docker Desktop을 다운로드하는 것입니다.

Docker가 실행 중인지 확인합니다:

$ docker --version

Docker version 20.10.22, build 3a2c30b

Next.js 구성

먼저 next.config.js로 이동하여 다음과 같이 출력을 '독립형 ‘으로 설정합니다:

이 설정을 변경하면 다음 빌드에서 독립 실행형 버전의 Next.js 앱이 생성됩니다. 독립형 앱은 node_modules를 설치하지 않고 배포할 수 있습니다. 독립형 빌드에는 웹 서버도 내장되어 있습니다.

Dockerfile

애플리케이션을 도커화하기 위해 Dockerfile을 사용하겠습니다. Dockerfile은 기본 이미지, 환경, 환경 변수, 명령어, 네트워킹 설정, 볼륨 등을 정의할 수 있는 일반 텍스트 파일입니다.

프로젝트 루트에 다음 내용으로 Docker파일을 생성합니다:

이 Dockerfile은 다단계 빌드를 활용합니다. 다단계 빌드를 사용하면 이미지 크기를 크게 줄이고 이미지를 더 빠르게 빌드할 수 있습니다. 다음 세 단계를 만들었습니다:

1. 종속성 단계에서는 종속성 파일을 복사하고 종속성을 설치합니다.
2. 빌더 단계에서는 종속성을 복사하고 npm을 통해 프로젝트를 빌드합니다.
3. 러너 단계에서는 독립 실행형 빌드를 복사하여 독립 실행형 서버를 통해 서비스합니다.

마지막으로 Back4app 컨테이너가 앱을 매핑하는 데 사용할 포트를 노출했습니다.

Next.js와 함께 Docker를 사용하는 방법에 대한 자세한 내용은 with-docker 리포지토리를 참조하세요.

.dockerignore

Docker는 이미지를 빌드하기 전에 .dockerignore 파일을 찾습니다. .dockerignore 파일을 사용하면 이미지에 포함하지 않을 파일을 정의할 수 있습니다. 이렇게 하면 이미지 크기를 크게 줄일 수 있습니다. .gitignore 파일과 유사하게 작동합니다.

프로젝트 루트에 다음 내용으로 .dockerignore 파일을 만듭니다:

제외할 디렉토리나 파일을 추가로 추가하세요.

이미지 빌드 및 실행

이제 Docker 이미지를 빌드하고 태그를 지정해 보겠습니다:

$ docker build -t nextjs-todo:1.0 .

이미지를 나열하면 새 이미지가 표시됩니다:

$ docker images

REPOSITORY        TAG       IMAGE ID       CREATED       SIZE
nextjs-todo       1.0       7bce66230eb1   2 hours ago   160MB

마지막으로 이미지를 사용하여 새 Docker 컨테이너를 스핀업합니다:

$ docker run -it -p 3000:3000 -d nextjs-todo:1.0

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

d를 사용하여 분리된 모드에서 Docker 컨테이너를 시작할 수 있습니다. 즉, 컨테이너가 터미널의 백그라운드에서 실행되며 입력을 받거나 출력을 표시하지 않습니다.

이제 앱이 컨테이너에서 실행 중입니다! http://localhost:3000 으로 이동하면 TODO 앱이 표시됩니다.

GitHub

Back4app 컨테이너에 앱을 배포하려면 소스 코드를 GitHub 리포지토리에 업로드해야 합니다. GitHub에 새 리포지토리를 만들고 리모트를 추가한 다음 .gitignore 파일을 추가하고 코드를 커밋합니다. 코드가 GitHub에 업로드되면 다음 단계로 이동합니다.

Back4app 컨테이너를 테스트해보고 싶으시다면, back4app-containers-nextjs 리포지토리를 포크하여 배포해 보세요.

Back4app 컨테이너에 앱 배포하기

다음 단계를 수행하려면 Back4app 계정이 필요합니다. 이미 계정이 있는 경우 로그인하고 그렇지 않은 경우 무료 계정에 가입하세요.

Back4app으로 작업하려면 먼저 앱을 만들어야 합니다. 대시보드에 로그인하면 앱 목록이 표시됩니다. 새 앱을 만들려면 “새 앱 만들기”를 클릭합니다.

다음으로 ‘서비스형 컨테이너’를 선택합니다.

아직 연결하지 않았다면 GitHub를 Back4app에 연결하고 배포하려는 리포지토리를 가져오세요. GitHub가 연결되면 리포지토리가 표에 표시됩니다.

“선택”을 클릭하여 배포할 리포지토리를 선택합니다.

다음으로 Back4app에서 환경을 구성하라는 메시지가 표시됩니다. 앱 이름을 선택합니다. 저는 nextjs-todo로 하겠습니다. 다른 모든 항목은 기본값으로 그대로 두세요.

마지막으로 ‘앱 만들기’를 클릭하면 자동으로 앱을 생성하고 배포할 수 있습니다.

그러면 배포 로그를 볼 수 있는 앱 세부 정보로 리디렉션됩니다.

앱이 배포될 때까지 몇 분 정도 기다리면 짜잔! 이제 앱이 Back4app 컨테이너에 배포되었습니다. 앱이 작동하는 모습을 보려면 왼쪽에 표시된 녹색 URL을 클릭하세요.

결론

이 글 전체에서 Docker의 정의와 장점, 워크플로에 통합하는 방법에 대해 설명했습니다. 이제 여러분은 자체 Next.js 애플리케이션을 코딩하고, 도커화하여 Back4app 컨테이너에 배포할 수 있을 것입니다.

최종 소스 코드는 back4app-containers-nextjs GitHub 리포지토리에서 확인할 수 있습니다.

자주 묻는 질문