제일 쉬운 서비스 배포, 클라우드타입에서 시작하기 — React 포트폴리오
코딩 중에 에러가 발생하여 검색을 해보면 많은 개발자 분들께서 운영 중인 개인 블로그나 포트폴리오 페이지를 볼 수 있습니다. 배포하는 방법은 가상머신에서 웹서버를 구동시키거나 컨테이너를 띄우는 등 여러 가지가 있죠. 만약 AWS의 EC2와 같은 클라우드 서비스 제공업체의 가상머신을 사용해서 페이지를 배포한다면 어떤 것들을 고려해야 할까요?
- 적절한 VM 사양(CPU, RAM 등)
- 개방 대상 포트, 서브넷 등 보안규칙 설정
- Nginx, Apache 등의 웹서버 세팅
- 배포 대상 서비스에 사용된 언어 및 라이브러리/프레임워크 설치
- HTTPS 전환을 위한 SSL 인증서 적용
나열한 것 이외에도 내가 개발한 서비스가 인터넷 세상에 공개되기까지 굉장히 많은 부분을 고려해야 합니다. 하나라도 누락되면 보안 및 안정성 측면에서 중대한 결함을 야기할 수 있기 때문이죠. 최근에는 위와 같은 고민거리들을 플랫폼에서 해결할 수 있도록 다양한 서비스가 출시되고 있습니다.
관련된 서비스 중 최근 각광 받는 것이 바로 빌드와 배포를 하나의 파이프라인에서 관리할 수 있는 Netlify, Vercel 입니다. 이는 Git 저장소의 소스를 빌드하여 배포해주는 PaaS 서비스이며 전세계의 개인 개발자 및 기업에서 폭넓게 사용되고 있습니다. 각 언어나 프레임워크의 복잡한 환경설정이나 의존성 등을 템플릿으로 추상화하여 제공하기 때문에 개발자는 버전이나 환경변수만 세팅해주면 손쉽게 배포가 가능합니다. 다만, 프론트엔드 스택으로 이루어진 정적 애플리케이션만을 배포할 수 있다는 한계가 있습니다.
클라우드타입은 Netilfy, Vercel이 지원하는 정적 어플리케이션은 물론이고 백엔드 스택까지 다양한 프레임워크를 지원합니다. Spring, Django, NodeJS 등 대중적인 웹 프레임워크와 더불어 Dockerfile을 통한 커스텀 이미지 빌드를 통해 서비스를 배포할 수 있기 때문에 막강한 확장성과 호환성을 갖추고 있습니다.
클라우드타입에서 React 페이지 배포하기
배포 실습을 위해 React로 작성된 포트폴리오 페이지를 준비하였습니다. 실습 전 클라우드타입과 Github 계정을 연동하여 가입 과정을 완료해주세요 😀
라이브 데모는 여기에서 확인할 수 있습니다.
1)본인 소유의 Github 계정의 저장소로 템플릿 저장소를 fork 합니다.
2)클라우드타입에서 Github 계정으로 로그인 후, React 템플릿을 선택합니다.
3)1)에서 fork 했던 저장소를 선택하고 프로젝트는 ‘새 프로젝트 만들기’를 선택합니다. 이어 배포하기 버튼을 클릭합니다.
4)작성한 소스에 대하여 빌드가 완료되어 웹 서비스가 구동되면 상태 값이 ‘building’ 에서 ‘running’ 으로 변경됩니다. 표시한 URL을 클릭하면 배포된 페이지를 바로 확인할 수 있습니다.
여기까지 React 포트폴리오 페이지를 배포하기 위한 모든 과정이 완료되었습니다. 복잡한 포트 및 보안규칙, 웹서버 설정 등을 거치지 않고도 클릭 몇 번 만에 페이지가 배포되었습니다. 필요한 설정은 모두 클라우드타입이 맡아서 처리하고 개발자는 서비스 개발에 집중할 수 있도록 구성된 것이죠. 앞으로 다양한 배포 실습을 업로드할 예정이오니 많은 기대 부탁드립니다🙌
다음번 포스팅에서는 React(Frontend) + Spring Boot(Backend)+MariaDB(DB) 로 구성된 CRUD 웹 서비스를 구현해보겠습니다.
감사합니다 ❤️
👉 포스트에서 다뤄지지 않은 자세한 사용 가이드는 여기를 참고 부탁드립니다 :)
