3-tier architecture(1)

3-tier architecture

• 3-tier architecture
  • 표현 계층(FE)
    • 일반 사용자가 직접 엑세스 할 수 있는 계층
  • 논리 계층(BE)
    • 비지니스 로직이 실행되는 계층
  • 데이터 계층(DB)
    • 응용 프로그램 데이터에 대한 엑세스를 제공하는 계층

Spring Boot, React.js, MySql

• docker-compose 파일 구성해보기
  • step 1 ] DB 서버 구성
  • step 2 ] back-end 서버 구성
    • 업데이트시 docker push
  • step 3 ] front-end 서버 구성
    • 업데이트시 docker push

DB 서버 구성

• mysql:latest 사용
• 에플리케이션에서 사용할 database 설정 (three_tier 스키마)
• root password 설정

• port 설정

• 구성 된 compose 조각
  • docker-compose.yml 공유시 .env 파일도 함께 전달하여 환경에 맞게 변수설정을 가능하게 설정

  mysql-data-base:
    image: mysql:latest
    restart: always
    environment:
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
    ports:
      - "${MYSQL_PORT}:3306"
    networks:
      - my_network

Spring 서버 구성

• 구성된 DB 서버를 의존하는 서비스 구현(three_tier 스키마 사용)

• 백엔드 로컬 개발과 프론트 로컬 개발용으로 배포되는 두가지 환경만을 고려하여 프로퍼티 구성

• back-end 개발용 설정

server:
  port: 8080

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/three_tier
    username: root
    password: root
  jpa:
    show-sql: true
    open-in-view: false
    hibernate:
      ddl-auto: validate
  flyway:
    user: root
    password: root
    clean-disabled: true

• front-end 개발용 설정
  • docker-compose.yml 공유시 .env 파일도 함께 전달하여 환경에 맞게 변수설정을 가능하게 설정

server:
  port: ${SPRING_SERVER_PORT}
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: ${SPRING_DATASOURCE_URL}
    username: ${SPRING_DATASOURCE_USERNAME}
    password: ${SPRING_DATASOURCE_PASSWORD}
  jpa:
    show-sql: true
    open-in-view: false
    hibernate:
      ddl-auto: validate
  flyway:
    user: ${SPRING_DATASOURCE_USERNAME}
    password: ${SPRING_DATASOURCE_PASSWORD}
    clean-disabled: true

• 구성된 compose up 조각

  back-end:
    image: shguddnr3/spring:v3
    restart: always
    ports:
      - "${SPRING_SERVER_PORT}:${SPRING_SERVER_PORT}"
      - "8080:8080"
    depends_on:
      - mysql-data-base
    environment:
      - SPRING_DATASOURCE_URL=jdbc:mysql://mysql-data-base:${MYSQL_PORT}/${MYSQL_DATABASE}
      - SPRING_DATASOURCE_USERNAME=${SPRING_DATASOURCE_USERNAME}
      - SPRING_DATASOURCE_PASSWORD=${SPRING_DATASOURCE_PASSWORD}
      - JAVA_OPTS=-Dserver.port=${SPRING_SERVER_PORT}
    networks:
      - my_network

React 서버 구성

• 백엔드에서 데이터를 요청하고 input 리스트 박스로 보여주는 화면 구성
  • 참고 ] React.js, 스프링부트, AWS로 배우는 웹 개발 101
  • 환경 변수는 적용하지 않고 추후 프론트 개발자와 협력시 어떻게 구성할지 상의
• 구성된 compose up 조각

  front-end:
    image: shguddnr3/react:v3
    restart: always
    ports:
      - "3000:3000"
    depends_on:
      - back-end
    environment:
      - REACT_APP_BACKEND_API_URL=http://localhost:${SPRING_SERVER_PORT}
    networks:
      - my_network

구성된 docker-compose.yml

• networks
  • 컴포즈업 내의 컨테이너들이 서로 통신할 수 있도록 하나의 네트워크로 묶어준다.

version: '3.8'

services:

  mysql-data-base:
    image: mysql:latest
    restart: always
    environment:
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
    ports:
      - "${MYSQL_PORT}:3306"
    networks:
      - my_network

  back-end:
    image: shguddnr3/spring:v3
    restart: always
    ports:
      - "${SPRING_SERVER_PORT}:${SPRING_SERVER_PORT}"
      - "8080:8080"
    depends_on:
      - mysql-data-base
    environment:
      - SPRING_DATASOURCE_URL=jdbc:mysql://mysql-data-base:${MYSQL_PORT}/${MYSQL_DATABASE}
      - SPRING_DATASOURCE_USERNAME=${SPRING_DATASOURCE_USERNAME}
      - SPRING_DATASOURCE_PASSWORD=${SPRING_DATASOURCE_PASSWORD}
      - JAVA_OPTS=-Dserver.port=${SPRING_SERVER_PORT}
    networks:
      - my_network

  front-end:
    image: shguddnr3/react:v3
    restart: always
    ports:
      - "3000:3000"
    depends_on:
      - back-end
    environment:
      - REACT_APP_BACKEND_API_URL=http://localhost:${SPRING_SERVER_PORT}
    networks:
      - my_network

networks:
  my_network:
    driver: bridge

compose-up 결과

• 프론트 확인

• 컴포즈업으로 올린 front-end 3000 포트가 back-back-end 8080 포트에 데이터를 요청해 리스트를 뿌려줌

• 개선해야될점
  • React.js 환경변수 관리 방법
  • 스프링 서버가 첫 실행에 mysql connect 를 못해 restart: always를 여러번 반복하는 문제
  • nginx서버를 프록시로 두고 구성하는 방법 고려