Next.js + TailwindCSS 프로젝트를 기준으로 GitHub CI/CD와 Docker 실습을 단계별로 진행하려면, 단순 배포 → 자동화 → 고도화 순으로 학습하는 게 좋아요.

아래는 추천 학습 순서예요:

1. 로컬 Docker 환경 이해하기

먼저 Docker를 이해하고, Next.js 앱을 컨테이너로 실행해보는 것부터 시작하세요.

실습 흐름

• [ ] Docker Desktop 설치
• [ ] 간단한 Dockerfile 작성
  • Node.js 기반 빌드 및 실행 환경 구성
  • 예: node:18-alpine 이미지 사용
• [ ] .dockerignore로 불필요한 파일 제외
• [ ] docker build & docker run 으로 로컬 실행
• [ ] 브라우저에서 컨테이너로 서비스 접속 확인

예시 Dockerfile

# 1. 빌드 스테이지
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 2. 실행 스테이지
FROM node:18-alpine AS runner
WORKDIR /app
COPY --from=builder /app ./
EXPOSE 3000
CMD ["npm", "start"]

2. GitHub Actions 기본 익히기

GitHub Actions로 단순한 CI 파이프라인을 구성해봅니다.

실습 흐름

• [ ] .github/workflows/ci.yml 생성
• [ ] Node.js 버전 설정 후 Lint & Build만 돌려보기