Macbook을 바꾸어 Docker의 컨테이너로 개발 환경을 만들 수 있으면 다른 사람과 환경을 맞추는 것도 편하고, 자신의 Macbook 환경 더러움 없이 끝나는 일 만들기에서는, 라고 생각해 보았으므로 각서입니다.

이러한 편이 좋다, 라든지, 잘못된 정보 등 있으면 가르쳐 주시면 기쁩니다.
가볍게 Vue.js 만지고 있을 뿐이므로 인프라를 모르고 무서운데 노력하고 싶다. .

전제

Apple M1 칩의 MacBook Air (macOS Big Sur, 16GB)

하고 싶은 일

Docker에서 Nuxt.js를 개발할 수있는 환경을 구축 할 수 있습니다.

Mac에서 Nuxt.js 응용 프로그램에 액세스 할 수 있습니다

Mac의 VSCode에서 개발하고 싶습니다

참고로 한 기사

docker로 nuxt.js를 개발 환경을 구축하기 만하면됩니다.

docker로 nuxt 개발 환경 만들기

【Docker】 Nuxt의 개발 환경을 Dockerfile과 docker-compose.yml로 구축해 보았다!

비망록

1. Docker 이미지 만들기

node 공식의 Docker 이미지가 있었으므로, 그쪽을 사용해 Docker 이미지를 작성한다.
2020/12/25 시점에서의 안정판이 14.15.3 이었으므로, 그쪽을 이용하기로 했다.

Dockerfile

FROM node:lts-alpine3.11

WORKDIR /app

RUN apk update && \
    apk add git && \
    npm install -g npm && \
    npm install -g vue-cli && \
    npm install -g [email protected]

ENV HOST 0.0.0.0
EXPOSE 8080

FROM 로 베이스가 되는 Docker 이미지를 지정하고 있다.
WORKDIR /app 라는 것은 Docker 컨테이너상에서의 cd /app 같은 것.
RUN 는 실제로 명령을 두드린다.
create-nuxt-app 는 최신을 넣으면 이하의 에러가 나와 버리는 것 같고, 조금 버젼을 떨어뜨린다( @2.15.0 )라고 잘 어울린다(참고 기사 참조).

Can't create . because there's already a non-empty directory . existing in path.

docker-compose.yml

version: '3'
services: 
  nuxt:
    build: .
    tty: true
    command: npm run dev
    volumes:
      - .:/app
    ports:
      - "8080:3000"

ports 에서 "8080:3000" 로 지정하면 외부(이 경우 Mac 에서 localhost:8080 를 보면 컨테이너 내의 localhost:3000 를 참조할 수 있게 된다.

2. Docker 컨테이너 시작

만든 이미지를 빌드하고 컨테이너를 시작한다.

$ docker-compose build
$ docker images
REPOSITORY   TAG              IMAGE ID       CREATED          SIZE
nuxt_nuxt    latest           53cf2fd02c9a   39 seconds ago   210MB
node         lts-alpine3.11   66ba137c0d00   6 days ago       115MB

create-nuxt-app의 각 항목은 맡겨집니다.

$ docker-compose run --rm nuxt npx create-nuxt-app
create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .
? Project name app
? Project description nuxt.js sample app
? Author name trajanme
? Choose programming language JavaScript
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Progressive Web App (PWA) Support
? Choose linting tools ESLint
? Choose test framework None
? Choose rendering mode Single Page App
? Choose development tools jsconfig.json (Recommended for VS Code)

docker-compose up -d

이제 http://localhost:8080로 이동하여 응용 프로그램을 볼 수 있습니다.



ESLint 오류가 발생했지만 우선 시작을 확인했습니다.

3. Mac의 VSCode에서 컨테이너 파일 편집

정말 쉽게 할 수있었습니다.

VS Code에서 Docker 개발 컨테이너를 편리하게 사용합시다. 의 기사에 쓰고 있는 Remote-Containers를 사용할까라고 생각하고 있었습니다만...



Docker 앱의 "Containers/Apps"에서 시작한 컨테이너의 "Open in Visual Studio Code"를 누르기만 하면 됩니다.



덧붙여서 Docker 컨테이너를 떨어뜨릴 때는 이하의 커멘드.

$ docker-compose down

다시 올리면, 보통 전회의 계속부터 작업할 수 있습니다.

조금 더 조사하지 않으면 멍청한 일이 많기 때문에 연말 연시 중에 정리하고 싶습니다 ...