🖥 Front-end

• react.js - typescript based, mobx 사용
• webpack적용 - 코드스플리팅(Lazy loading) 및 code Compress 적용

• 방만들기 클릭 시 uuid를 인자로 임시 링크 생성

• 임시링크에 들어온 사람들과 지도 내용 공유

  • /topic/uuid로부터 수신한 정보 렌더링

• naver Map API 사용

  Web Dynamic Map - Maps

  • Mobx를 통한 상태 관리

• 현위치 pub : setInterval을 통해 주기적으로 현재위치 produce (@kafka)

• 같은 링크에 접속한 사용자 위치정보 sub : websocket + spring kafka Consumer (SockJS)

⌨️ Back-end

• Kafka producing

  • 카프카 토픽 지정 : location
  • 카프카 템플릿을 통한 produce
  • 구분자기준 String value produce / consume

• Kafka Consuming

  • @KafkaListener
  • 컨슘과 동시에 /topic/${uuid}로 webSocket broadcasting
  • 프론트 단에서는 webSocket subscribe(SockJS)
    • 수신받은 메세지를 토대로, 지도에 마커 렌더링

• Websocket

  • endpoint : ws://${baseURL}/ws/location
  • webSocket subscribe Topic : /topic/uuid

  @Configuration
  @EnableWebSocketMessageBroker
  public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
  
      @Override
      public void registerStompEndpoints(StompEndpointRegistry registry) {
          registry.addEndpoint("/ws/location")
                  .setAllowedOriginPatterns("*")
                  .withSockJS();
      }
  
      @Override
      public void configureMessageBroker(MessageBrokerRegistry registry) {
          registry.enableSimpleBroker("/topic");
          registry.setApplicationDestinationPrefixes("/app");
      }
  }
  

🏠 Infra

• Kafka Set-up

  • docker-compose

   version: '2'
   services:
     zookeeper:
       image: wurstmeister/zookeeper
       ports:
         - "2181:2181"
     kafka:
       build: .
       ports:
         - "9092:9092"
       environment:
         KAFKA_ADVERTISED_HOST_NAME: 127.0.0.1
         KAFKA_CREATE_TOPICS: "whereRU:1:1"
         KAFKA_ZOOKEEPER_CONNECT: zookeeper:2181
        volumes:
          - /var/run/docker.sock:/var/run/docker.sock
  

• Docker File

  • Spring

  FROM adoptopenjdk/openjdk11
  CMD ["./mvnw", "clean", "package"]
  ARG JAR_FILE_PATH=target/*.jar
  COPY ${JAR_FILE_PATH} app.jar
  ENTRYPOINT ["java", "-jar", "app.jar"]
  
  # build
  # docker build -t spring-where-r-u .
  
  # run
  # docker run -it spring-where-r-u
  

  • React

  FROM node:16.14.0 as builder
  
  RUN mkdir /usr/src/app
  WORKDIR /usr/src/app
  ENV PATH /usr/src/app/node_modules/.bin:$PATH
  COPY package.json /usr/src/app/package.json
  
  RUN yarn install --silent
  
  # source -> working directory copy
  # run
  COPY . /usr/src/app/
  CMD ["yarn","start"]
  
  # build
  # docker build -t react-where-r-u .
  
  # Command
  # docker run -it -p 8081:8081 -p 127.0.0.1:8090:8090 react-where-r-u
  

• docker-compose.yml

version: '3.7'

services:
  react:
    build: 
      context: ./web/
      dockerfile: Dockerfile
    image: react
    container_name: where-r-u-react
    ports:
      - "8081:8081"

  zookeeper:
    image: wurstmeister/zookeeper
    ports:
      - "2181:2181"
    container_name: zookeeper
    
      
  kafka:
    build: 
      context: ./kafka/
      dockerfile: Dockerfile
    image: kafka-docker_kafka
    container_name: kafka
    ports:
      - "9092:9092"
    environment:
      KAFKA_ADVERTISED_HOST_NAME: host.docker.internal
      KAFKA_CREATE_TOPICS: "whereRU:1:1"
      KAFKA_ZOOKEEPER_CONNECT: zookeeper:2181
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    depends_on:
      - zookeeper
    
  spring:
    build:
      context: ./server/whereRU/
      dockerfile: Dockerfile
    image: where-ru-spring
    container_name: spring
    environment:
      - spring.kafka.bootstrap-servers=kafka:9092
    ports:
      - "8090:8090"
    depends_on:
      - kafka