compose.yaml 파일을 이용하여 간단한 페이지 만들어보기 | back-end

사실, Back-end라고 해서 Front-end와 큰 차이가 있는 것은 아니다. 대부분 동일한 구성형태로 작성을 하듯이, image, working_dir, volume, ports 등을 작성해준다.

차이가 있다면, Front-end에서는 node Image를 사용했다면 Back-end에서는 nginx Image를 사용한다. 그리고 ports는 8080으로 사용을 하는데 이렇게 사용하는데 있어서는 큰 의미가 있지는 않다. 이전부터 개발자분들이 8080을 port로 사용하게 되면서 일반적으로 사용하게 되었다고 알고 있다.

volume은 ./backend 경로에 개발된 내용을 컨테이너에 전달하도록 했는데, 만약 compose.yaml을 실행한 상황에서 해당 폴더에 backend 파일이 없으면 자동으로 생성이 되게끔 한다.

나머지 부분에 대해서는 동일하다. 아래는 이를 적용한 전체적인 code이다.

services:
  # Front-end
  app-front:
    image: node:latest
    working_dir: /usr/src/app
    ports:
      - 3000:3000
      - 35729:35729
    volumes:
      - ./app:/usr/src/app
    command: yarn start
    depends_on:
      - app-db
    environment:
      - NODE_ENV=development
    networks:
      - app-networks
    develop:
      watch:
        - path: /app/package.json
          action: rebuild
        - path: /app
          target: /usr/src/app
          action: sync

  # back-end
  app-back:
    image: nginx:alpine
    working_dir: /usr/src/app
    ports:
      - 8080:8080
    volumes:
      - ./backend:/usr/src/app
    depends_on:
      - app-db
    environment:
      - NODE_ENV=development
    networks:
      - app-networks

  # Nginx
  app-nginx:
    image: nginx:alpine
    ports:
      - 80:80
    volumes:
      - ./app/build:/usr/share/nginx/html
    depends_on:
      - app-front
    networks:
      - app-networks

  # Database
  app-db:
      image: mongo:latest
      ports:
        - 27017:27017
      networks:
        - app-networks

networks:
  app-networks:
    driver: bridge

 

이렇게 작성한 후에 terminal 에서 docker compose up을 입력하면 위 컨테이너를 실행하기 위해 관련 이미지를 다운받아 웹페이지 서버를 동작 시킨다. 그러고 나서 localhost:3000을 입력하면 접속이 된다.

이제 front-end 를 꾸미면 간단한 페이지를 만들 수 있다.