Docker화된 Nuxt 3 개발 환경을 만드는 방법

Nuxt 3는 현재 릴리스 후보 단계에 있으며 안정적인 릴리스는 이미 있습니다announced for this summer. Nuxt 3를 시작하기 위해 로컬 개발을 위한 최소한의 도커화된 환경을 만들 것입니다.

도커와 함께 Nuxt를 사용해야 하는 이유는 무엇인가요?

로컬 컴퓨터를 사용하는 것보다 도커 컨테이너로 작업하는 것이 더 편리한 데는 여러 가지 이유가 있습니다. 예를 들어 컴퓨터에 언어 환경이나 패키지를 설치할 필요가 없습니다. 시스템을 엉망으로 만들지 않고 루비나 노드 환경이 필요한 경우 도커 이미지만 사용할 수 있기 때문입니다. 이는 이러한 환경의 다른 버전이나 구성으로 작업해야 할 때 유용합니다. 또한 팀의 모든 사람이 로컬 운영 체제에 관계없이 동일한 개발 환경을 사용하고 있는지 확인할 수 있습니다.

이것은 웹 개발의 더 큰 스택(예: Django + Postgres + Redis + Vue)에 특히 유용하지만 Nuxt 또는 Vue 프로젝트를 개발하는 데 꼭 필요한 것은 아니라고 생각합니다. 그러나 몇 가지 장점이 있으며 특히 Nuxt 외에 관련된 다른 구성 요소(예: 백엔드 또는 데이터베이스)가 있는 프로젝트에서 도커 컨테이너 작업을 놓치고 싶지 않습니다.

전제 조건

단계를 수행하려면 Docker Engine 및 Docker Compose 을 모두 설치했는지 확인해야 합니다.

Nuxt 3 앱을 도커화하는 방법

instructions from the official documentation 다음에 새로운 Nuxt 3 애플리케이션을 초기화하는 것부터 시작하겠습니다.

선택한 터미널을 열고 다음 명령을 사용하여 새 프로젝트를 스캐폴딩합니다.

npx nuxi init nuxt-app

이제 cd nuxt-app 또는 즐겨찾는 IDE에서 폴더를 엽니다. 로컬 컴퓨터에 패키지를 설치하는 대신 모든 종속성이 시스템과 격리되어 설치될 Docker 컨테이너를 생성하려고 합니다.

따라서 Node 자체를 포함한 모든 Node 종속성과 함께 Docker 이미지를 빌드하는 데 사용할 Dockerfile를 생성해야 합니다. Dockerfile라는 새 파일을 만들고 다음 코드를 붙여넣습니다.

FROM node:14-alpine

WORKDIR /app

RUN apk update && apk upgrade
RUN apk add git

COPY ./package*.json /app/

RUN npm install && npm cache clean --force

COPY . .

ENV PATH ./node_modules/.bin/:$PATH

다음으로 서비스를 정의하여 Docker에 어떤 컨테이너가 가동되어야 하는지 알려줍니다. 현재 이것은 Nuxt 프론트엔드이므로 다음 내용으로 docker-compose.yml라는 새 파일을 만들어야 합니다.

version: '3.3'

services:
  nuxt:
    build:
      context: .
    image: nuxt_dev
    container_name: nuxt_dev
    command: npm run dev
    volumes:
    - .:/app
    - /app/node_modules
    ports:
      - "3000:3000"

이제 터미널에서 간단한 명령으로 http://localhost:3000에서 로컬 개발 서버를 시작할 준비가 되었습니다.

docker-compose up

그게 다입니다 - 도커화된 앱이 https://localhost:3000에서 실행 중입니다. 이제 우리는 도커화된 환경에서 최신 버전의 Nuxt로 최첨단 웹 애플리케이션을 구축할 준비가 되었습니다. my Github Repo 에서 모든 코드를 찾을 수도 있습니다. 다음 프로젝트의 시작 템플릿으로 자유롭게 사용하세요.