목차
웹서비스를 만드는 방법은 여러가지 입니다만 아래 조합으로 가능한 부분을 찾게 되었습니다.
- 서버리스 형태로 최소한의 운영 비용이 소요될 것 - Azure Function
- 프론트엔드는 컴포넌트 재사용이 용이하고 쉽게 확장 가능할 것 - React
- 호스팅 용이 - Azure Static Web Apps
- 저장소나 데이터베이스 연계가 쉬울 것 - Azure
따라서 아래 가이드를 따라 Azure Static Web Apps에 React 앱을 배포하게 되었습니다.
https://learn.microsoft.com/ko-kr/azure/static-web-apps/deploy-react?pivots=github
그럼 저랑도 함께 따라해보겠습니다.
1. https://github.com/staticwebdev/react-basic/generate 접속하면 아래 페이지가 나오는 데, 리포지토리 이름 입력한 후 생성 버튼 클릭 (본 예제에서는 assiworks_webapps가 리포지토리 이름입니다.)
2. 잠시 후 아래와 같이 리포지토리가 생성됩니다. 리포지토리는 단순한 코드 저장소가 아니라, Azure Static Web App의 배포 및 관리를 위한 핵심 구성 요소입니다. 이를 통해 개발부터 배포까지의 전체 프로세스를 자동화할 수 있습니다.
3. 그럼 Azure Portal에서 정적 웹앱을 만들어봅니다. Static Web Apps을 검색한 후 아래 페이지에서 Create Static Web App 버튼을 클릭합니다.
4. 구독, 이름, 플랜을 설정합니다. 처음 하시는 분은 “무료” 플랜을 추천드립니다.
5. 이어서 Github 계정과 연결한 후 앞서 생성한 리포지토리랑 연결합니다. 빌드 부분에서는 기본값 (리액트)으로 설정한 후 생성하기 버튼을 클릭합니다.
6. 정상적으로 생성이 되면, 아래와 같이 Static Web App이 만들어집니다.
7. URL에 표기된 링크를 클릭하면 웹사이트에 접속이 됩니다.
리액트 기반 웹페이지 배포에 성공하셨습니다. 다음은 API를 만들어서 연동해보겠습니다.