React + Spring 배포 (Cloudtype - 배포)

안녕하세요! 

이번 게시글에서는 Cloudtype을 통한 서비스 배포 방법을 공유하려 합니다.

---

📌  웹서비스 배포

웹사이트 배포 서비스의 종류

웹사이트 배포 방식은 크게 두 가지로 나뉩니다.

 

1. 정적 웹사이트 배포 서비스

• 정적 웹사이트는 HTML, CSS, JavaScript로만 구성되며, 서버에서 미리 생성된 페이지를 제공하기 때문에 사용자 입력에 따라 내용이 변경되지 않습니다.
• Netlify, Vercel, GitHub Pages, AWS S3, Firebase Hosting 등

2. 동적 웹사이트 배포 서비스

• 동적 웹사이트는 데이터베이스 및 서버와의 상호작용을 통해 사용자의 요청에 따라 화면이 바뀌고 데이터를 실시간으로 업데이트할 수 있습니다.
• Apache, AWS EC2, Nginx, Microsoft IIS 등

 

Cloudtype을 선택한 이유

제가 개발한 TalkHub는 동적 웹사이트이기 때문에 동적 웹사이트 배포 서비스를 이용해야 합니다.

이전 테스트 프로젝트에서는 AWS EC2를 사용해 배포한 경험이 있지만, 설정 과정이 복잡하고 비용 부담이 커서 더 간편한 대안을 찾고 있었습니다. 그러던 중 국내에서 제공하는 Cloudtype이라는 호스팅 서비스를 알게 되었습니다.

 

Cloudtype의 장점

1. GitHub 리포지토리 연동을 통해 쉽고 빠르게 배포 가능
2. 무료 플랜 지원 (유료 플랜 사용 시 HTTPS(TLS) 인증서 자동 발급)
3. 국내 서비스로, 이슈 발생 시 디스코드를 통한 빠른 지원 가능
4. 자동 스케일링 기능 제공

저는 Cloudtype의 가이드를 참고하여 배포를 진행했으며, 다른 게시글들을 참고한 덕분에 디스코드를 사용할 일은 없었습니다. 하지만 빠른 응답을 받을 수 있다는 점은 큰 장점이라고 생각합니다.

 

---

 

📌  Cloudtype 배포

 

저는 React, Spring Boot, Flask, MariaDB(MySQL), MongoDB를 활용하여 배포를 진행하였습니다.

클라우드타입에서 친절하게 영상으로도 배포과정을 설명해주고 있습니다. 참고하시면 되겠습니다.

 

React, Spring Boot, MariaDB 배포 방법

React, Spring Boot, MariaDB CRUD 웹 서비스 배포하기

 

저와 다른 템플릿은 아래 가이드를 참고해주세요.

참고 : 클라우드타입 가이드

소개 - 클라우드타입 Docs

 

Cloudtype 배포과정

Cloudtype 접속 및 로그인

Cloudtype 공식 사이트에 접속하여 로그인합니다.

모두의 플랫폼팀, 클라우드타입

 

---

 

프로젝트 생성 및 설정

1. 프로젝트 생성

• 좌측 프로젝트 항목에서  + 버튼을 누른 후 프로젝트를 생성합니다.

2. 프로젝트 설정

• 프로젝트가 생성되었다면 설정 버튼 클릭

• 설정 하단에 TCP 외부 접속 허용

 

---

 

데이터베이스 배포

MariaDB 배포

1. 화면 가운데 + 버튼 클릭 (모든 배포 방식이 동일하니 이후 생략)

• 서비스로 이동하여 화면 가운데 + 버튼을 클릭합니다.

 

2. 검색창에 MariaDB 입력  (모든 배포 방식이 동일하니 이후 생략)

 

 

3. 애플리케이션 설정

• 프로젝트와 버전 확인
• Root Password 입력 (반드시 기억)
• 더 많은 옵션을 클릭하여 Username과 Password를 입력 (반드시 기억)
• 결제 수단 등록
• 배포하기 클릭
• 상태가 실행 중이라고 바뀌면 배포 성공
• 빌드 중 로그와 터미널을 통해 빌드 과정을 확인할 수 있습니다.

 

4. 배포된 MariaDB 서버 확인

• 연결 탭에서 host:port 확인 (빨간선: 외부 접속용, 파란선: 내부 접속용)

 

5. 배포된 MariaDB 접속

저는 VScode에 MySQL 확장 프로그램을 설치해두었기 때문에 MySQL 확장 프로그램을 통해 배포된 MariaDB 서버에 접속해 보겠습니다. 다른 분들은 MySQL Workbench를 이용하셔도 무방합니다.

MySQL 확장 프로그램의 세부 설명에서 connect 하는 방법을 설명해주는 이미지

• Host와 Port 영역에 4. 배포된 MariaDB 서버 확인 에서 빨간선의 host:port  입력
• Username과 Password 영역에 3. 애플리케이션 설정 에서 설정한 값 입력
• 이후 하단의 Connect 부분을 눌러서 연결 확인

 

MongoDB 배포

• 배포 방식은 MariaDB와 동일하니 설명은 생략하겠습니다.
• 차이점은 MongoDB는 Root Username과 Root Password를 입력하고 더 많은 옵션은 생략하셔도 됩니다.
• MariaDB와 마찬가지로 입력한 Root Username과 Root Password를 반드시 기억해주세요.

배포된 MongoDB 접속

이번에는 MongoDB Compass를 통해 접속해 보겠습니다.

MongoDB Compass를 먼저 다운해주세요.

Try MongoDB Tools - Download Free Here

 

다운이 완료되었다면 아래 이미지가 보일겁니다. 

•  Add new connection을 클릭해주세요.

 

• URI 항목에 mongodb://{Root Username}:{Root Password}@{발급받은host:port}
• 이후 Save & Connect 버튼을 눌러서 연결 확인

 

---

 

백엔드 배포

Spring Boot 배포

1. 설정 파일 수정 (applicaton.properties 예시)

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://${DB_HOST}:${DB_PORT}/dbname?serverTimezone=UTC&characterEncoding=UTF-8
spring.datasource.username=${DB_USERNAME}
spring.datasource.password=${DB_PASSWORD}
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect
spring.jpa.hibernate.ddl-auto=update

spring.data.mongodb.uri=${MONGO_URI}

 

2. GitHub 리포지토리 선택

• 만약에 배포할 리포지토리가 안보인다면 새로운 계정 추가를 누르고 접속합니다.

• Select repositories에서 선택하여 추가한 후에 저장 버튼을 클릭합니다.

 

3. 애플리케이션 설정

• Java 버전을 배포할 프로젝트의 버전으로 변경
• 환경변수 입력 (1. 설정 파일 수정 에서 입력한 값)
• 포트번호 입력
• 배포하기 클릭
• 상태가 실행 중이라고 바뀌면 배포 성공

※ 주의할 점:

• DB_HOST와 DB_PORT는 내부 접속용을 입력해 주세요.
• 개발환경에서 환경변수를 경로로 지정한 경우 해당 파일의 내용 자체를 개행 없이 애플리케이션 설정에서 환경변수로 입력해주세요.

 

4. 배포된 Spring Boot 서버 확인

• 배포된 Spring Boot에서 상단에 접속하기 또는 연결 탭에서 도메인 클릭

 

5. 배포된 Spring Boot 서버 접속

접속했을 때  50X 페이지가 안뜬다면 정상적으로 배포가 완료된겁니다.

 

Flask 배포

• Flask의 경우도 Spring Boot의 배포방식과 동일합니다.
• 환경변수에 FLASK_ENV의 값은 그대로 사용하시면 됩니다.

배포가 정상적으로 완료되지 않고 접속 시 503 Error가 발생한다면 requirements.txt 파일이 없거나 파일 내부에 패키지 정보가 누락된 경우입니다. requirements.txt 파일을 생성해주세요. 

pip3 freeze > requirements.txt

# Pipenv를 사용하는 경우
pipenv requirements > requirements.txt

 

참고: 클라우드타입 TROUBLESHOOTING - Python

Python - 클라우드타입 Docs

 

---

 

프론트엔드 배포

React 배포

1. API 도메인 수정

• 개발 환경의 백엔드 도메인 주소를 배포된 주소로 변경 (Spring Boot, Flask)

2. GitHub 리포지토리 선택

 

3. 애플리케이션 설정

• 환경변수 항목에 .env에서 설정한 변수들의 값을 입력해줍니다.
• 환경변수의 이름은 REACT_APP_로 시작해야 합니다.
• .env 파일은 업로드하지 마시고 배포하셔야 합니다.
• Build command 항목에 npm run build를 입력해 주세요.

 

4. 배포된 React 서버 확인

 

---

 

배포 후 최종 점검

1. CORS 설정:
   • 백엔드에서 CORS 설정을 배포된 프론트엔드 도메인으로 변경
2. 오픈 API 사용 시 도메인 설정 조정
3. 정상 접속 여부 확인:
   • 프론트엔드 → 백엔드 API 호출
   • 데이터베이스 연결 상태 점검

 

---

 

서버 배포 과정에서 개발환경과 배포환경의 차이로 인해 예상치 못한 오류가 발생했지만, 다행히 Cloudtype의 가이드라인과 다른 분들의 게시물을 참고하여 신속하게 해결할 수 있었습니다.

아직 정식 도메인은 연결하지 않았지만, 세부적인 디자인 수정과 소소한 오류를 보완한 후 도메인을 연결할 예정입니다.

이번 글이 여러분께 도움이 되었기를 바랍니다.
오늘도 행복한 하루 되세요!