2023. 1. 31. 03:39ㆍFront-end/React.js
서론
개발한 앱을 PC에서 작동시킬수도 있지만, 만약 이 앱이 24시간 365일 작동해야 한다면 컴퓨터의 전원이 절대로 꺼지면 안될 것입니다. 또한 앱의 이용자가 기하급수적으로 늘어나면 컴퓨터의 CPU, 램, 저장장치 등을 추가해야 할 수도 있습니다. 이러한 환경을 개인이 구축하기에는 다소 힘들기 때문에, 앱을 제 3자에게 제공하여 사람들이 언제든지 자유롭게 앱을 사용할 수 있도록 배포할 수도 있습니다.
React 앱을 배포하는 방법은 다음과 같습니다.
1. Github pages
Github에서 기본으로 제공하는 서비스입니다.
2. Netlify
정적 웹사이트를 배포하는 서비스입니다.
3. Firebase
정적 웹사이트를 배포하는 서비스입니다.
이 문서에서는 Netlify로 React 앱을 배포하는 방법을 설명합니다.
1. Netlify 회원가입 및 Repository 연동
1) Netlify에 접속해서 회원가입을 합니다.
Develop and deploy websites and apps in record time | Netlify
Accelerate the time to deploy your websites and apps. Bring your integrations and APIs together on one powerful serverless platform. Get started for free!
www.netlify.com
2) Sites에 접속해서 Add new site - Import an existing project를 클릭합니다.
3) Github의 Repository중에서 React 프로젝트에 해당하는 Repository를 선택합니다.
4) 배포할 branch를 main으로 선택합니다. React 프로젝트를 빌드해야하기 때문에 Build command에 'npm build'를, Publish directory를 'build'로 설정합니다.
2. React 앱 배포
여기까지 설정을 다 하시면 Netlify가 알아서 북치고 장구쳐서 사이트를 배포해줍니다
'Front-end > React.js' 카테고리의 다른 글
| React를 프로젝트와 컴포넌트 단위에서 설계하기 (0) | 2023.12.28 |
|---|---|
| [React] 컴포넌트 내부에서 CSS를 쉽게 스타일링 하기: Emotion (0) | 2023.05.12 |
| [React] 웹 페이지에 차트 만들기: React-Google-Charts (0) | 2022.09.28 |
| [React] Bootstrap 프레임워크를 React에서 사용하기: React-bootstrap (0) | 2022.09.10 |
| [React] 함수형 컴포넌트에서 상태를 변화시키기: useState() (0) | 2022.08.31 |