Cleavr로 모노레포를 배포하는 방법

Cleavr.io을 사용하여 단일 저장소 프로젝트를 배포해 봅시다!

이 가이드에서는 Strapi의 데모 애플리케이션Food Advisor을 사용합니다.

이 데모 애플리케이션에는 다음과 같은 설정이 있습니다.

프런트 엔드: React.js

백엔드: Strapi v4

노드 버전: v16

데이터베이스: SQLite - 이 예에서는 db 서버를 설정할 필요가 없습니다

.

이 데모에서는 Strapi repostrapi/foodadvisor를 포크했습니다. 그러나 계정으로 분기하는 대신 이 공개 리포지토리에서 직접 배포해도 괜찮습니다.

1단계: 서버 프로비저닝

Cleavr.io에서 새 서버를 프로비저닝합니다. Strapi는 배포 중에 앱을 빌드하는 데 약간 더 많은 주스가 필요하므로 몇 개의 코어가 있는 서버를 배포합니다.

1코어 서버를 사용해도 괜찮을 수 있지만 배포 중에 'JavaScript Heap Out Of Memory'가 표시되면 GitHub Actions를 활성화하거나 더 강력한 서버를 프로비저닝해야 합니다.

2단계: Strapi 백엔드 사이트 추가

서버가 프로비저닝되면 새 Strapi 4 사이트를 추가하십시오.

노드가 서버에 아직 설치되지 않은 경우 노드 버전을 16으로 설정해야 합니다.

또한 포트 번호를 1337로 설정해야 합니다. 앱에 이 포트가 하드 코딩되어 있으므로 명시적으로 1337로 설정해야 합니다. 또는 사이트에 할당된 포트를 참조하도록 코드를 업데이트할 수 있습니다.



추가를 클릭하여 백엔드 Strapi 사이트를 서버에 추가합니다.

3단계: NodeJS SSR 프런트엔드 사이트 추가

백엔드 사이트 설치가 완료되면 프런트엔드 사이트를 추가합니다.

프런트엔드는 React.js/Next.js를 사용하므로 새 사이트를 NodeJS SSR로 설정하겠습니다.

다음 구성을 설정해야 합니다.

진입점: npm

인수: start

유물 경로: .next

추가를 클릭하여 프런트엔드 Next.js 사이트를 서버에 추가합니다.

4단계: Strapi 웹 앱 구성 및 배포

이제 서버에 프런트엔드 및 백엔드 사이트가 있으므로 웹 앱 섹션으로 이동하여 웹 앱을 추가로 구성한 다음 배포합니다.

리포지토리 구성

웹앱 섹션에서 백엔드 사이트를 클릭하고 설정 > 저장소 탭으로 이동합니다.

GitHub 버전 제어 공급자를 선택하고 다음 구성을 설정합니다.

저장소: strapi/foodadvisor

배포할 분기: master

앱 폴더: api

업데이트를 클릭하여 설정을 저장합니다.

환경 변수 구성

그런 다음 환경 탭으로 이동하여 다음 변수를 추가합니다.

HOST=0.0.0.0
PORT=1337
STRAPI_ADMIN_CLIENT_URL=http://your.backendurl.here
STRAPI_ADMIN_CLIENT_PREVIEW_SECRET=ARNFCb9zrC9ZHm5hZzCigWivD40icS4s

URL을 'http'로 남겨두고 'https'를 사용하면 URL이 깨집니다.

동기화를 클릭하여 저장합니다.

시드 DB 배포 후크 추가

다음으로 배포 후크 섹션에서 db를 시드할 새 배포 후크를 추가합니다.

새 후크를 만들고 제목을 추가한 후 다음을 입력합니다.

cd {{ releasePath }}/api
yarn seed

빌드 후크 바로 뒤에 후크를 배치합니다.

배포

제출할 시간입니다!

배포 탭으로 이동하여 백엔드를 배포합니다.

5단계: NodeJS SSR 웹 앱 구성 및 배포

이제 프런트엔드 웹앱을 구성해 보겠습니다.

리포지토리 구성

웹앱 섹션에서 프런트엔드 사이트를 클릭하고 설정 > 저장소 탭으로 이동합니다.

GitHub 버전 제어 공급자를 선택하고 다음 구성을 설정합니다.

저장소: strapi/foodadvisor

배포할 분기: master

앱 폴더: client

업데이트를 클릭하여 설정을 저장합니다.

환경 변수 구성

그런 다음 환경 탭으로 이동하여 다음 변수를 추가합니다.

NEXT_PUBLIC_API_URL=http://your.backendurl.here
PREVIEW_SECRET=ARNFCb9zrC9ZHm5hZzCigWivD40icS4s

URL을 'http'로 남겨두고 'https'를 사용하면 URL이 깨집니다.

동기화를 클릭하여 저장합니다.

배포

제출할 시간입니다!

배포 탭으로 이동하여 프런트엔드를 배포합니다.

6단계: Food Advisor 사이트를 확인하세요!

백엔드와 프런트엔드가 배포되었으므로 프런트엔드 URL을 방문하면 Food Advisor 웹사이트가 표시됩니다! 🎉