Test
test
Jun 28, 2023
![Test](https://inblog.ai/_next/image?url=https%3A%2F%2Finblog.ai%2Fapi%2Fog%3Ftitle%3DTest%26logoUrl%3Dhttps%253A%252F%252Finblog.ai%252Finblog_logo.png%26blogTitle%3Dcloudtype&w=1920&q=75)
클라우드타입에서 리액트(React) 애플리케이션을 배포하는 방법입니다. 🧑🏻💻 아래의 가이드에 따라 템플릿을 통해 서비스를 배포해보세요. 시간은 3-5 분 가량 소요됩니다. 😺
1. 템플릿 선택하기
- 시작하기 페이지의 프론트엔드 카테고리에 접속 또는
⌘ + K
를 사용하여 React 를 검색하고 원하는 React 템플릿을 클릭하세요. 🖱️
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fea166d73-4a63-4fc0-a7b8-017fbfeade6f%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2022-10-25_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_4.36.59.png%3Ftable%3Dblock%26id%3Dabd5d067-7e01-4370-a2b0-ffc43fceffab%26cache%3Dv2&w=3840&q=75)
같은 언어나 플랫폼도 세부 구성 및 프레임워크의 종류에 따라 여러 개의 템플릿이 있을 수 있습니다. 템플릿의 ‘예제코드’ 를 살펴보고 자신에게 필요한 템플릿을 선택하세요.
2. 새 저장소(repository) 생성하기 또는 나의 저장소 선택하기
클라우드타입은 기본적으로 사용자 Github 계정의 repository의 소스를 배포합니다. 1️⃣ 배포하려는 저장소가 없다면 ⇒ 클라우드타입이 제공하는 예제 저장소를 사용자의 Github 계정에 생성합니다. 2️⃣ 배포하려는 저장소가 있다면 ⇒ 클라우드타입에서 해당 저장소를 선택합니다
1️⃣ 배포하려는 저장소가 없는 경우
- 아래의 그림처럼 ‘비공개 저장소 설정하기’ 여부만 선택한 후 ‘저장소 만들기’ 를 클릭하면 사용자의 Github계정에 해당 템플릿의 저장소가 자동으로 생성됩니다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fb43d644e-c3a5-412c-b082-bc7e275a7261%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2022-10-25_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_5.46.07.png%3Ftable%3Dblock%26id%3D098e3a12-888a-470e-9feb-737b427ac99e%26cache%3Dv2&w=3840&q=75)
‘비공개 저장소를 생성하기' 로 생성한 경우, 시간이 흐른 후 GitHub App 과의 연결이 만료되어 자동 업데이트가 이루어지지 않을 수 있습니다. 이런 경우 ‘GitHub 로그인하기’ 를 통해 클라우드타입에 로그인하면 자동으로 연결이 갱신됩니다.
2️⃣ 배포하려는 저장소가 있는 경우
- Github 계정에 존재하는 저장소를 사용하려는 경우 아래의 화면처럼 여러 저장소 중 배포를 희망하는 원하는 항목을 선택하세요. 이미 위에서 저장소를 만든 경우 이 부분은 건너뛰어주세요 😃
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F1f0d445a-fca6-4b8d-865e-8beeda48fb68%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2022-10-25_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_6.04.19.png%3Ftable%3Dblock%26id%3D005b15fa-dfc5-45f0-ad52-68498dd011b5%26cache%3Dv2&w=3840&q=75)
저장소를 직접 선택한 경우, 빌드 및 시작을 위한 명령어 등 세부 설정이 기본 설정과 다를 수 있습니다. 아래의 그림처럼 빌드 설정의 ‘설정변경’ 버튼을 클릭하고 수정이 필요한 설정사항을 수정해주세요.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F78e16c3b-734e-49ac-8002-c5701099a7c6%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2022-10-26_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_2.54.00.png%3Ftable%3Dblock%26id%3D6b4783f7-2b85-4fa8-af75-cf9dc2e06e4a%26cache%3Dv2&w=3840&q=75)
클라우드타입은 배포 과정 이외의 작업을 목적으로 사용자의 GitHub 계정에 접근하거나 소스 코드를 저장하지 않으며, 최소한의 권한으로 안전하게 관리됩니다.
3. 배포하기
- 마지막으로 배포할 리전을 선택하고 ‘배포하기’ 버튼을 클릭하면 배포가 자동으로 진행됩니다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F046cd2f5-bea7-4ff0-8eb7-4cc66f3f11e3%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2022-10-26_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_3.14.09.png%3Ftable%3Dblock%26id%3D39877647-53eb-4686-bd77-362c5513a968%26cache%3Dv2&w=3840&q=75)
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F340a96dd-417c-4093-b9ea-75266dc01b9a%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2022-10-26_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_3.21.55.png%3Ftable%3Dblock%26id%3D283269c5-b38b-46df-a1fd-4ea6e617613b%26cache%3Dv2&w=3840&q=75)
표시되는 팝업창에서 실시간으로 배포가 진행되는 과정을 로그로 확인하실 수 있으며, 페이지를 이동하더라도 배포 과정에는 영향을 끼치지 않습니다. ‘서비스로 이동’ 버튼을 클릭하고 프로젝트 패널로 이동하세요. 👌
4. 관리하기
- 빌드와 배포가 완료되면, 프로젝트 패널에서 내가 배포한 애플리케이션을 아래와 같이 관리할 수 있습니다. 빌드 시간은 상황에 따라 3~5 분 정도 걸릴 수 있습니다. 잠시만 기다려주세요. 🙏
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fe0fac365-da4c-4e40-858d-053c80d9cadb%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2022-10-31_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_12.28.08.png%3Ftable%3Dblock%26id%3Db561a4a8-97fc-486d-8173-aaeb47777ad9%26cache%3Dv2&w=3840&q=75)
프로젝트 패널 및 애플리케이션 상세페이지에서 사용할 수 있는 다양한 기능들에 대한 자세한 사용법은 클라우드타입 이용가이드를 참고해주세요.
5. 코드 수정 후 재배포하기(업데이트하기)
- 최초 배포 후 코드 수정 등의 사항이 Github 저장소에 반영된 경우, 아래의 그림과 같이 애플리케이션 상세페이지의 ⚙︎ 아이콘을 클릭한 후 하단부의 ‘배포하기’ 버튼을 클릭하세요. 수정된 사항들을 반영하여 재배포(업데이트)가 이루어집니다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F719d524c-79cb-44d7-8f64-7b682c18690a%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2022-10-31_%2525E1%252584%25258B%2525E1%252585%2525A9%2525E1%252584%252592%2525E1%252585%2525AE_12.05.14.png%3Ftable%3Dblock%26id%3D4f6741f9-3577-449f-91af-5345cac7a6e0%26cache%3Dv2&w=3840&q=75)
Share article