nginx, nextjs(client, admin), nest.js 심심해서 만들어봄

 

nestjs와 nextjs를 공부하던 도중 문득 해보고 싶은것이 생겼다.

 

한 디렉터리안에 관리자 페이지는 nextjs, 사용자 페이지는 nextjs, api 서버는 nestjs로 만들어 보고싶어졌다

(다음에는 DB까지 해봐야지)

 

이것을 nginx까지 추가하여 각 dockerfile 을 만들고 docker-compose로 한번에 실행하는것이 가능할까,,

 

우선 가능하다. 진짜 삽질 엄청했다. 

 

<역할 설명>

우선 nginx의 역할은 다음과 같다.

• /api 경로로 요청이 들어오면 nestjs로 요청을 보내준다.
• /admin의 경로로 요청이 들어오면 admin 디렉터리의 nextjs를 연결한다.
• 그 외의 요청은 모두 client의 nextjs를 연결해준다.

admin 디렉터리의 역할

• /admin 디렉터리에 nextjs를 설치한다.
• 사이트의 관리자로 로그인하여 관리자 권한 작업을 수행한다

client 디렉터리의 역할

• 일반 사용자가 사이트에 접속했을때 화면을 보여준다.
• /client 디렉터리에 nextjs를 설치한다.

api 디렉터리의 역할

• /api 디렉터리에 nestjs를 설치한다.
• 클라이언트 또는 admin 페이지에서 api 요청시 nestjs 서버에서 응답을 한다.

 

<디렉터리 구조>

/    - root

/docker-compose.yml    - docker compose 파일

/default.conf    - nginx 설정 파일

 

/admin    - 관리자 페이지, nextjs 설치

/admin/dockerfile - nextjs docker 이미지

 

/client    - 일반 사용자 페이지, nextjs 설치

/client/dockerfile    - nextjs docker 이미지

 

/api    - nestjs 설치

/api/dockerfile    - nestjs docker 이미지 

 

 

 

<docker-compose 설정 내용>

version: '3.8'

services:
  nginx-server:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf
    links:
      - admin-front
    restart: always

  api-server:
    build:
      context: ./api-server
      dockerfile: Dockerfile
    ports:
      - "4000:4000"
    volumes:
      - ./api:/usr/src/app
    command: npm start

  admin-front:
    build:
      context: ./admin
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./admin:/usr/src/app
    command: npm run dev

  client-front:
    build:
      context: ./client
      dockerfile: Dockerfile
    ports:
      - "2000:2000"
    volumes:
      - ./client:/usr/src/app
    command: npm run dev

 

 

<nextjs dockerfile 설정 내용>

FROM node:22

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

CMD ["npm", "run", "dev"]

 

 

<nestjs dockerfile 설정 내용>

FROM node:22

WORKDIR /usr/src/app

COPY package*.json ./
RUN npm install

RUN npm install -g nodemon

CMD ["npm", "start"]

 

 

<nginx 설정 내용>

server {
    listen 80;

    location /api {
        proxy_pass http://api:4000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /admin {
        proxy_pass http://admin:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location / {
        proxy_pass http://client:2000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

}

 

 

admin의 nextjs는 basepath를 이용해야 static 파일을 정상적으로 로드할 수 있다.