Remix | setting

remix

npx create-remix@latest my-remix-app --template remix-run/remix/templates/express
cd my-remix-app

tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

prettier

npm install -D prettier

remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  // 특정 패턴의 파일을 라우트로 인식하지 않도록 설정 (숨김 파일 무시)
  ignoredRouteFiles: ['**/.*'],

  // 서버 모듈 형식을 ES 모듈로 설정
  serverModuleFormat: 'esm',

  // 서버 플랫폼을 Node.js로 설정
  serverPlatform: 'node',

  // Tailwind CSS 통합 활성화
  tailwind: true,

  // PostCSS 처리 활성화
  postcss: true,

  // 변경 시 자동으로 다시 빌드할 파일 경로 지정
  watchPaths: ['./tailwind.config.ts'],

  // 개발 서버 설정
  dev: {
    // 개발 서버가 사용할 포트 번호
    port: 3000,
  },
}

Dockerfile

# 1단계: 빌드 환경 설정
FROM node:18-alpine AS builder
# Node.js 18 Alpine 이미지를 기반으로 builder 스테이지 생성
WORKDIR /app
# 작업 디렉토리를 /app으로 설정
COPY package*.json ./
# package.json과 package-lock.json 파일을 복사
RUN npm install
# 의존성 패키지 설치
COPY . .
# 현재 디렉토리의 모든 파일을 컨테이너로 복사
RUN npm run build
# Remix 애플리케이션 빌드 실행

# 2단계: 프로덕션 환경 설정
FROM node:18-alpine
# 새로운 Node.js 18 Alpine 이미지로 프로덕션 스테이지 시작
WORKDIR /app
# 작업 디렉토리를 /app으로 설정
COPY package*.json ./
# package.json과 package-lock.json 파일을 복사
RUN npm install
# 프로덕션 의존성 패키지 설치
COPY --from=builder /app/build ./build
# 빌더 스테이지에서 빌드된 파일 복사
COPY --from=builder /app/public ./public
# 정적 파일이 있는 public 디렉토리 복사
COPY --from=builder /app/server.js ./server.js
# Express 서버 파일 복사
EXPOSE 3000
# 3000번 포트 노출 (애플리케이션 실행 포트)
CMD ["node", "server.js"]
# 컨테이너 시작 시 서버 실행 명령어

nginx.conf

server {
    listen 80; # 80번 포트에서 HTTP 요청을 수신합니다
    server_name localhost; # 서버 이름을 localhost로 설정합니다

    location / {
        proxy_pass http://app:3000; # 모든 요청을 app 서비스의 3000 포트로 전달합니다 (Docker 컴포즈 서비스명 사용)
        proxy_http_version 1.1; # HTTP 1.1 버전을 사용합니다
        proxy_set_header Host $host; # 원본 호스트 헤더를 유지합니다
        proxy_set_header X-Real-IP $remote_addr; # 클라이언트의 실제 IP를 전달합니다
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 프록시 체인을 통해 전달된 IP 목록을 유지합니다
        proxy_set_header X-Forwarded-Proto $scheme; # 원본 요청의 프로토콜(http/https)을 전달합니다
    }
} 

docker-compose.yml

services:
  app:
    build: . # 현재 디렉토리의 Dockerfile을 사용하여 애플리케이션 이미지 빌드
    ports:
      - '3000:3000' # 호스트의 3000 포트를 컨테이너의 3000 포트에 매핑
    environment:
      - NODE_ENV=production # 애플리케이션 환경 변수 설정 (프로덕션 모드)

  nginx:
    image: nginx:latest # 최신 nginx 이미지 사용
    ports:
      - '80:80' # 호스트의 80 포트를 컨테이너의 80 포트에 매핑 (웹 서버 접근용)
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf # 로컬 nginx 설정 파일을 컨테이너에 마운트
    depends_on:
      - app # app 서비스가 먼저 시작된 후에 nginx 서비스 시작