한국어
  • github actions 워크플로우
  • CI/CD
  • 자동화된 배포
  • 배포 간소화
  • 사용자 UI 가져오기
  • 사용자 정의 로그인 UI
  • @logto/tunnel

GitHub Actions 워크플로우로 사용자 정의 로그인 UI 배포 자동화하기

GitHub Actions 워크플로우를 사용하여 개발자 파이프라인에서 사용자 정의 로그인 UI를 Logto Cloud에 자동으로 배포하는 방법을 보여드리겠습니다.

Charles
Charles
Developer

배경

Logto는 고객 아이덴티티 및 액세스 관리 (CIAM) 솔루션의 더 나은 선택입니다. 최근 우리는 개발자들이 로그인 UI를 완전히 사용자정의할 수 있는 "사용자 UI 가져오기" 기능을 Logto Cloud에서 출시했습니다.

이전 블로그 포스트에서도 사용자 정의 로그인 UI를 만드는 방법에 대한 단계별 가이드를 제공했습니다. 여기에는 다음이 포함됩니다:

  • 코드 샘플을 사용하여 사용자 정의 로그인 페이지 개발하기
  • 로컬 디버깅을 위한 @logto/tunnel CLI 설정하기
  • 사용자 정의 UI 자산을 빌드 및 압축하기
  • 압축된 패키지를 업로드하고 Console UI를 통해 Logto Cloud에 배포하기

그러나 DevOps 마인드를 가진 앱 개발자로서 로그인 페이지에 변경 사항을 적용하는 과정이 번거롭다고 느낄 수 있습니다. 이 모든 과정을 자동화할 방법이 있을까요?

여러분의 피드백을 반영하여 @logto/tunnel에 새 deploy CLI 명령어를 소개하게 되어 기쁩니다. 이 명령어를 사용하면 터미널에서 명령어를 실행하거나 GitHub Actions 워크플로우에 통합 함으로써 배포 프로세스를 자동화할 수 있습니다. 이는 CI/CD 파이프라인을 구축하는 데 특히 유용합니다. 시작해 봅시다!

사전 준비

설정에 들어가기 전에 다음 항목을 확인하세요:

  1. 구독 플랜이 있는 Logto Cloud 계정.
  2. Logto 테넌트에 관리 API 권한을 가진 기계 대 기계 애플리케이션.
  3. 프로젝트 소스 코드는 GitHub에 호스팅되어야 합니다.
  4. 프로젝트에 @logto/tunnel CLI 도구를 dev dependency로 설치하세요.

1단계: GitHub Actions 워크플로우 생성하기

GitHub 리포지토리에서 새 워크플로우 파일을 생성하세요. .github/workflows/로 이동하여 deploy.yml이라는 파일을 생성하세요.

GitHub Actions 워크플로우 설명

  • 트리거: 워크플로우는 메인 브랜치에 푸시될 때마다 트리거됩니다.
  • 작업: 배포 작업은 최신 우분투 환경에서 실행되며 다음 단계들을 수행합니다.
  • 단계:
    • 코드 체크아웃: 이 단계는 리포지토리 코드를 체크아웃합니다.
    • Node.js 설정: Node.js 환경을 설정합니다.
    • 종속성 설치: 프로젝트 종속성을 설치합니다.
    • 빌드: 프로젝트 소스 코드를 html 자산으로 빌드합니다. 출력 폴더는 루트 디렉토리의 dist라고 가정합니다.
    • Logto Cloud에 배포: Tunnel CLI 명령어를 실행하여 ./dist 디렉토리의 html 자산을 Logto Cloud 테넌트에 배포합니다. 민감한 정보는 환경 변수로 사용합니다.

GitHub Actions에 대한 자세한 내용은 GitHub Actions Documentation를 방문하세요.

2단계: GitHub에서 액션 비밀 구성하기

자격 증명을 안전하게 유지하려면 GitHub 리포지토리에 비밀로 저장해야 합니다:

  1. GitHub 리포지토리로 이동합니다.
  2. "설정"을 클릭합니다.
  3. "비밀 및 변수 > 액션"으로 이동합니다.
  4. 새 리포지토리 비밀을 클릭하고 다음 비밀을 추가합니다:
  • LOGTO_AUTH: <m2m-app-id>:<m2m-app-secret> 형식의 Logto M2M 애플리케이션 자격 증명.
  • LOGTO_ENDPOINT: Logto Cloud 엔드포인트 URI.
  • LOGTO_RESOURCE: Logto 관리 API 리소스 표시기. "API 리소스 -> Logto 관리 API"에서 찾을 수 있습니다. 사용자 정의 도메인이 Logto Cloud 테넌트에서 활성화된 경우 필요합니다.

3단계: 워크플로우 테스트하기

워크플로우를 설정하고 비밀을 구성한 후, PR을 마스터 브랜치에 병합하여 테스트할 수 있습니다. GitHub Actions 워크플로우가 자동으로 트리거되고, 사용자 정의 로그인 UI가 Logto Cloud에 배포됩니다.

GitHub Actions를 사용한 Logto Cloud로의 성공적인 배포

결론

GitHub Actions 워크플로우에 @logto/tunnel CLI 명령어를 통합함으로써 사용자 정의 로그인 UI를 Logto Cloud로의 배포 프로세스를 간소화할 수 있습니다. 이 자동화는 개발에 집중하면서 변경 사항이 라이브 환경에서 지속적으로 테스트되도록 합니다.

행복한 코딩 되세요!

Logto Cloud를 무료로 사용해보세요