Let's show you how to automate the deployment of your custom sign-in UI to Logto Cloud in your devops pipeline with a GitHub Actions workflow.
Logto is your better choice of Customer Identity and Access Management (CIAM) solution. Recently, we launched the "Bring your own UI" feature on Logto Cloud, enabling developers to fully customize their sign-in UI.
In a previous blog post, we also provided a step-to-step guide on creating your own sign-in UI, which includes:
@logto/tunnel CLI for local debuggingHowever, as an app developer with a DevOps mindset, you may find this process cumbersome when making changes to your custom sign-in page. Is there a way to automate the entire process?
We’ve listened to your feedback, and are excited to introduce a new deploy CLI command in @logto/tunnel. This command allows you to automate the deployment process by executing the command in your terminal, or integrating it into a GitHub Actions workflow, which is particularly useful for building your CI/CD pipeline. Let's dive in!
Before we dive into the setup, ensure you have the following:
@logto/tunnel CLI tool as a dev dependency in your project.In your GitHub repository, create a new workflow file. You can do this by navigating to .github/workflows/ and creating a file named deploy.yml.
dist in the root directory../dist directory to your Logto Cloud tenant. It uses environment variables for sensitive information.For more information on GitHub Actions. visit the GitHub Actions Documentation.
To keep your credentials secure, you should store them as secrets in your GitHub repository:
<m2m-app-id>:<m2m-app-secret>.Once you have set up the workflow and configured the secrets, you can test it by merging a PR into the master branch. The GitHub Actions workflow will automatically trigger, and your custom sign-in UI will be deployed to Logto Cloud.
By integrating the @logto/tunnel CLI command into your GitHub Actions workflow, you can streamline the deployment process of your custom sign-in UI to Logto Cloud. This automation allows you to focus on development while ensuring that your changes are continuously tested in a live environment.
Happy coding!