Codeit Weekly Mission [Week 6] docker로 작업 환경 세팅 하기

토깽이연구소 수석연구원·2023년 4월 28일

Weekly Mission

목록 보기

5/10

개인 맥북과 공유 아이맥에서 위클리미션을 자유자재로 작업할 수 있게 세팅을 해 보았다.

도커 사용 이유

42서울 클러스터의 아이맥에는 계정당 5gb의 자원만 사용할 수 있다. 따라서 용량문제로 node를 설치할 수 없다.
이것이 저번 주 미션까지는 문제가 되지 않았다. 저번주 까지는 미션이 node가 필요없는 바닐라 자바스크립트로만 되어 있었기 때문이다. 하지만 이번주부터는 리액트로 과제를 진행해야한다. 그래서 node가 필수인데 공용 아이맥에서 노드를 쓸 수 없으니 도커를 활용하여 컨테이너 안에서 작업을 할 수 있게 세팅을 해본다.

사전 지식

도커: 컨테이너를 띄울 수 있게해주는 소프트웨어
컨테이너: 경량화된 vm이라고 보면 된다. 리눅스 os가 전부 깔리는 것이 아닌 필수적인 것들만 안에 콤팩트하게 들어가있어, 외부로부터 격리된 작업 환경을 제공한다.
이미지: 컨테이너를 생성하는 틀. 컨테이너가 인스턴스이면 이미지는 클래스라고 이해하면 된다.

환경 세팅

순서

이미지 만들기

맥북과 최대한 동일한 환경에서 작업할 수 있게 node16버전의 이미지를 만든다. 처음에는 dockerfile로 만들었지만 최종적으로는 조금 더 편리한 docker-compose파일로 만들었다.
쉽게 말해 이미지를 만들 명령어들을 미리 설정해놓고, 컨테이너를 띄울 곳에서 docker compose up 명령어로 한 번에 이미지 빌드와 컨테이너 실행까지 할 수 있다.

아이맥에 도커 설치

클러스터 맥에 docker for desktop을 설치한다. 대부분의 아이맥에 설치가 되어 있다. 이제 터미널에 도커 관련 명령어들을 쓸 수 있게 된다.

맥북에서 작업한 폴더 github에 push

리액트 프로젝트를 github에 push해 놓는다.

아이맥에서 git clone

아이맥에서 해당 프로젝트를 클론해온다. 용량 문제로 인해 goinfre에 clone한다.

docker compose로 컨테이너 띄우기

clone한 프로젝트에 docker-compose.yml파일이 있다. 아이맥에서 도커 명령어를 쓸 수 있으니 docker compose up -d --build를 실행하여 컨테이너를 띄운다.

컨테이너 안에서 작업하기

이제 container에서 쉘로 접속할 수 있다. 이 쉘은 호스트 컴퓨터(아이맥)과 완전히 분리되어 있어서 노드가 설치되어 있다. 이 쉘에서 리액트 프로젝트 개발 서버를 띄워 확인한다.
쉘 진입 명령: docker exec -it <컨테이너이름> /bin/sh
컨테이너 내부 쉘에 진입하면 터미널처럼 그냥 쓰면 된다. npm run dev를 통해 개발용 서버를 키고 브라우저에서 확인하면 된다.

docker-compose 파일

다음은 내가 사용한 docker-compose파일이다.

version: "3"
services:
  vite_docker:
    image: node:16-alpine
    container_name: weekly-react
    entrypoint: tail -f

    ports:
      - 8000:8000
    working_dir: /src/app
    volumes:
      - type: bind
        source: ./
        target: /src/app
    tty: true
    stdin_open: true

여기서 눈여겨 봐야 할 것들이 몇 가지 있다.

ports
- 포트 포워딩을 설정하는 곳. 호스트의 포트와 컨테이너의 포트를 포워딩 해주는 설정을 넣으면 된다. 8000: 8000이라고 되어 있는데, 쉽게 말해 localhost:8000으로 브라우저에서 접속하면 컨테이너의 8000번 포트로 연결시킨다는 것이다.
- 컨테이너의 8000번 포트가 이로써 listen하고 있게 된다.
- 이 떄 그 안에 어플리케이션 서버도 8000번으로 구동시켜야 한다. 나의 경우 vite로 리액트앱을 만들었기 때문에 다음과 같이 viteconfig파일에서 설정해주었다.
```
 import { defineConfig } from "vite";
  import react from "@vitejs/plugin-react-swc";

  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [react()],
    server: {
      host: true,
      port: 8000, // 이렇게 설정해두면 5173포트가 아닌 8000포트로 접속하면 된다.
    },
  });
```
volumes
- 호스트 머신과 컨테이너의 파일시스템을 연동하는 설정
- source: 호스트 머신의 디렉토리
- target: 컨테이너의 디렉토리
- ```
...
 volumes: 
 	- type: bind
      source: ./
      target: /src/app
  ...
```
- 호스트의 현재 디렉토리(docker-compose 파일이 위치한 디렉토리)와 컨테이너의 /src/app 디렉토리를 연결하겠다는 뜻. 내용이 한 곳에서 바뀌면 연동된 디렉토리에서도 자동으로 바뀐다.

정리

앞으로 클러스터에서 리액트 프로젝트를 작업하거나 노드 환경이 필요할 때 해야 할 작업 순서 정리
1. docker 데스크탑 설치 여부 확인(없으면 설치)
2. 42toolbox에서 init_docker.sh를 실행(필수는 아님)
3. github에 올라온 프로젝트를 goinfre에 clone
4. docker-compose로 컨테이너 실행
5. vscode에서 command+shift+p 누르고 attach container실행
6. 컨테이너에서 열린 vscode로 npm i, npm run dev실행
7. 브라우저에 잘 띄워지는지 확인
8. ash (alpine에서 사용하는 쉘) 에서 깃 설치
apk add --no-cache git
9. 작업 진행