Docker로 프론트엔드 프로젝트 생성 명령어를 통일해보자

영양가 없는 흥미 위주 글입니다.

프론트엔드에서 프로젝트를 시작하는 것은 굉장히 편하다. 굳이 create-react-app 이나 create-next-app 에 대한 이야기를 하지 않더라도 누구나 공식 문서를 통해 프로젝트를 시작할 수 있다. 심지어 이런 라이브러리들이 의존하는 프로세스는 기껏해야 nodejs 뿐이다. 그렇다면 Docker를 사용해서 FE 프로젝트를 생성하는 것이 뭐가 좋을까? 사실 FE 프로젝트 생성이 단순하기 때문에 가능한 개선점이 있다.

??? : 왜 이렇게 하냐구요? 간지나서 하는거에요.

FE 프로젝트는 시작하는 방법이 많고 생성 명령어가 비슷하긴 해도 똑같지는 않다. 이를 해결한다면 프로젝트를 시작할 때 아주 약간의 생성성을 올릴 수 있다. 필자는 CRA, CNA, vite, svelte 등 모든 프로젝트 생성 명령어를 외우고 싶지 않다. Docker를 이용해서 프로젝트 생성 명령어를 통일해보자.

Dockerfile

#create-next-app.dockerfile

FROM node:lts

WORKDIR /app

ENTRYPOINT npx create-next-app@latest

node:lts 이미지를 활용한다. 작업 디렉토리를 원하는대로 설정해주고 엔트리포인트에 공식문서에 적혀있는 프로젝트 생성 커맨드를 설정해주자. 다양한 옵션들을 프로젝트 생성 시점에 정해주기 위해 CMD 가 아닌 ENTRYPOINT 를 이용한다.

Next 프로젝트가 아닌 다른 라이브러리도 이와 유사하게 도커 파일을 생성해주자.

docker-compose.yaml

프로젝트를 생성할 때마다 도커 명령어를 작성하고 있는 것은 생산성이 오히려 더 떨어질 것이다. 따라서 미리 docker-compose를 통해서 다양한 도커 옵션들을 정의해줄 것이다.

#docker-compose.yaml

version: '3.8'
services:
  next:
    build:
      context: .
      dockerfile: #your dockerfile path
    stdin_open: true
    tty: true
    volumes:
      - ./:/app

stdin_open, tty 값을 true 설정하여 attach, interactive 모드로 실행할 것이다. 컨테이너 내에 생성된 프로젝트를 로컬 머신으로 들고 오기 위해서 바인드 마운트를 이용한다. 바인드 마운트라는 것은 컨테이너와 로컬 경로의 싱크를 맞추기 위한 것이다. 보통은 개발용 컨테이너에서 사용하고 바인드 마운트를 이용하면 코드 변경이 있어도 이미지를 리빌드 할 필요가 없기 때문에 생성성을 높일 수 있다. 우리는 바인드마운트가 컨테이너와 로컬의 싱크를 맞춘다는 점을 역이용하여 컨테이너에 있는 파일을 로컬로 가지고 올 것이다.

프로젝트 생성

이제 프로젝트를 생성할 시간이다. docker-compose.yaml 파일이 프로젝트를 생성할 디렉토리에 있다면 다음과 같은 명령어로 프로젝트를 생성할 수 있다.

docker compose run --rm <service-name> <option>
ex) docker compose run --rm next --typescript

docker compose run 은 yaml 파일 내 각각의 서비스를 실행하기 위한 명령어이고, run을 통해 컨테이너를 실행하면 종료 시에 컨테이너를 자동으로 제거하지 않기 때문에 --rm 옵션을 넣어주었다. 환경변수를 위해 -e 옵션을, 이미지 리빌드를 위해 --build 옵션을 추가로 넣어줄 수 있을 것이다.

무엇이 좋아졌는가?

npx create-next-app@latest 에서 docker compose run --rm next 명령어로 바뀌었다. 도커에 익숙하지 않다면 더 귀찮기만 하다. 하지만 어떤 라이브러리라도 위와 같이 도커파일로 만든다면 아래의 명령어로 모든 프로젝트 생성 명령어를 통일할 수 있다.

docker-compose run --rm <service-name> project-name <option>

docker-compose run --rm 을 create 라는 문자로 치환해주면 어떨까. 상당히 매력적일 것 같다. alias 명령어를 이용하여 로컬 터미널의 명령어 별칭을 지어줄 수 있다. 예를 들면 이렇다.

alias c="cat"

이제 cat 명령어는 c만 입력해도 사용 가능하다. 그럼 이것도 가능하지 않을까?

alias create="docker-compose run --rm"

마음에 든다. next 앱은 create next 명령으로 svelte 앱은 create svelte 명령으로 React 앱은 create react 명령으로, 이제 무엇이든 create <something> 으로 만들 수 있게 되었다. 다만 이러한 방법은 Dockerfile, docker-compose 파일을 만들어두어야 사용할 수 있다는 한계가 있다. 또 애초에 그다지 많은 라이브러리를 사용할 이유가 없는 사람이라면 더더욱 이럴 필요가 없다. 특히 alias 명령어만을 활용해도 꽤나 큰 효과를 볼 수 있다.

그렇지만 nodejs 없이도 프로젝트를 시작할 수 있다는 점, 또 그 프로젝트 스타터를 Dockerfile을 통해 명시적으로 관리할 수 있다는 점, 프로젝트 생성 명령어 (많은 옵션이 포함된)를 일일이 기억하고 있지 않아도 된다는 점은 꽤나 매력적이다.

frontend starter dockerfiles repository