프론트엔드 개발자를 위한 Docker 명령어 및 Dockerfile 작성 완벽 가이드

 

프론트엔드 개발자로 일하며 도커(Docker)를 처음 접하게 되면 상당히 낯설게 느껴질 수 있습니다. 저 역시 처음 도커를 사용할 때 여러 시행착오를 겪었습니다. 이번 글에서는 제가 팀원과 실제 협업하며 사용했던 Docker 명령어와 Dockerfile 설정 방법을 자세히 공유하면서, 초보자분들도 쉽게 따라 하실 수 있도록 꼼꼼하게 안내하겠습니다.

 

Docker란 무엇인가요?

Docker(도커)는 컨테이너(Container)라는 가상 환경을 사용하여 애플리케이션을 빠르게 배포하고 실행할 수 있게 해주는 기술입니다. 프론트엔드 개발자 입장에서 Docker를 활용하면 환경 설정에 소모되는 시간을 줄이고, 서버 배포 과정에서 일어나는 문제를 최소화할 수 있습니다.

 

Docker를 왜 사용해야 할까요?

Docker는 환경의 일관성을 보장해줍니다. 로컬 개발 환경과 서버 배포 환경의 차이로 인해 발생하는 문제들을 크게 줄일 수 있으며, 팀원 모두가 동일한 개발 환경을 공유할 수 있어 협업 효율이 올라갑니다. 또한 컨테이너 기반으로 애플리케이션을 빠르게 확장하거나 축소하는 것도 쉽기 때문에 클라우드 환경에서 특히 유용합니다.

 

 

실제 업무에서 사용한 Docker 명령어

Docker 로그인

Docker Hub에 이미지를 업로드(푸시)하려면 반드시 로그인을 해야 합니다.

docker login -u <Docker_ID>

• <Docker_ID> 부분에 본인의 Docker Hub 계정 아이디를 입력하시면 됩니다. 이후 비밀번호를 입력하면 로그인 완료입니다.

 

* Docker Hub란 무엇인가요?

Docker Hub는 Docker 이미지를 저장하고 관리할 수 있는 클라우드 기반의 저장소입니다. GitHub가 소스 코드를 저장하는 곳이라면, Docker Hub는 Docker 이미지를 저장하고 공유하는 곳이라고 생각하면 쉽습니다. 

이러한 이미지들과 허브를 관리하기 위해 Docker에서 제공하는 Docker Desktop 프로그램도 있으니 사용해보시는 것 추천드립니다.

 

 

 

Docker 이미지 빌드

로컬 환경에서 Dockerfile을 기반으로 Docker 이미지를 생성할 때 사용하는 명령어입니다.

docker build -t <Docker_ID>/my-frontend-app .

• -t 옵션은 이미지에 태그를 지정합니다.
• <Docker_ID>/my-frontend-app는 Docker Hub에 업로드할 이미지의 이름으로, 프로젝트명과 역할을 담아 작성합니다.
• 마지막의 .은 현재 디렉토리를 의미하며, Dockerfile 위치를 나타냅니다.

 

예시를 잠깐 보여드리면 (저는 <Docker_ID> 이런식으로 적혀있으면 가끔 헷갈리더라구요)

docker build -t exampleuser/my-frontend-app .

 

여기서 exampleuser는 예시 Docker Hub ID이고, my-frontend-app는 예시 프로젝트 내의 프론트엔드 애플리케이션을 의미합니다.

 

 

Docker 이미지 푸시

생성한 이미지를 Docker Hub로 업로드합니다.

docker push <Docker_ID>/my-frontend-app

• 이미지 푸시를 위해서는 앞서 빌드했던 이미지 이름과 반드시 일치해야 합니다.

 

심화 활용: 멀티 플랫폼 빌드 및 빌드 변수 전달하기

다양한 플랫폼에서 사용할 수 있는 이미지를 빌드할 때 사용하는 명령어입니다.

docker buildx build --platform linux/amd64,linux/arm64 --build-arg ENV_FILE=.env.production -t <Docker_ID>/advanced-frontend-app:latest .

 

이 명령어는 초보자를 넘어 더 심화된 단계의 활용 예시입니다.

• docker buildx build: 멀티 아키텍처 빌드를 지원하는 Docker 명령어입니다.
• --platform linux/amd64,linux/arm64: 여러 플랫폼에서 호환 가능한 이미지를 빌드합니다.
• --build-arg ENV_FILE=.env.production: 빌드 시 환경변수를 전달합니다.
• -t <Docker_ID>/advanced-frontend-app:latest: 이미지 이름과 태그를 설정합니다.
• 마지막의 .은 현재 디렉토리를 나타냅니다.

⚠️ 이 명령어는 ARM 기반 서버나 여러 운영체제를 동시에 지원해야 하는 경우 사용하며, 일반적인 프로젝트에서는 필요하지 않을 수 있습니다.

 

 

빌드와 푸시하는 법을 알았으니, 어떻게 빌드를 할지 코드로 컴퓨터에게 알려줘야겠죠?

개발자들은 DockerFile이란 것을 작성해서, 이미지 빌드 설정을 하게 됩니다.

 

Dockerfile이란 무엇이고 왜 작성해야 할까요?

 

Dockerfile은 Docker 이미지를 생성하는 데 필요한 명령어와 설정이 담긴 파일입니다. Dockerfile을 통해 프로젝트에 필요한 정확한 환경과 설정을 코드 형태로 명시할 수 있어, 환경 설정의 일관성을 유지하고 손쉽게 배포할 수 있습니다.

오픈소스들을 돌아다니다 보면, react root 경로에 DockerFile이라고 되어있는 파일을 자주 보실 수 있을 겁니다.

그게 바로 이러한 설정을 하는 것이다라고 보면 됩니다.

 

 

프론트엔드 프로젝트 Dockerfile 작성법

프론트엔드 프로젝트를 Docker로 관리할 때 Dockerfile은 다음과 같이 설정할 수 있습니다. 일반적으로 React나 Vue 같은 SPA 프로젝트의 예시입니다.

# Node.js 베이스 이미지
FROM node:18-alpine

# 작업 디렉토리 생성
WORKDIR /app

# package.json 복사
COPY package.json ./
COPY package-lock.json ./

# 의존성 설치
RUN npm install

# 소스 코드 복사
COPY . .

# 프로젝트 빌드 (예: React 앱)
RUN npm run build

# Nginx 웹서버 설정
FROM nginx:stable-alpine
COPY --from=0 /app/build /usr/share/nginx/html

# 컨테이너가 사용할 포트 노출
EXPOSE 80

# Nginx 실행
CMD ["nginx", "-g", "daemon off;"]

⚠️ 위 Dockerfile은 React 앱을 빌드하고 Nginx로 정적 파일을 서빙하는 일반적인 예시입니다. 프로젝트에 따라 사용하는 포트 번호나 빌드 커맨드 등이 다를 수 있으므로, 상황에 맞게 수정해서 사용하세요.

 

마치며

 

이번 글을 통해 프론트엔드 개발자가 Docker를 사용할 때 필수로 알아야 하는 명령어와 Dockerfile 작성법을 안내해 드렸습니다. Docker는 처음에는 어렵게 느껴지지만, 기본 원리를 이해하고 몇 가지 명령어와 설정법만 익혀두면 업무 효율성을 크게 높일 수 있는 도구입니다.

 

뭐 프로젝트마다 이러한 관리를 다르게 하겠지만, 일반적으로 프론트엔드 개발자는 백엔드 개발자와 협의하여 dockerfile을 작성하고, 프로젝트가 어느정도 기능개발이 되어 이미지를 말아 배포를 할 시기가 온다면, build와 push  명령어를 통해 Docker hub에 올리면 된다 정도로 이해하시면 될 것 같습니다.

쉽게 말해 git commit, push와 비슷한 개념이라고 생각하시면 되죠.

 

프론트엔드 개발자로서 프로젝트의 배포 과정에 대한 이해와 Docker 활용 능력을 갖춘다면, 앞으로의 협업에서 더욱 자신감을 가질 수 있을 것입니다.

궁금한 점이나 공유하고 싶은 팁이 있다면 댓글로 알려주세요. 더 좋은 개발 환경을 함께 만들어 가길 바랍니다!

감사합니다.