React, Spring Boot, MariaDB CRUD 웹 서비스 배포하기
프론트엔드와 백엔드. 개발자로 일하고 계시거나 개발을 배우고 계신 분들께는 매우 친숙한 용어이죠.이번 포스팅에서는 두 가지 용어가 의미하는 바에 대해 다뤄보겠습니다. 후반부에서는 React(프론트엔드)와 Spring Boot(백엔드), 그리고 MariaDB 을 연동하여 식당의 웨이팅 리스트를 만드는 재미있는 실습이 기다리고 있으니 끝까지 함께해주세요😄
혹시 지난 포스트를 아직 읽지 않으신 분께서는 아래 링크로 접속하시어 먼저 읽고 오시면 이해에 도움이 됩니다💡
프론트엔드 / 백엔드
프론트엔드는 웹 서비스에서 사용자가 클릭하거나 정보를 입력하는 부분, 백엔드는 사용자의 눈에 보이지 않는 곳에서 데이터와 로직을 처리하는 무언가(?) 라고 많은 분들이 이해하고 있습니다. 가장 직관적으로 두 측면을 정의하고 있는 문장이죠. 이러한 정의도 틀린 것은 아니지만 좀 더 구조적인 관점에서 프론트엔드와 백엔드를 다시 한 번 살펴 보겠습니다.
프론트엔드는 브라우저에서 사용자의 요청(request)을 수신하는 첫 부분이며, 백엔드에서 전달받은 결과(response)가 보여지는 부분입니다. 생성/수정/삭제 기능이 있는 버튼, 텍스트를 입력할 수 있는 필드 등도 모두 포함됩니다. 넓은 의미로는 사용자가 상호작용 할 수 있는 브라우저상의 모든 요소를 가리키지만 지금은 사용자의 요청을 어떻게 백엔드에 잘 전달할지에 대해 촛점을 맞춰보도록 하겠습니다. 프론트엔드 영역을 구현하는 대표적인 기술은 다음과 같습니다.
- React
- Angular
- Vue
- Svelte
백엔드는 로직에 따라 사용자의 요청을 처리하는 부분과 생성된 데이터를 영속성 계층에서 관리하는 부분을 모두 포함합니다. 구글 검색창에 “클라우드타입” 이라는 단어를 입력 후 검색 버튼을 누르면 어떤 일이 일어날까요? 클라이언트를 떠난 입력값은 서버에 전달되어 데이터베이스로 하여금 연관 검색결과를 색인하게 됩니다. 이렇게 필터링된 결과 데이터가 프론트엔드에 전달되어 HTML, CSS, JS 등으로 페이지가 구성된 후 브라우저에서 볼 수 있게 되는 것이죠. 백엔드 영역을 구현하는 언어와 프레임워크는 매우 다양하며 한 언어에서 다양한 프레임워크가 파생되기도 합니다.
- Java — Spring Boot
- Python — Flask, Django
- JavaScript — Express, Fastify
- Ruby — Ruby on Rails
컨테이너 네트워크 구성
본격적인 서비스 배포 실습에 앞서 컨테이너 네트워크 구성에 대한 내용을 다뤄보도록 하겠습니다. Docker와 Kubernetes 등 컨테이너 기반의 인프라 운용이 대세가 되어가는 현재, 개발자도 네트워크 구성을 어느 정도 이해하여야만 환경에 맞는 서비스 구성 및 설정이 가능합니다.
위 그림은 Docker 엔진에서 bridge 방식으로 IP를 컨테이너에 할당한 것을 다이어그램으로 표현한 것인데, 172.17.0.1 이라는 Gateway를 가진 네트워크에 프론트엔드, 백엔드, DB가 함께 위치한 상태를 나타내고 있습니다. (일반적으로 Docker 엔진에서는 컨테이너의 생성 순서에 따라 IP가 부여됩니다.) AWS EC2의 Private IP와 같이 내부적으로만 통신할 수 있는 네트워크가 구성된 것이라고 볼 수 있겠죠. 이 상태에서 컨테이너는 IP 주소 뿐만 아니라 Hostname으로도 자유롭게 통신이 가능합니다.
클라우드타입은 프로젝트 내의 스테이지 단위로 네트워크 대역을 관리하고 있습니다. 크게는 서비스의 종류별로, 작게는 서비스 내에서 운영/개발 스테이지를 분리하여 네트워크가 구성되기 때문에 서비스 간 일어날 수 있는 오통신이나 장애에 대한 염려는 하지 않으셔도 됩니다👍
React, Spring Boot, MariaDB 서비스 배포하기
직접 서비스를 배포하며 프론트엔드와 백엔드의 개념을 되짚어보도록 하겠습니다. 실습을 위해 식당 웨이팅리스트 서비스를 React, Spring Boot, MariaDB로 구성하였습니다.
배포를 하는 방법과 툴에는 여러 가지가 있습니다. 이번에는 그 중 컨테이너 방식으로 프론트엔드와 백엔드, DBMS를 손쉽게 구성할 수 있는 클라우드타입을 활용하여 실습을 진행하겠습니다.
👉 라이브 데모는 여기에서 확인하실 수 있습니다.
1)다음의 Github 저장소에서 프론트엔드, 백엔드 소스코드를 자신의 Github 계정에 fork 하거나 로컬에서 clone 한 후 Github 원격 저장소에 commit 합니다.
2)클라우드타입에서 MariaDB 템플릿을 선택한 후 설정변경-고급설정 으로 들어가 다음의 값을 입력합니다.
- Root Password : root
- Database Name : testdb
3)MariaDB의 구동이 완료된 후 Spring Boot 템플릿을 선택하여 설정변경을 클릭합니다. 여러 항목 중 표시한 부분을 변경/입력 한 후 배포를 진행합니다.
- Github 저장소 : 링크에서 fork 한 cloudtype-backend-template 선택
- 버전 : v11
- 환경변수 : DB_HOST — mariadb, DB_PORT — 3306, DB_USERNAME — root, DB_PASSWORD — root
- 프로젝트는 반드시 1)과 같이 설정하여 배포한 MariaDB의 프로젝트를 선택
4)마지막으로 React 템플릿을 선택한 후 설정변경-고급설정 으로 들어가 다음의 값을 입력합니다.
- Github 저장소 : 링크에서 fork 한 cloudtype-frontend-template 선택
- 환경변수 : REACT_APP_WAITLIST_API_URL — (Spring Boot 앱 선택 후 URL 복사한 것)/api/guests
- 프로젝트는 반드시 1)과 같이 설정하여 배포한 MariaDB의 프로젝트를 선택
모든 배포과정이 정상적으로 완료되었다면 서비스를 직접 브라우저를 통해 확인하실 수 있습니다! 실습에 참여해주신 모든 분들 고생 많으셨습니다 👏
클라우드타입은 더 유익한 포스트와 실습으로 돌아오겠습니다. 감사합니다 ❤️
👉 포스트에서 다뤄지지 않은 자세한 사용 가이드는 여기를 참고 부탁드립니다 :)
