Overview

• 저는 취업을 할때부터 항상 환경 디펜던시의 무서움을 많이 겪었던 것 같습니다.
• 힘들게 만든 코드를 배포하지 못한 경험이 쌓이면서 가상화와 패키징에 관심을 많이 갖게 된 것 같습니다.
• 자기가 만든 App이 윈도우에서도, 다른 리눅스 환경에서도, 클라우드에서도 돌아야하기에 처음부터 컨테이너로 개발하는 것이 습관화 되었습니다.
• 프론트엔드도 마찬가지라고 생각하고, 루틴화된 내용을 프론트엔드에도 녹여봤습니다.

0. Vite

npm create vite@latest <project> -- --template react-ts

• project는 project명 입니다.

1. Docker file

FROM node:23

COPY project/package* .
RUN npm install

• 필요한 노드 버전을 두고, package로 시작하는 파일들을 COPY해서 설치합니다.
• package 내용이 없을 수 있는데, 컨테이너 내에서 개발 환경을 구성하면서 npm install 혹은 npm init을 하며 개발하면 됩니다.
  • 이 때 생성된 package를 다른 컴퓨터에서도 잘 활용하기 위한 내용입니다.

2. Docker compose

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile.dev
    working_dir: /app
    volumes:
      - .:/app
    ports:
      - 5173:5173
    stdin_open: true 
    tty: true

• volume은 현재 디렉토리와 working 디렉토리를 마운트해서 개발하면 편합니다.
  • 컨테이너 환경에서 코드 업데이트를 실시간으로 할 수 있어요.
• stdin_open,tty 을 설정해서 특별한 Command를 사용하지 않더라도 컨테이너가 꺼지지않고 환경을 유지할 수 있게해줍니다.
  • 컨테이너를 서버에 접속해서 사용하듯이 이용할 수 있어요.
• ports에서 <hostPort>:<containerPort>를 매핑해줍니다.
  • host Port로 containerPort에 접근할 수 있어 개발할 때 편합니다.

docker compose up --build -d

• daemon으로 실행하여 마치 서버를 하나를 추가로 가지고 있는 것 처럼 개발할 수 있습니다.

• Vscode에서 docker extension을 사용하면 새로운 vscode로 띄워서 작업할 수 있습니다.
• Attach Shell을 사용하면 서버를 사용하듯이 터미널로 접속되는데 구성한 컨테이너 환경에서 간단한 명령어를 수행해볼 수 있습니다.

3. vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',
    port: 5173,
  }
})

• server 내용을 추가합니다.

4. Run dev server

npm run dev

> project@0.0.0 dev
> vite

6:01:07 AM [vite] (client) Re-optimizing dependencies because vite config has changed

  VITE v6.2.3  ready in 193 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.19.0.2:5173/
  ➜  press h + enter to show help

• Container에서 npm run dev를 해서 개발 서버를 Run 합니다.
• docker compose에서 해당 포트를 매핑했기 때문에 Host의 브라우저에서도 개발 결과물을 빠르게 확인할 수 있습니다.