GitHub Actions iş akışı ile özel oturum açma kullanıcı arayüzü dağıtımınızı otomatikleştirin

Arka Plan#

Logto, Müşteri Kimlik ve Erişim Yönetimi (CIAM) çözümü olarak daha iyi bir seçenektir. Yakın zamanda Logto Cloud üzerinde "Kendi kullanıcı arayüzünüzü getirin" özelliğini tanıttık ve geliştiricilerin oturum açma kullanıcı arayüzlerini tamamen özelleştirmelerini sağladık.

Önceki bir blog yazımızda, kendi oturum açma kullanıcı arayüzünüzü oluşturmanıza yönelik adım adım bir kılavuz da sunduk. Bu süreç şunları içerir:

• Kod örnekleriyle özel bir oturum açma sayfası geliştirmek
• Yerel hata ayıklama için @logto/tunnel CLI aracını kurmak
• Özel kullanıcı arayüzü varlıklarını oluşturmak ve ziplemek
• Zip paketini yükleyip Konsol Kullanıcı Arayüzü aracılığıyla Logto Cloud'a dağıtımını yapmak

Ancak, bir DevOps zihniyetine sahip bir uygulama geliştiricisi olarak, özel oturum açma sayfanıza değişiklikler yaparken bu süreci zahmetli bulabilirsiniz. Tüm bu süreci otomatikleştirmenin bir yolu var mı?

Görüşlerinizi dikkate aldık ve @logto/tunnel içinde yeni bir deploy CLI komutu tanıtmaktan heyecan duyuyoruz. Bu komut, uygun bir CI/CD hattı oluşturma için terminalinizde komutu çalıştırarak veya bir GitHub Actions iş akışına entegre ederek dağıtım sürecini otomatikleştirmenizi sağlar. Haydi başlayalım!

Gereksinimler#

Kuruluma başlamadan önce aşağıdakilere sahip olduğunuzdan emin olun:

1. Abonelik planına sahip bir Logto Cloud hesabı.
2. Logto kiracınızda Yönetim API izinlerine sahip bir makine-ile-makine uygulaması.
3. Proje kaynak kodunuzun GitHub'da barındırılması.
4. Projenizde @logto/tunnel CLI aracını bir geliştirici bağımlılığı olarak yüklemek.

Adım 1: GitHub Actions iş akışı oluşturun#

GitHub deposunda yeni bir iş akışı dosyası oluşturun. Bunu .github/workflows/ adresine gidip deploy.yml adında bir dosya oluşturarak yapabilirsiniz.

GitHub Actions iş akışının açıklaması#

• Tetikleyici: İş akışı her bir ana dal itmesiyle tetiklenir.
• İşler: Dağıtım işi, en son Ubuntu ortamında çalışır ve aşağıdaki adımları uygular.
• Adımlar:
  • Kodu Kontrol Et: Bu adım, deponuzdan kodu kontrol eder.
  • Node.js'i Kur: Bu adım, Node.js ortamını kurar.
  • Bağımlılıkları Yükle: Bu adım, proje bağımlılıklarını yükler.
  • Oluştur: Bu adım, proje kaynak kodunu html varlıklarına dönüştürür. Çıkış klasörünün kök dizinde dist olarak adlandırıldığını varsayalım.
  • Logto Cloud'a Dağıtım Yap: Bu adım, ./dist dizinindeki html varlıklarını Logto Cloud kiracınıza dağıtmak için Tunnel CLI komutunu çalıştırır. Duyarlı bilgileri çevre değişkenleriyle kullanır.

GitHub Actions hakkında daha fazla bilgi için GitHub Actions Dokümantasyonu adresini ziyaret edin.

Adım 2: GitHub'da eylem gizliliklerini yapılandırın#

Kimlik bilgilerinizi güvende tutmak için bunları GitHub deponuzda gizli bilgiler olarak saklamalısınız:

1. GitHub deponuza gidin.
2. "Ayarlar" üzerine tıklayın.
3. "Gizli bilgiler ve değişkenler > Eylemler"
4. Yeni depo gizli bilgisini tıklayın ve aşağıdaki gizli bilgileri ekleyin:

• LOGTO_AUTH: Logto M2M uygulama kimlik bilgilerinizi <m2m-app-id>:<m2m-app-secret> formatında.
• LOGTO_ENDPOINT: Logto Cloud uç nokta URI'niz.
• LOGTO_RESOURCE: Logto Yönetim API kaynağınız. "API kaynakları -> Logto Yönetim API'si" içinde bulunur. Logto Cloud kiracınızda özel etki alanı etkinleştirilmişse gereklidir.

Adım 3: İş akışınızı test edin#

İş akışını ayarladıktan ve gizli bilgileri yapılandırdıktan sonra bir PR'ı ana dala birleştirerek test edebilirsiniz. GitHub Actions iş akışı otomatik olarak tetiklenecek ve özel oturum açma kullanıcı arayüzünüz Logto Cloud'a dağıtılacaktır.

Sonuç#

@logto/tunnel CLI komutunu GitHub Actions iş akışınıza entegre ederek özel oturum açma kullanıcı arayüzünüzün Logto Cloud'a dağıtım işlemini kolaylaştırabilirsiniz. Bu otomasyon, geliştirmeye odaklanmanıza ve değişikliklerinizin canlı bir ortamda sürekli olarak test edilmesini sağlar.

İyi kodlamalar!